Come comprimere le immagini per il web

Ti è mai capitato di atterrare su una pagina web che stenta a caricarsi, di perdere la pazienza e di cambiare pagina? Hai mai pensato che la stessa cosa forse sta accadendo sul tuo sito? Devi correre ai ripari!

Uno dei primi motivi di rallentamento del caricamento di una pagina web è il peso delle immagini presenti nella pagina: non sempre si fa un lavoro di ottimizzazione delle immagini per il web e questo implica delle foto troppo pesanti da scaricare, con tempi lunghissimi soprattutto in caso si navighi il sito da un dispositivo mobile non connesso tramite wi-fi.

In questo articolo ti darò dei consigli su come ottimizzare le immagini prima di utilizzarle per la comunicazione attraverso il tuo sito.

Questo articolo nasce da un mix di esperienze e ricerche personali ma non avrebbe visto la luce senza alcuni spunti raccolti durante un incontro del WordPress Meetup Bari: grazie wordpressiani! 🙂

Perché è importante comprimere le immagini

Lo avrai capito, comprimere le immagini da usare sul web permette di migliorare le prestazioni del tuo sito.

Dare un’accelerata alle performance ti permette di avvantaggiarti in due modi: da un lato migliorerai l’esperienza lato utente, perchè le persone che arrivano sul tuo sito non diventeranno vecchie in attesa del caricamento; dall’altro lato è ormai risaputo che la velocità di caricamento del sito è uno dei fattori di ranking di Google, perciò un sito veloce ti aiuta nella SEO. Che ne dici? Ci diamo da fare?

Le dimensioni contano

Un’ovvietà: le dimensioni di un’immagine incidono anche sul suo peso.

Per questo devi assicurarti di ridimensionare la tua immagine alle giusti dimensioni: se in una pagina lo spazio dedicato alla tua foto sarà 300×200 è inutile caricare una foto 800×500.

Per scoprire le giuste dimensioni aiutati con i tool di ispezione del tuo browser, mentre per ridimensionare le immagini puoi usare Photoshop (o un suo equivalente) oppure uno dei tanti tool online (prova la chiave di ricerca resize image online su Google, avrai l’imbarazzo della scelta).

Lo strumento salva per il web di Photoshop

Lo strumento Salva per il web di Photoshop

Se hai Photoshop sul tuo computer puoi demandargli buona parte del lavoro. Ti basta selezionare dal menù File la voce Salva per il web (nelle ultime versioni la trovi nel sottomenù Esporta).

Questo strumento ti permette di giocare con una serie di opzioni per comprimere al massimo la tua immagine: il software ti mostrerà la versione originale e la versione compressa, così potrai valutare con i tuoi occhi se stai comprimendo troppo e perdendo in qualità.

Ti basterà selezionare dai preset l’opzione Jpeg alta per notare come magicamente, pur non perdendo in qualità visiva, il peso della tua immagine calerà drasticamente.

Se il file della tua immagine contiene anche alcuni metadati (autore della foto, tipo di macchina che ha scattato…) puoi scegliere di eliminare questi dati per risparmiare ancora qualche kilobyte.

Se affidarti ad un set di opzioni predefinito non ti soddisfa puoi divertirti a cambiare i parametri e trovare l’equilibrio che più si avvicina alle tue esigenze.

Strumenti online per comprimere le immagini

Il web è pieno di servizi alternativi a Photoshop (o da usare in aggiunta) che permettono di caricare un’immagine per ottenerne una versione compressa. Voglio suggerirtene due:

  1. Compressor.io
    Questo strumento ti permette di comprimere immagini jpeg, png, gif ed svg. In caso di formato jpeg o png puoi scegliere una compressione lossless, ovvero senza perdita di qualità: la compressione sarà inferiore ovviamente.
  2. Tiny Jpg/Tiny Png
    Questi siti gemelli permettono di comprimere fino a 20 immagini jpeg e png in un sol colpo, con dei risultati strabilianti.

Comprimere le immagini in WordPress

Se sei un WordPress user ho per te un ultimo consiglio: il plugin Smush Image Compression and Optimization.

Questo plugin, dopo l’installazione, permette di comprimere le immagini già presenti sul sito a blocchi da 50 (a meno che non compriate la versione premium per fare tutto in un clic).

Inoltre comprimerà tutte le immagini che caricherai nei tuoi media in automatico, risparmiandoti un bel po’ di fatica.

Tutto questo avviene sfruttando gratuitamente i server dell’agenzia che ha sviluppato il plugin, Wpmu Dev: davvero una gran comodità.

Insomma, non ci sono più scuse: bisogna comprimere le immagini! E tu conosci altri strumenti dimagranti per immagini? Parliamone nei commenti. 🙂

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *