Dovresti usare i formati immagine AV1 sul tuo sito web?

Devi aver sentito parlare del formato immagine AV1, ma non sei del tutto chiaro se utilizzare o meno i file AVIF sul tuo sito web.

Ti capisco perfettamente. Il formato immagine AV1 è ancora nella sua fase iniziale rispetto ad altri formati immagine come JPEG, WebP e PNG, quindi ho deciso di scriverti questo articolo per chiarire i tuoi dubbi.

Per prima cosa, diamo un'occhiata alla differenza tra AVIF, WebP, JPEG e PNG, quindi sappiamo se vale la pena considerare questo nuovo formato di immagine.

AVIF, WebP, JPEG e PNG: qual è la differenza?

Il formato immagine AV1 esiste solo da tre anni, a differenza di WebP, che esiste da 11 anni, PNG da 24 anni e JPEG da 29 anni, ma si dice che questo nuovo formato immagine sia la prossima grande novità nella condivisione delle immagini per i contenuti web.

La differenza significativa tra questi formati di immagine è il rapporto tra qualità dell'immagine e dimensione del file compresso. AVIF, il formato immagine sviluppato di recente, ha una migliore qualità dell'immagine rispetto alla dimensione del file compresso in quanto funge da miglioramento del formato immagine esistente.

Ad esempio, se hai un'immagine in formato PNG con una dimensione del file di 1,25 MB. Se si converte questa immagine in JPEG mantenendo una buona qualità dell'immagine, la dimensione del file si ridurrà a 76,62 KB; questo è il 94 percento in meno rispetto al file originale.

Prendendo la stessa immagine e convertendola in WebP, avrai una dimensione del file di 37,51 KB, il 97% in meno rispetto al file originale in PNG. Ma quando si decide di convertire questa stessa immagine nel formato immagine AV1, la dimensione del file si riduce a 16,86 KB, ovvero il 99% in meno rispetto al file originale con una buona qualità.

Nota che il risultato della conversione di qualsiasi immagine con una dimensione del file di 1,25 MB in formato PNG potrebbe differire dall'esempio che ho usato sopra. Questo è solo il risultato che ho ottenuto dalla conversione dell'immagine sottostante nei diversi formati mantenendo la stessa qualità dell'immagine, il tutto utilizzando uno strumento che ti mostrerò più avanti in questo articolo.

Immagine in PNG 1,25 MB

Immagine in JPEG 76,62 KB

Immagine in WebP 37,51 KB

La differenza è evidente, i file di immagine AVIF forniscono immagini di alta qualità e file di piccole dimensioni ed è l'unico formato immagine che lo fa bene.

Anche con la piccola dimensione del file del formato immagine AV1, ha un limite di dimensione quasi uguale a quello di JPEG. Il limite di dimensione AVIF è 65.536 x 65.536 pixel, mentre quello di JPEG è 65.535 x 65.535 pixel. Il limite di dimensione di WebP è 16.383 x 16.383 pixel e quello di PNG è 2500 megapixel.

Detto questo, la domanda ora è: dovresti usare il formato immagine AV1 sul tuo sito web?

Bene, la mia risposta è sì e ti illustrerò alcuni motivi per cui penso che valga la pena utilizzare i file AVIF sul tuo sito Web, anche se richiede molto più lavoro da parte tua.

Spiegherò cos'è questo lavoro mentre andiamo avanti in questo articolo, ma per ora, ecco tre motivi per cui dovresti usare i file AVIF sul tuo sito web.

3 motivi per cui dovresti usare i file AVF sul tuo sito web

I file AVIF hanno un'elevata qualità dell'immagine e una dimensione del file inferiore rispetto a WebP, JPEG e PNG, e qui ci sono tre motivi per cui si adattano bene alle immagini della tua pagina web.

1. Riducono il tempo di caricamento della pagina

Il tempo di caricamento della pagina del tuo sito web è il tempo impiegato dalle pagine web del tuo sito per caricarsi completamente in un browser. È determinato dal peso della pagina web; ovvero, più leggera è una pagina web, più veloce è il tempo di caricamento di quella pagina web.

Quando si tratta di ridurre il peso della tua pagina web, puoi farlo:

• Ottimizzazione del tuo codice
• Ottimizzazione dei caratteri
• Utilizzo di CDN
• Ottimizzazione delle tue immagini

Tra tutti i suggerimenti di cui sopra, quello relativo a ciò di cui stiamo discutendo ora è l'ottimizzazione delle tue immagini e puoi ottimizzare le tue immagini ridimensionandole, comprimendone le dimensioni del file e scegliendo il formato più appropriato per la tua attività.

Ed è qui che il formato immagine AV1 può aiutarti a ridurre il tempo di caricamento della pagina. Il formato immagine AV1 ha dimensioni file ridotte e la qualità dell'immagine che offre lo rende un formato immagine appropriato per le aziende.

Le piccole dimensioni dei file AVIF consentono a un browser di renderli più veloci e vengono anche trasferiti più rapidamente tramite la rete, il che influenza il tempo di caricamento della pagina del tuo sito web.

[Case Study] Monitoraggio e ottimizzazione di un restyling di un sito web a seguito di una sanzione

Per riprendersi da una massiccia perdita a seguito di un aggiornamento dell'algoritmo, Opirata ha lanciato una riprogettazione del sito su larga scala. Scopri come Opirata ha ottenuto un vantaggio utilizzando il crawler e l'analizzatore di log di OnCrawl per comprendere le insidie ​​del vecchio sito, convalidare ipotesi SEO e tenere traccia dei progressi man mano che Google tiene conto delle modifiche.

Leggi il caso di studio

2. Migliorano il tuo punteggio LCP

Come sai, Largest Contentful Paint (LCP) è uno dei principali elementi vitali web di Google. Misura il tempo in cui l'elemento più grande su una pagina Web viene visualizzato ed è visibile agli utenti.

Ci sono oltre 200 milioni di siti Web attivi a livello globale e circa il 42% di questi siti Web ha immagini come elemento di pittura di contenuto più grande su pagine diverse. Per migliorare il punteggio LCP, queste immagini devono essere ottimizzate.

Sebbene il processo di miglioramento del punteggio LCP della tua pagina web non possa essere interamente raggiunto semplicemente ottimizzando le immagini, devi comunque fare i conti con JavaScript, codici CSS e altre cose che bloccano il rendering.

Poiché la nostra discussione riguarda un formato immagine, mi concentrerei sull'ottimizzazione delle immagini per migliorare il punteggio LCP.

Gli sviluppatori riferiscono che, in media, ottengono un miglioramento dell'11% nel loro punteggio LCP semplicemente convertendo i formati immagine in AVIF, e questo è possibile solo perché i file AVIF sono di piccole dimensioni. Un'immagine di 81 KB in JPEG sarebbe 21 KB in AVIF.

Come ho detto prima, la piccola dimensione del file del formato immagine AV1 consente a un browser di renderizzarlo più velocemente e vengono trasferiti più velocemente tramite la rete. Per questo motivo, le immagini sono visibili all'utente più rapidamente e il punteggio LCP è migliorato.

3. Sono consigliati da Google

Quando si misurano le prestazioni di un sito Web, sono disponibili diversi strumenti tra cui scegliere. PageSpeed ​​Insight e Lighthouse sono strumenti realizzati da Google per aiutarti a misurare le prestazioni del tuo sito web in base ad alcune metriche delle prestazioni web.

Questi due strumenti, di Google, consigliano di utilizzare i file AVIF sui siti Web per un download più rapido e un minor consumo di dati.

Il fatto che Google consiglia di utilizzare questo formato immagine è probabilmente una ragione sufficiente per utilizzare questo formato immagine sul tuo sito web.

Puoi controllare il tuo sito web con questi strumenti di Google e scoprire cosa dice sulle immagini del tuo sito web.

Se attualmente utilizzi AVIF o WebP sul tuo sito Web, lo troverai nella sezione Audit superati del rapporto dello strumento.

Ma se non utilizzi questi formati di immagine sul tuo sito web, lo troverai nella sezione Opportunità del rapporto.

Browser che supportano AVIF

Ho brevemente accennato al fatto che l'utilizzo di file AVIF sul tuo sito Web richiede un po' di lavoro da parte tua e questo perché i formati di immagine AV1 sono supportati in alcuni browser, non in tutti.

Il grafico sopra mostra l'elenco dei browser che supportano i file AVIF e quelli che non lo supportano. I browser in verde supportano i file AVIF, mentre quelli in ROSSO non lo supportano.

Elenco dei browser che supportano AVIF:

1. Google Chrome
2. Browser Android 101
3. Mozilla Firefox
4. musica lirica
5. Browser Internet Samsung

Elenco dei browser che non supportano AVIF:

1. Browser Biadu
2. Browser KaiOS
3. Microsoft Edge
4. Microsoft Internet Explorer
5. Opera Mini
6. Browser QQ
7. Safari
8. Browser UC

Il numero di browser che supportano questo formato di immagine è cresciuto nel tempo e prevediamo che aumenterà anche con il passare del tempo. Quindi questo non è affatto un problema.

Il fatto che il browser Chrome supporti questo formato significa che circa il 70% dei tuoi utenti utilizza un browser che supporta questo formato. Ma per quanto riguarda il resto degli utenti? Non vuoi trascurarli, ed è qui che entra in gioco il lavoro.

Poiché circa il 30% dei tuoi utenti utilizza browser che non supportano i file AVIF, quando caricano la tua pagina, il file AVIF non verrà visualizzato e gli utenti non saranno in grado di visualizzarli.

Ecco un'immagine in formato immagine AV1 e se puoi visualizzarla ora, significa che stai utilizzando un browser in verde secondo il grafico che ti ho mostrato prima. Ma se non puoi, il tuo è in rosso, e questa è la stessa cosa che accadrà a un utente che utilizza i browser in rosso.

Ciò crea la necessità che tu comprenda il modo corretto di utilizzare il formato immagine AV1 su un sito Web per assicurarti che il 30% dei tuoi utenti non abbia una brutta esperienza sulla tua pagina Web cercando di capire cosa manca.

Sistemi di gestione dei contenuti che supportano AVIF

Al momento della stesura di questo articolo, non tutti i Content Management Systems (CMS) supportano il caricamento del formato immagine AV1 in locale; solo pochi CMS supportano questo e Drupal è uno di questi.

Altri CMS come WordPress, Magento, Joomla, Wix e Ghost non supportano il caricamento di file AVIF in locale, ma puoi utilizzare un CDN di immagini per risolvere questo problema e ospitare i tuoi file AVIF al di fuori del tuo server principale.

WordPress ha plug-in CDN di immagini, come ShortPixel Adaptive Image, che puoi utilizzare e Magento ha anche estensioni per questo scopo; uno di questi è ImageKit Image Management. Con questo, puoi utilizzare un file AVIF sul tuo sito Web e servire i tuoi utenti con immagini di alta qualità che si caricano più velocemente rispetto ad altri formati di immagine.

Ma anche quando hai correttamente il formato immagine AV1 sul tuo sito web, devi comunque impostare alcune cose in modo che i browser che non supportano questo formato immagine possano avere un'immagine alternativa da caricare invece del file AVIF. Quindi, lascia che ti mostri il modo giusto per utilizzare il file AVIF sul tuo sito web.

Come utilizzare il formato immagine AV1 sul tuo sito web

Quando si pubblica un'immagine su una pagina Web, viene utilizzato il tag immagine <img>, ma per il formato immagine AV1 non è possibile utilizzarlo a causa dei browser che non supportano questo formato immagine. Abbiamo solo due opzioni qui, che sono:

Utilizzo della negoziazione dei contenuti

La negoziazione dei contenuti è un meccanismo che ti consente di servire varie rappresentazioni della stessa risorsa su una pagina web. Fatto ciò, un browser dovrà scegliere tra le varie rappresentazioni, quindi trovare quella che supporta e renderla.

Quando si utilizza la negoziazione del contenuto per le immagini, viene utilizzato il tag immagine <immagine>, quindi è necessario servire diversi formati di immagine tra cui il browser può scegliere e renderizzare.

Ecco un esempio di come si fa:

<picture>
<source srcset=”images/frog.AVIF” type=”image/AVIF”>
<source type="image/webp">
<img src=" images/frog.jpg" alt="frog">
</picture>

Qui, in questo caso, ho un formato immagine AV1 servito, ma includo anche i formati WebP e JPEG, e questi sono chiamati immagini di fallback.

Ecco come funziona. Quando un browser vede questo codice e deve eseguire il rendering dell'immagine, verifica il formato immagine che supporta meglio. Se il browser supporta il file AVIF, verrà visualizzato immediatamente.

Ma nel caso degli altri browser che non supportano i file AVIF, il browser salta il formato immagine AV1 e passa ai formati immagine di riserva, WebP e JPEG. Il browser esegue il rendering di uno di questi formati, che supporta, e gli utenti possono vedere l'immagine in un altro formato diverso da AVIF.

Anche se questo sembra molto lavoro da fare, ne vale la pena a causa del vantaggio che ottieni dall'utilizzo di file AVIF sul tuo sito web.

Ma questo non è l'unico modo per risolvere il problema dell'utilizzo dei file AVIF. C'è un altro modo per utilizzare il formato immagine AV1 sul tuo sito web, che è molto più semplice di questo.

Utilizzo di CDN di immagini

L'uso di CDN di immagini per servire il formato immagine AV1 è molto più semplice della gestione del codice da soli. Sebbene le reti di distribuzione dei contenuti (CDN) funzionino anche con il meccanismo di negoziazione dei contenuti, l'unica differenza è che non sei tu a servire i vari formati di immagine; la CDN fa tutto automaticamente.

La CDN dell'immagine collega la tua immagine a un URL e quindi fornisce automaticamente il formato immagine supportato a qualsiasi browser utilizzato dai tuoi utenti.

Un esempio di un'immagine CDN che fa questo è Imgix. Utilizza il parametro auto=format, che viene aggiunto all'URL dell'immagine, per gestire automaticamente la negoziazione del contenuto. Anche il plug-in CDN di immagini di WordPress e l'estensione Magento menzionati in precedenza possono aiutare in questo, ma puoi utilizzare qualsiasi CDN di immagini di tua scelta.

A parte il fatto che l'utilizzo di CDN di immagini ti consente di utilizzare il formato immagine AV1 sul tuo sito Web, secondo Katie Hempenius di Google, "il passaggio a un CDN di immagini può produrre un risparmio del 40-80% nella dimensione del file di immagine".

E questo rende la tua pagina web più leggera rispetto a quando devi pubblicare l'immagine direttamente sul tuo sito web, offrendoti un tempo di caricamento più rapido.

Si dice che il formato immagine AV1 sia la prossima grande novità nella condivisione di immagini per i contenuti Web e ha il potenziale per sostituire completamente l'altro formato immagine, e questo potrebbe accadere presto. Quindi l'utilizzo di questo formato immagine sta rapidamente diventando la cosa giusta da fare e le CDN dell'immagine lo rendono ancora più semplice.

Ora che hai chiaro che dovresti usare il formato immagine AV1 sul tuo sito Web e come farlo, prendiamoci un minuto e scopriamo come creare un file AVIF.

Come creare il tuo file AVIF

Quando si tratta di creare file AVIF, puoi farlo in due modi:

Con un editor di immagini

Poiché il formato immagine AVIF è disponibile da tre anni, solo pochi editor di immagini consentono di esportare l'immagine nel formato immagine AV1. Ne abbiamo solo due, che sono:

• GIMP per Windows e Linux
• Microsoft Paint

Adobe Photoshop non supporta ancora i file AVIF, ma è probabile che lo supporteranno non appena i membri della loro comunità inizieranno a richiederlo. Ma per ora, puoi lavorare con questi due editor di immagini per ottenere la tua immagine AVIF.

[Ebook] Automatizzare la SEO con Oncrawl

Scopri come risolvere i problemi SEO più facilmente automatizzando gli avvisi al termine delle scansioni.

Leggi l'ebook

Con uno strumento di compressione delle immagini

Dal momento che non hai molti editor di immagini che ti consentono di lavorare con i file AVIF, puoi salvare la tua immagine in qualsiasi altro formato e utilizzare uno strumento di compressione delle immagini per convertirla.

In VitalFrog, utilizziamo Squoosh per raggiungere questo obiettivo e consiglierei questo strumento anche ad altri che desiderano convertire la propria immagine. Lavoriamo con Squoosh per due ragioni principali:

Controllo:

Quando usi Squoosh, hai il controllo totale del processo di compressione dell'immagine. Puoi decidere di regolare la qualità dell'output che desideri ottenere, lo sforzo e anche ridimensionare l'immagine.

Con questo, puoi regolare la dimensione del file dell'output. Ad esempio, se riduci la qualità da 22 a circa 15, ci sarà un calo delle dimensioni, ma non ti consiglierei di farlo perché la qualità dell'immagine sarà scarsa.

Visualizzazione in tempo reale:

Con squoosh, puoi accedere a una visualizzazione in tempo reale dell'immagine mentre la comprimi.

Puoi vedere di persona come sarà l'output e quanto è diverso dal file originale anche prima di scaricarlo.

Esistono altri strumenti che possono aiutarti a convertire la tua immagine da diversi formati al formato immagine AV1, ma scegliamo di utilizzare Squoosh. Questi altri strumenti includono:

• Converti
• Un convertito
• Pixellato
• Ezgif

Qualunque strumento tu scelga di utilizzare per convertire la tua immagine va bene; dopotutto, alla fine abbiamo la nostra immagine nel formato desiderato.

Conclusione

La domanda sull'utilizzo o meno di AVIF sul tuo sito Web è stata risolta e ora sai cosa guadagnerai dall'usarlo.

Sebbene il processo di impostazione del meccanismo di negoziazione dei contenuti possa sembrare molto faticoso, specialmente quando si tratta di molte immagini sul tuo sito Web, Jake Archibald ha affermato nella sua conclusione che vale la pena utilizzare i file AVIF. E hai anche CDN che lo rendono più semplice, gestendolo automaticamente.

Quindi qui hai tutto da me; Il formato immagine AV1 è qui per massimizzare le prestazioni del sito Web di individui e aziende attraverso una migliore compressione dei file. E questo è il motivo per cui Allliance for Open Media (AOMedia) lo ha sviluppato.

Usa i formati immagine AV1 e osserva il miglioramento delle prestazioni del tuo sito web nel tempo.

Dal mio team ed io di VitalFrog, ti auguriamo buona fortuna!