La sezione Opportunità del report Lighthouse elenca tutte le immagini in formati precedenti, mostrando i potenziali risparmi ottenuti pubblicando versioni AVIF di queste immagini:
Perché pubblicare immagini in formato AVIF o WebP?
AVIF e WebP sono formati delle immagini che hanno caratteristiche di compressione e qualità superiori rispetto ai precedenti formati JPEG e PNG. Se codifica le immagini in questi formati anziché in JPEG o PNG, le immagini verranno caricate più velocemente e consumano meno dati della rete dati.
AVIF è supportato in Chrome, Firefox e Opera e offre file di dimensioni inferiori rispetto ad altri formati con le stesse impostazioni di qualità. Per ulteriori informazioni su AVIF, consulta la sezione Elaborazione di immagini AVIF codelab.
WebP è supportato nelle ultime versioni di Chrome, Firefox, Safari, Edge e Opera e offre una migliore compressione con perdita e perdita di dati per le immagini sul Web. Consulta Un nuovo formato dell'immagine per il web per saperne di più su WebP.
In che modo Lighthouse calcola i potenziali risparmi
Lighthouse raccoglie ogni immagine BMP, JPEG e PNG nella pagina, le converte in WebP e stima le dimensioni del file AVIF, segnalando i potenziali risparmi in base ai dati di conversione.
Compatibilità del browser
WebP è supportato dalle ultime versioni di Chrome, Firefox, Safari, Edge e Opera, mentre il supporto AVIF è più limitato. Per supportare i browser meno recenti, devi pubblicare un'immagine PNG o JPEG di riserva. Consulta Come faccio a rilevare il supporto del browser per WebP? per una panoramica delle tecniche di riserva e l'elenco riportato di seguito per il supporto dei formati delle immagini da parte del browser.
Per conoscere il supporto dei browser attuali per ogni formato moderno, consulta le voci qui sotto:
Indicazioni specifiche per lo stack
AMP
Potresti visualizzare tutti i componenti amp-img nei formati WebP e specificare un fallback appropriato per altri browser.
Drupal
Potresti installare e configurare un modulo per utilizzare i formati delle immagini WebP nel tuo sito. Questi moduli generano automaticamente una versione WebP delle immagini caricate per ottimizzare i tempi di caricamento.
Joomla
Potresti usare un plugin o un servizio che convertirà automaticamente le immagini caricate nei formati ottimali.
Magento
Potresti cercare sul Marketplace di Magento una serie di estensioni di terze parti per sfruttare i formati delle immagini più recenti.
iPhone
Tieni presente che le immagini webp, avif e i video webm non funzionano su iPhone precedenti a ios 16.
WordPress
Potresti usare un plugin o un servizio che convertirà automaticamente le immagini caricate nei formati ottimali.