Ottimizzare le immagini del sito: WebP, AVIF e lazy loading

Nella maggior parte dei siti che analizziamo, le immagini sono la prima causa di lentezza: pesano più di tutto il resto della pagina messo insieme. La buona notizia è che ottimizzare le immagini del sito è l'intervento di performance con il miglior rapporto tra sforzo e risultato: formati moderni come WebP e AVIF, dimensioni corrette e lazy loading bastano a trasformare i tempi di caricamento.

Perché le immagini pesano così tanto

Il problema nasce quasi sempre a monte: foto caricate nel CMS così come escono dalla fotocamera o dallo smartphone, con risoluzioni enormi rispetto allo spazio che occuperanno in pagina, in formati pensati per la stampa più che per il web. Il browser scarica tutto, anche i pixel che non mostrerà mai.

Le conseguenze non sono solo estetiche. Le metriche di esperienza utente che Google usa nella valutazione delle pagine risentono direttamente delle immagini: l'elemento più grande della schermata iniziale è spesso una foto, e finché non arriva la pagina sembra vuota. Su mobile, con connessioni variabili, la differenza tra un sito curato e uno trascurato la fanno proprio i kilobyte delle immagini.

WebP e AVIF: cosa scegliere

WebP e AVIF sono i due formati moderni che sostituiscono JPEG e PNG per l'uso web. In sintesi:

• WebP è il compromesso affidabile: comprime meglio del JPEG a parità di qualità percepita, supporta la trasparenza come il PNG ed è gestito da tutti i browser attuali;
• AVIF comprime in genere ancora meglio, soprattutto alle qualità medio-basse, ed è ormai ampiamente supportato; la codifica è più lenta, il che conta solo se generi molte immagini al volo.

La strategia che adottiamo di solito: AVIF dove il flusso di lavoro lo genera senza attriti, WebP come formato principale o di riserva, e l'originale JPEG o PNG come ulteriore fallback. In HTML si fa con l'elemento picture, che lascia al browser la scelta del miglior formato che sa leggere; sui CMS più diffusi esistono plugin e servizi che convertono e servono i formati moderni in automatico, senza toccare la libreria media.

Un'avvertenza: il formato moderno non sostituisce la compressione. Un'immagine esportata male resta pesante anche in AVIF. Regola la qualità al minimo che l'occhio accetta: per le foto di contorno si può scendere parecchio prima di notare differenze.

Prima del formato: le dimensioni giuste

Il guadagno più grosso, prima ancora del formato, viene dal servire immagini della dimensione giusta per lo schermo che le guarda. Un telefono non ha bisogno dell'immagine preparata per un monitor da scrivania.

Gli strumenti sono standard: gli attributi srcset e sizes permettono di dichiarare più versioni della stessa immagine, e il browser sceglie quella adatta. I CMS moderni generano le varianti da soli al caricamento; va però verificato che il tema le usi sul serio, perché capita spesso di trovare temi che caricano l'originale a prescindere.

Due abitudini che evitano problemi:

• carica nel CMS immagini già ridimensionate a un massimo ragionevole per il tuo layout, non i file originali della fotocamera;
• indica sempre larghezza e altezza (o le proporzioni) nell'HTML, così la pagina non salta durante il caricamento.

Lazy loading fatto bene

Il lazy loading rimanda il caricamento delle immagini fuori schermo a quando l'utente si avvicina scorrendo. Oggi è una funzione nativa dei browser: basta l'attributo loading impostato su lazy, senza librerie aggiuntive.

L'errore da evitare è applicarlo a tappeto: l'immagine principale in cima alla pagina non va mai caricata pigramente, perché è la prima cosa che l'utente deve vedere e ritardarla peggiora proprio la metrica che vorresti migliorare. La regola è semplice: le immagini visibili all'apertura si caricano subito, tutto il resto può aspettare.

Completa il quadro una CDN, che serve i file dal nodo più vicino al visitatore, e una politica di cache con scadenze lunghe per le risorse statiche: l'immagine scaricata una volta non va richiesta di nuovo a ogni visita.

Come verificare i risultati

Ottimizzare senza misurare è tirare a indovinare. Il giro di controllo che facciamo su ogni progetto:

1. testa le pagine principali (home, una pagina di categoria, una scheda o un articolo) con gli strumenti di analisi delle performance disponibili gratuitamente online, prima e dopo gli interventi;
2. guarda il peso totale delle immagini per pagina e quante richieste partono al primo caricamento;
3. controlla nel report quali immagini vengono segnalate come sovradimensionate o in formati datati;
4. ripeti il test da mobile, che è dove i problemi si vedono per primi.

Sui siti web ed eCommerce che realizziamo, questa pipeline è impostata dall'inizio: conversione automatica nei formati moderni, varianti responsive generate dal CMS e lazy loading selettivo. Il risultato è che il cliente carica le foto e il sistema fa il resto, senza dipendere dalla disciplina di chi pubblica.

Il tuo sito carica lento per colpa delle immagini?

Se le pagine del tuo sito impiegano troppo ad aprirsi, è probabile che gran parte del problema sia risolvibile in poco tempo. Realizziamo e ottimizziamo siti web ed eCommerce con pipeline di immagini automatizzate. Prenota una call gratuita: analizziamo le tue pagine e ti diciamo quanto margine di velocità c'è.