Ottimizzare le immagini per il web: WebP, dimensione e tempo di caricamento

Quando un sito carica lentamente, nella stragrande maggioranza dei casi la colpa è delle immagini. Una singola foto, appena scaricata dalla fotocamera o dal telefono, può pesare più di tutto il resto del contenuto di una pagina messo insieme. E l'insidia è: non lo si nota dall'immagine. Sullo schermo appare ugualmente bella, che sia di cinque megabyte o di cinquanta kilobyte.

La buona notizia è che proprio qui si guadagna velocità più facilmente. Ottimizzare le immagini per il web significa in sostanza: ridurre nettamente il peso, senza che nessuno noti la differenza. In questo articolo le mostro cosa conta, senza gergo tecnico e in modo che lei possa metterlo in pratica da sé.

Perché le immagini pesanti sono così costose

Ogni immagine che il suo sito mostra deve prima viaggiare lungo la linea fino al visitatore. Più pesante è il file, più a lungo dura, soprattutto sul telefono con ricezione mediocre, ed è proprio lì che oggi la maggior parte delle persone guarda la sua pagina.

Se qualcuno aspetta troppo a lungo, se n'è andato prima ancora di aver visto cosa lei offre. Le immagini pesanti costano quindi non solo tempo di caricamento, ma clienti veri. E poiché Google conteggia la velocità nel posizionamento, costano in più visibilità.

La dimensione giusta: metà del segreto

L'errore più frequente è sorprendentemente semplice: le immagini vengono caricate in una risoluzione molto più grande di quanto vengano mai mostrate. Una foto dal telefono è spesso larga 4000 pixel. Sul suo sito appare magari larga 800 pixel. Tutto il resto il visitatore se lo trascina, senza vederne mai nulla.

La soluzione è portare un'immagine alla dimensione in cui viene effettivamente usata, prima di caricarla. Qualche valore di riferimento:

• Un'immagine grande su tutta la larghezza raramente ha bisogno di più di 1600-2000 pixel di larghezza.
• Un'immagine in una colonna o in un blocco di testo se la cava bene con 800-1000 pixel.
• Piccole anteprime hanno spesso bisogno solo di 400 pixel o meno.

Già questo passo, il ridimensionamento alla reale dimensione di visualizzazione, toglie a molte immagini la maggior parte del loro peso.

WebP: il formato moderno per le immagini web

Per anni JPG e PNG sono stati i formati standard sul web. Funzionano, ma non sono più la scelta più efficiente. WebP è un formato più recente, sviluppato appositamente per il web. Offre la stessa qualità d'immagine con dimensioni del file nettamente inferiori, spesso le immagini WebP sono dal 25 al 35 per cento più leggere di un JPG comparabile.

La cosa migliore: tutti i browser attuali supportano WebP senza problemi. Può convertire un JPG o un PNG in WebP e nella maggior parte dei casi risparmiare molto peso, senza che l'occhio noti una differenza. Esistono strumenti online gratuiti per farlo, e anche molti programmi di fotoritocco esportano ormai direttamente in WebP.

Comprimere senza perdita di qualità visibile

Quando si salva un'immagine si può impostare un valore di qualità, di solito come percentuale. Qui si nasconde un grande equivoco: molti credono di dover salvare al 100 per cento perché appaia bella. Non è vero. La differenza tra il 100 e circa l'80 per cento è praticamente impercettibile a occhio nudo, ma l'immagine diventa sensibilmente più leggera.

Un buon intervallo per le foto si aggira intorno al 75-85 per cento di qualità. Provi: salvi la stessa immagine una volta a piena qualità e una volta a qualità ridotta e le confronti. Nella stragrande maggioranza dei casi non vede alcuna differenza, ma la dimensione del file si è dimezzata o più.

Due leve che aiutano ancora

Altre due cose portano molto senza grande sforzo:

• Lazy Loading: le immagini che si trovano più in basso nella pagina non devono essere caricate subito, ma solo quando il visitatore vi scorre. Così la parte visibile della pagina carica più rapidamente.
• Indicare altezza e larghezza: se nel codice è definito quanto sarà grande un'immagine, il browser sa fin dall'inizio quanto spazio deve riservare. Questo evita il fastidioso spostamento del layout durante il caricamento.

Cosa porta concretamente?

Prendiamo un esempio tipico: una foto direttamente dal telefono, pesante quattro megabyte. Ridimensionata alla reale dimensione di visualizzazione, convertita in WebP e compressa in modo sensato, la stessa immagine finisce spesso tra i 150 e i 250 kilobyte, visibilmente identica, ma circa venti volte più leggera. Moltiplichi questo su una pagina con dieci immagini e capirà perché l'ottimizzazione delle immagini è la singola leva più grande per il tempo di caricamento.

Ottimizzare le immagini per il web non è una scienza segreta. Con la giusta dimensione, il formato WebP e una compressione ragionevole ottiene il massimo, e i suoi visitatori la ricompenseranno con più pazienza e più fiducia.

Se vuole sapere quanta velocità è possibile guadagnare sul suo sito attuale, ci guardo volentieri. Ci contatti semplicemente tramite il modulo di contatto, oppure curiosi tra gli altri articoli su siti web veloci e puliti.