Immagini in formati di nuova generazione

L'avviso di Lighthouse significa convertire i file JPEG e PNG in WebP o AVIF, per poi servirli tramite un elemento picture con l'originale come fallback. Questo audit è uno dei più semplici da superare, poiché la correzione è di tipo meccanico piuttosto che strutturale.

Lighthouse genera l'avviso quando rileva immagini che ritiene potrebbero essere notevolmente più piccole in un formato moderno. La stima si basa sul file scaricato, quindi il risparmio segnalato è solitamente raggiungibile e talvolta persino prudente.

Cosa misura Lighthouse

Lighthouse ricodifica internamente ogni immagine in WebP e segnala la differenza quando il risparmio supera una determinata soglia. Il numero presente nel report è una stima reale e non una raccomandazione generica.

Le immagini al di sotto della soglia vengono ignorate, motivo per cui una pagina con 30 immagini potrebbe mostrare solo 4 elementi nell'audit. I file elencati sono quelli che vale la pena correggere per primi. Risolverli di solito rimuove completamente l'avviso, anche se altre immagini sulla pagina rimangono nei formati più vecchi.

Il markup che soddisfa l'audit

Usa un elemento picture con AVIF come prima scelta, WebP come seconda e il JPEG originale nel tag img. Il browser seleziona la prima sorgente che supporta, così i browser più recenti ottengono il file leggero e quelli più vecchi visualizzano comunque l'immagine.

Il tag img deve rimanere, poiché contiene il testo alternativo, le dimensioni e il fallback. Omettere gli attributi width e height causa uno spostamento del layout (layout shift) durante il caricamento delle immagini, danneggiando un'altra metrica dei Core Web Vitals mentre si corregge questa. Imposta entrambi gli attributi sulla dimensione in pixel nativa dell'immagine di fallback.

Come superare l'audit

Per risolvere correttamente l'avviso, segui questi 6 passaggi.

1. Apri il report di Lighthouse ed elenca le immagini indicate, ovvero quelle con un risparmio misurabile.
2. Verifica le dimensioni di visualizzazione di ciascuna immagine, poiché molte sono sovradimensionate oltre a essere nel formato errato.
3. Ridimensiona ogni immagine alla sua larghezza di visualizzazione reale, raddoppiandola per gli schermi ad alta densità.
4. Converti in WebP a qualità 80, e in AVIF a qualità 65 per le immagini più grandi della pagina.
5. Servi i risultati tramite un elemento picture con l'originale come fallback nel tag img.
6. Esegui nuovamente Lighthouse per confermare che l'avviso sia scomparso e che non si verifichino spostamenti di layout.

Il passaggio 3 è più importante del passaggio 4. Le dimensioni controllano la maggior parte del peso del file, e un WebP sovradimensionato rimane comunque un'immagine troppo pesante. La conversione in blocco richiede un paio di minuti, mentre la scrittura del markup di solito richiede più tempo.

Quale formato per quale immagine

La tua piattaforma lo fa già in automatico

Molti sistemi di gestione dei contenuti e host convertono le immagini automaticamente, quindi verifica prima di creare qualsiasi cosa manualmente. Fare il lavoro due volte è un errore comune e dispendioso.

Fai un test in 2 minuti. Apri la pagina pubblicata, fai clic con il tasto destro su un'immagine e aprila in una nuova scheda, quindi leggi l'estensione del file nella barra degli indirizzi. Un'estensione .webp su un file che avevi caricato come JPEG significa che la piattaforma lo sta già convertendo. Shopify, la maggior parte degli host WordPress gestiti e diversi costruttori di siti lo fanno per impostazione predefinita.

Perché l'avviso a volte ritorna

I nuovi caricamenti ripresentano il problema quando la fase di conversione è manuale anziché automatica. Un sito sistemato a gennaio mostrerà nuovamente l'avviso entro giugno se gli editor caricano le immagini direttamente dalla fotocamera.

Correggi il processo piuttosto che solo i file. Abilita la conversione automatica a livello di piattaforma oppure stabilisci una regola semplice per cui le immagini devono essere ridimensionate e convertite prima del caricamento. Mettere per iscritto la regola è fondamentale su qualsiasi sito in cui pubblica più di una persona, poiché l'audit misura l'immagine peggiore e non la media.

Dovresti usare AVIF, WebP o entrambi

Usa solo WebP sulla maggior parte dei siti e aggiungi AVIF solo per le immagini più grandi della pagina. Supportarli entrambi raddoppia il numero di file da generare, memorizzare e mantenere sincronizzati, a fronte di un risparmio ridotto sulle immagini comuni.

Il calcolo cambia per i siti ricchi di fotografie, dove AVIF consente di risparmiare un ulteriore 20-30% su file che pesano già centinaia di kilobyte. Su una pagina con un'immagine hero da 600 KB, si tratta di una riduzione reale. Su una pagina di miniature da 40 KB, la gestione di un flusso di lavoro extra richiede più sforzo di quanto non renda, e il solo WebP è sufficiente per superare l'audit.

Verificare il risultato correttamente

Esegui nuovamente Lighthouse in una finestra di navigazione in incognito con le estensioni disattivate, poiché le estensioni del browser distorcono la misurazione. I punteggi variano anche tra i diversi test, quindi confronta 3 analisi anziché fidarti di un singolo numero.

Verifica che il browser riceva effettivamente il nuovo formato invece di darlo per scontato. Apri gli strumenti per sviluppatori, vai alla scheda Rete, filtra per immagini e ricarica la pagina. La colonna Tipo mostra cosa è stato effettivamente servito. Se una pagina serve ancora JPEG dopo una conversione, di solito significa che il markup dell'elemento picture è errato o che un livello di cache sta mantenendo la versione precedente.

Audit correlati che compaiono insieme a questo

• Dimensiona correttamente le immagini. L'immagine è più grande dello spazio in cui viene visualizzata. Ridimensionala invece di comprimerla.
• Codifica efficacemente le immagini. La compressione è troppo leggera. Riduci l'impostazione della qualità.
• Rimanda le immagini fuori schermo. Aggiungi il caricamento differito (lazy loading) alle immagini sotto la piega.
• Elemento Largest Contentful Paint. Solitamente l'immagine hero, che merita attenzione per prima.
• Gli elementi immagine non hanno larghezza e altezza esplicite. Aggiungi entrambi gli attributi per evitare spostamenti di layout.

Questi 5 audit compaiono solitamente insieme; ridimensionare e convertire le immagini indicate nel report ne risolve la maggior parte in un colpo solo.

Quanto migliora effettivamente una pagina

La conversione ai formati moderni riduce in genere il peso delle immagini del 25-35%, e il ridimensionamento preventivo spesso elimina molto di più. Su una pagina ricca di immagini, l'effetto combinato è frequentemente del 70-80%.

Il miglioramento si riflette nel Largest Contentful Paint, che misura la rapidità con cui appare il contenuto principale. Questa metrica è solitamente determinata da una sola immagine, quindi alleggerire il file hero ha un effetto sproporzionato rispetto alla sua quota sulla pagina. Ridurre 20 piccole immagini conta meno che ridurne 1 grande.

Cosa non fare

Do non rimuovere il fallback JPEG e non convertire le immagini destinate al download da parte degli utenti. Entrambi gli errori sacrificano una reale funzionalità in cambio di un piccolo miglioramento del punteggio.

Cartelle stampa, guide stampabili, modelli scaricabili e file dei fornitori dovrebbero rimanere in JPEG o PNG, poiché il formato WebP è difficile da gestire al di fuori dei browser. Offrire questi file in formati moderni genera richieste di assistenza da parte di utenti che non riescono ad aprirli, il che costa più della larghezza di banda risparmiata.

Convertire le immagini indicate nel report

Converti a partire dai file originali e non dalle versioni già pubblicate, poiché un JPEG compresso trasferisce i propri difetti nel nuovo file. L'encoder non è in grado di distinguere gli artefatti esistenti dai dettagli reali e spreca bit per preservarli.

Trascina fino a 500 file contemporaneamente, o direttamente un archivio ZIP, e l'intero set verrà convertito in un unico passaggio. Tutto viene eseguito all'interno del tuo browser sul tuo processore, quindi i siti dei clienti, le risorse di staging e le pagine non pubblicate non raggiungono mai un server. La conversione di un intero sito si conclude in pochi minuti senza che un singolo file attraversi la rete.

Conserva i file convertiti insieme agli originali utilizzando nomi corrispondenti, in modo che il markup dell'elemento picture possa essere generato con uno schema prevedibile anziché modificato a mano per ogni immagine. Una cartella contenente hero.jpg, hero.webp e hero.avif è semplice da gestire tramite template, e trasforma la successiva migrazione di formato in una conversione batch piuttosto che in una riscrittura di ogni pagina.