Le prestazioni web moderne sono in gran parte guidate dall'ottimizzazione delle risorse, con una notevole attenzione alle immagini. Le immagini rappresentano una parte significativa dei dati utilizzati dai siti web. Pertanto, offrire immagini nei formati più efficienti può avere un profondo impatto sulle prestazioni del sito, sull'esperienza dell'utente e sul posizionamento SEO. Lo strumento di controllo Lighthouse di Google fornisce approfondimenti critici per aiutare a raggiungere questa ottimizzazione, una delle quali è l'opportunità di "pubblicare immagini in formati moderni". Questa funzione, situata nella sezione Opportunità del rapporto Lighthouse, identifica tutte le immagini su un sito che sono in formati precedenti, suggerendo potenziali miglioramenti delle prestazioni che potrebbero essere raggiunti offrendo queste immagini in formati moderni, come AVIF e WebP.
Il problema con i formati di immagine tradizionali
Molti siti Web utilizzano ancora formati tradizionali come JPEG, PNG e GIF per le loro immagini. Sebbene questi formati abbiano i loro punti di forza e abbiano servito bene il Web per anni, non sono efficienti come alcuni dei formati moderni quando si tratta di compressione e qualità. Questi formati meno recenti spesso portano a file di dimensioni maggiori, che possono rallentare le prestazioni del sito, in particolare per gli utenti con connessioni Internet più lente o su dispositivi mobili.
La promessa dei moderni formati di immagine
Negli ultimi anni, due formati sono emersi come opzioni superiori per le immagini web: AVIF e WebP.
AVIF , o AV1 Image File Format, si basa sul formato di codifica video AV1 sviluppato da Alliance for Open Media. Offre significativi guadagni di compressione rispetto ai formati precedenti, il che significa che può fornire immagini di alta qualità con dimensioni di file molto più piccole. Ciò rende AVIF una scelta eccellente per i siti Web con un elevato contenuto di immagini.
WebP , sviluppato da Google, offre anche capacità di compressione impressionanti, in particolare per le immagini con trasparenza (canali alfa), dove supera notevolmente PNG. Questo formato supporta sia la compressione lossy che lossless, consentendo agli sviluppatori di bilanciare la qualità dell'immagine e la dimensione del file in base alle proprie esigenze.
Identificare le opportunità con Lighthouse
Lo strumento Lighthouse è fondamentale per individuare opportunità per migliorare le prestazioni del sito. Analizzando le risorse di un sito, fornisce un elenco di tutte le immagini attualmente offerte in formati precedenti. Questo rapporto dettagliato mostra i potenziali risparmi in kilobyte (KB) o megabyte (MB) che potrebbero essere ottenuti convertendo queste immagini in formati moderni.
Per ogni immagine, Lighthouse calcola la differenza tra la dimensione del file corrente e la dimensione del file stimata se fosse pubblicata in un formato moderno. Presenta quindi questi potenziali risparmi, offrendo agli sviluppatori indicazioni chiare sui possibili miglioramenti delle prestazioni che potrebbero essere raggiunti.
Attuazione del cambiamento
Dopo aver identificato le immagini da convertire, il passaggio successivo prevede la generazione di versioni AVIF o WebP di queste immagini. Sono disponibili diversi strumenti e librerie per questo, tra cui Squoosh , un'app Web per la compressione delle immagini online sviluppata da Google e ImageMagick , una solida suite software che gestisce la conversione e la manipolazione delle immagini.
Una volta che le immagini sono state convertite, devono essere fornite agli utenti in modo compatibile con i loro browser. Ciò comporta spesso l'utilizzo dell'elemento HTML "immagine" o metodi simili, che consentono di offrire diverse versioni di un'immagine in base alle capacità del browser.
Conclusione
La pubblicazione di immagini in formati moderni è una componente cruciale dell'ottimizzazione delle prestazioni web. Sfruttando la funzione "Servisci immagini in formati moderni" di Lighthouse, gli sviluppatori Web possono identificare prontamente i potenziali risparmi offerti da questi formati. Abbracciare AVIF e WebP non solo migliora le prestazioni del sito; migliora l'esperienza dell'utente e potrebbe avere un impatto positivo sulle classifiche SEO. I moderni formati di immagine sono qui per restare e sfruttarli al massimo delle loro potenzialità è un'opportunità da non perdere.
