Sappiamo bene quanto le immagini siano importanti per l’impatto comunicativo delle nostre pagine web o dei nostri articoli. Questo non vale ovviamente soltanto per il web, ma anche per la stampa. Nella comunicazione le immagini servono ad essere più incisivi e immediati. Al contempo però influenzano molto la fruibilità del nostro sito, rallentando il caricamento delle pagine. Ormai siamo abituati a fare le foto dal cellulare, caricarle sui social network o inviarle tramite le app di messaggistica. Non ci preoccupiamo del peso della singola immagine, perché le nostre foto vengono automaticamente ridotte dalle applicazioni che utilizziamo, senza che ne abbiamo la percezione. Ma quando dobbiamo caricarle sul nostro sito, occorre essere consapevoli di quanto possano influenzare l’esperienza di navigazione per l’utente.
Cosa vuol dire ottimizzare le immagini?
Le immagini digitali sono definite raster, cioè trama o griglia. Pensa all’immagine digitale come a un mosaico di quadratini uguali disposti su righe e colonne. Ogni quadratino è definito pixel, cioè Picture Element. Ogni pixel è definito da un colore. La dimensione dell’immagine riguarda proprio il numero di pixel in cui è suddivisa, es 1920 x 1080 pixel. La risoluzione riguarda la grandezza dei singoli pixel e si misura in ppi, cioè Pixel per Inch (punti per pollice). Più alta sarà la densità dei quadratini, più grande sarà la risoluzione, più definita sarà l’immagine. Se l’immagine è suddivisa in moltissimi e piccoli quadratini, avremo molte più informazioni sulle variazioni di colore perché ogni quadratino porta con sé un dato, l’immagine sarà dettagliata e precisa.
Mentre la dimensione dell’immagine determina l’area di stampa o di visualizzazione dell’immagine, la risoluzione determina la sua qualità in termini di definizione e dettaglio. L’ottimizzazione delle immagini opera quindi su due livelli: la dimensione e la qualità. Ottimizzare le immagini significa ridurle in termini di dimensione e comprimerle in termini di qualità, così da non rallentare eccessivamente il caricamento della pagina. L’ottimizzazione deve rispettare però la dimensione e la qualità minime richieste dal progetto, altrimenti le immagini apparirebbero piccole e sgranate. Nel processo di ottimizzazione si ricerca un equilibrio tra qualità e peso dell’immagine.
Perché ottimizzare le immagini per il web?
Il visitatore del tuo sito ha generalmente poco tempo e ogni secondo di attesa per il caricamento della pagina è di troppo. L’ottimizzazione delle immagini alleggerisce il peso della pagina, migliorando l’esperienza per l’utente e di conseguenza anche il posizionamento nei motori di ricerca. Ti ricordo infatti che Google penalizza i siti troppo lenti. Le immagini emozionano e sicuramente migliorano la comunicazione del tuo brand, ma bisogna cercare un equilibrio tra la quantità e la qualità delle immagini da inserire: meglio poche immagini, ma d’impatto e di qualità.
Utilizza il formato adatto
Un ruolo importantissimo nel processo di ottimizzazione è svolto dal formato dell’immagine. Ogni formato è caratterizzato da una diversa compressione del file, che lo rende adatto a determinate tipologie di immagini. Scegliere il formato corretto permette di alleggerire ancora di più l’immagine. I formati più utilizzati nel web sono gif, jpg, png. Vediamoli nel dettaglio:
Il formato JPG
Il formato più adatto a illustrazioni e fotografie, perché permette un’alta compressione, pur preservando la qualità. È possibile regolare la compressione, cercando un equilibrio tra qualità e peso dell’immagine. Non supporta la trasparenza.
Il formato GIF
Supporta una scala di 256 colori e la trasparenza. Adatta a immagini con poche sfumature e tonalità. Era molto diffuso agli albori del web, perché era l’unico formato che supportava la trasparenza. Oggi è di nuovo tornato alla ribalta grazie alle gif animate: permette infatti di creare una sequenza di immagini e riprodurle in loop.
Il formato PNG
La compressione del formato png è meno performante del jpg, perché riduce le immagini senza alterare le informazioni originali. Rispetto al JPG supporta però la trasparenza, quindi è da preferire tutte le volte che abbiamo la necessità di inserire un’immagine con sfondo trasparente, ad esempio il logo.
Ci sono molti altri formati, come il WebP, che però non è ancora supportato da tutti i browser. Il formato SVG è, invece, un formato per immagini vettoriali: è cioè il risultato di vettori che compongono le forme. La principale caratteristica di queste immagini è che non perdono qualità aumentando o diminuendo la dimensione e il peso rimane molto leggero. È adatto a illustrazioni grafiche e loghi, mentre non risulta performante con immagini con molte sfumature e tonalità.
Utilizza le dimensioni e la risoluzione adatte
- Il primo passo è accertarsi che la modalità colore dell’immagine sia RGB. Il metodo di colore riguarda il modo in cui i colori sono mescolati. Nel metodo RGB, la somma dei colori Rosso, Giallo e Blu darà come risultato il Bianco. È il metodo indicato per le immagini e le grafiche destinate al web, o comunque alla visualizzazione su schermo, perché gli schermi si basano sul metodo RGB per la riproduzione del colore.
- Il secondo passo è ottimizzare la risoluzione. Le fotocamere realizzano foto dai 300dpi in su, perché la stampa richiede un’alta risoluzione per ottenere un buon risultato. Nel web una risoluzione di 72dpi è più che sufficiente.
- Quindi occorre verificare la larghezza massima in cui sarà visualizzata l’immagine e ridimensionarla attenendosi al valore massimo. Prima di capire di quanto ridimensionare le proprie immagini, infatti, bisogna sapere qual è la larghezza massima che avrà l’immagine sul sito. Uno schermo da 24 pollici ha una risoluzione di 1920 x 1080 pixel. Un’immagine più grande non ci porterà vantaggio in termini di qualità e appesantirà inutilmente la pagina. Se utilizzi l’immagine all’interno di un post nella colonna principale, difficilmente supererà la larghezza di 1200px. Naturalmente bisogna ridurre l’altezza in proporzione per evitare di alterare l’immagine finale.
- Infine verifica il peso finale dell’immagine. Il peso dipende da quante immagini sono presenti sulla pagina. In genere è buona norma che l’immagine pesi 70-100Kb e non superi i 150-200Kb.
Come ottimizzare le immagini
Per chi usa già Photoshop, è a cavallo: non esiste strumento migliore. Esistono comunque molte app gratuite per ottimizzare le immagini, basta una ricerca su google per averne un’idea. Pur utilizzando abitualmente Photoshop, se devo fare in fretta e l’immagine ha già la dimensione corretta mi affido a un’applicazione online molto rapida che si occupa di ridurre la qualità dell’immagine, come TinyJpg per il formato JPG e TinyPng per il formato PNG. Si utilizza online ed è gratuita.
Un altro valido strumento gratuito per il fotoediting è Pixlr o Gimp: sono applicazioni gratuite da scaricare, che permettono, oltre a ridimensionare e ottimizzare le immagini, anche di elaborarle con qualche strumento di fotoritocco.
Esistono anche molti plugin per WordPress che si occupano di ridimensionare e ottimizzare le immagini caricate. Personalmente però sconsiglio sempre di caricare su WordPress plugin non essenziali. I plugin agevolano alcune funzioni, ma rallentano il sito. L’ottimizzazione delle immagini, a seconda della grandezza del sito, è un’attività che non porta via molto tempo ed è più conveniente e performante se svolta su strumenti pensati per questo scopo. Otterremo un’immagine di alta qualità, leggera e non rallenterà il sito.
Non utilizzare immagini decorative
Hai non più di 5 secondi per convincere il tuo utente a rimanere sulla tua pagina. Ogni secondo che lo farai attendere inutilmente accorcerà il tempo che hai a disposizione. Le immagini sono una componente fondamentale per attrarre l’utente e stabiliscono più di ogni altro elemento un legame emozionale con lui. Non inserirle a casaccio o solo per abbellire o decorare la pagina. Scegli solo le immagini che possano dare significato o enfasi ai tuoi contenuti. Meglio ancora se le tue immagini sono uniche e originali.
Occhio ai diritti!
La ricerca per immagini di Google è fantastica e la uso anche io per trovare ispirazione. Ma per lo più le immagini che troverai sono tutte coperte dai diritti d’autore. Se non hai foto originali, puoi comprare foto libere da diritti su siti come Adobe Stock o Shutterstock o Istockphoto. Inoltre alcuni siti, come Unsplash o Pixabay, offrono gratuitamente foto libere da diritti. Bisogna però tenere a mente che le foto che troviamo su questi siti sono usati da tantissime persone, perderemo quindi il tratto di unicità e originalità che avremo con foto proprie. Se per vari motivi non puoi utilizzare foto originali e ti affidi alle foto in stock, il mio consiglio è di personalizzarle grazie ad applicazioni come Canva, che già col piano gratuito offre moltissime funzionalità.
Alcuni consigli per ottimizzare le immagini
- Immagine per slider o a pieno schermo (full background): ridimensionala fino a una larghezza di almeno 1920px di larghezza, non superare i 2500px.
- Immagine nella sidebar laterale: in genere 700-800px è sufficiente, considerando che sui dispositivi mobili potrebbero apparire a tutto schermo.
- Immagine in un articolo o una pagina inserita (non a tutto schermo): generalmente è sufficiente una larghezza di 900-1000px. Non superare i 1200px.
- Se lavori con il formato jpg, puoi impostare il livello di compressione variando il valore della qualità (da 0 a 100). Verifica sempre che l’immagine non risulti sgranata e che la qualità sia sufficiente per la dimensione dell’immagine.
- Usate le GIF solo per le animazioni.
