Categorie

Ottimizzazione della velocità della pagina: Ottenere immagini più veloci nel caricamento parte 2 - AVIF

La velocità della pagina è una componente cruciale per un sito web. Puoi aumentare la velocità del tuo sito facendo una serie di modifiche di ottimizzazione della velocità della pagina. Una di queste è l'ottimizzazione delle immagini.

Nella parte 1 del nostro Ottimizzazione della velocità della pagina: Ottenere immagini più veloci nel caricamento In questo articolo, abbiamo parlato di WebP, cos'è e come implementarlo nel tuo sito. Un altro formato immagine next-gen che sta guadagnando popolarità grazie alle sue capacità di compressione, senza sacrificare la qualità dell'immagine è AVIF.

AVIF è un formato di immagine open sourced e royalty-free basato sul codec video AV1 sviluppato dall'Alliance for Open Media (AOMedia) in collaborazione con Google, Cisco e Xiph.org.

Con AVIF, le immagini vengono compresse e rese più piccole, pur mantenendo la stessa qualità dell'immagine originale. AVIF offre la migliore compressione sul mercato, pur mantenendo alta la qualità delle immagini. Supporta qualsiasi codec d'immagine e riduce significativamente le dimensioni del file rispetto a JPEG, PNG e persino WebP.

Rispetto a JPEG, AVIF è di 50% in meno, e rispetto a WebP, è di 20-30% in meno, senza perdita di qualità.

AVIF è stato sviluppato da molte aziende come Google, Amazon, Cisco e Netflix, tra le altre. Queste aziende stanno sviluppando il formato a causa del loro bisogno di immagini di alta qualità che non consumano troppa larghezza di banda. Netflix ha persino affermato che AVIF è di gran lunga superiore a JPEG, PNG e WebP, e attualmente lo serve per le sue miniature di immagini.

loghi moomba

Il formato immagine AVIF supporta le seguenti caratteristiche, rendendole potenzialmente migliori rispetto ad altri formati immagine:

  • 8, 10, 12 bit di profondità di colore
  • Compressione lossless e compressione lossy
  • Monocromatico (alfa/profondità) o multi componenti
  • Include un canale alfa che fornisce un tocco più ricco alle immagini
  • 4:2:0, 4:2:2, 4:4:4 sottocampionamento del croma
  • Qualsiasi spazio colore incluso: ampia gamma di colori, profili ISO/IEC CICP e ICC
  • Alta gamma dinamica, che fornisce immagini migliori e più luminose
  • Grana del film
  • Massima compressione in formato royalty-free

Anche se il formato immagine AVIF ha molti vantaggi, lo svantaggio principale che ha è la sua disponibilità e il supporto del browser.

Al momento della scrittura (novembre 2021), AVIF è supportato da Firefox, Chrome, Android e Opera. Al momento, Microsoft Edge e Safari non supportano il formato immagine. Tuttavia, se sei un utente Microsoft, c'è un add-on disponibile che puoi scaricare che fornisce il supporto per esso. Inoltre, Firefox non supporta ancora gli AVIF animati.

webp e avif

WebP contro AVIF

WebP e AVIF sono entrambi formati di immagine di nuova generazione che sono entrambi raccomandati da Google nel loro strumento PageSpeed Insights. WebP è molto più vecchio rispetto ad AVIF ed è stato sviluppato da Google stesso. È anche molto usato e supportato da più browser web rispetto ad AVIF.

AVIF, tuttavia, è molto più piccolo e rende più velocemente rispetto a WebP. Infatti, è circa 20-30% in meno rispetto a WebP. L'unico aspetto negativo di AVIF è che non è ampiamente supportato in questo momento, rispetto a WebP.

Le prospettive per AVIF sono però luminose, dato che il supporto per Edge e Safari può arrivare più velocemente, dato che è visto come un formato immagine molto promettente.

A parte questi fattori principali da considerare, ecco altre differenze tra AVIF e WebP da considerare:

  • WebP lavora solo su una profondità di 8 bit, mentre AVIF supporta 8, 10 e 12 bit, che accetta una gamma più ampia di immagini per la compressione
  • WebP supporta solo il canale 4:2:0, mentre AVIF supporta 4:2:0, 4:2:2 e 4:4:4
  • AVIF produce una qualità d'immagine migliore rispetto a WebP
  • AVIF supporta l'HDR, che produce immagini ad alta luminosità.

Sia WebP che AVIF hanno vantaggi e svantaggi sull'altro. Quando si tratta di scegliere tra i due, dipende principalmente dalla vostra preferenza, dal tipo di sito che avete e da quale vi fornirebbe il maggior beneficio.

Come implementare AVIF sul tuo sito

implementazione avif

Ci sono un paio di programmi e app che potresti usare per convertire le tue immagini in AVIF. Uno che è raccomandato è Squoosh, che è una Web App di compressione delle immagini che è stata sviluppata dallo stesso team di Google Chrome Labs. Altri programmi da usare sono GIMP e Microsoft Paint. Sfortunatamente, Photoshop non lo supporta per il momento.

Poiché AVIF è ancora una tecnologia piuttosto nuova e non è ancora pienamente supportata in tutti i browser, quando si tratta di implementazione, ci sono due modi principali per servire il formato - attraverso l'elemento immagine e attraverso la negoziazione del contenuto.

Questo è usato in modo che se il browser usato non supporta AVIF, visualizzerà invece un altro tipo di immagine.

Ecco un esempio di codice che si potrebbe aggiungere al <body> nella tua pagina.

<picture>
<source srcset=”images/example.avif” type=”image/avif”>
<source srcset=”images/example.webp” type=”image/webp”>
<img src=”images/example.jpg” alt=&quot;descrizione of example image”>

</picture>

La negoziazione dei contenuti permette al server di servire formati basati su ciò che è supportato dal browser. I browser che supportano un formato specifico possono annunciarlo aggiungendo il formato al loro Accept Request Header. Per esempio, l'Accept Request Header per le immagini in Chrome è:


Accetta: image/avif,image/webp,image/apng,image/*,*/*;q=0.8

Il codice per controllare se AVIF è supportato nel gestore dell'evento fetch può assomigliare a questo:


const hdrAccept = event.request.headers.get("accept");
const sendAVIF = /image\/avif/.test(hdrAccept);


Puoi usare questo valore per servire AVIF o qualsiasi altro formato predefinito.

Un'altra opzione è usare un CDN che supporti AVIF. Se ospiti le tue immagini su Cloudflare, questo non dovrebbe essere un problema perché hanno aggiunto il supporto per questo.

Se il tuo sito è in WordPress, ci sono dei plugin che potresti usare che potrebbero aiutarti a servire le immagini AVIF ai browser che lo supportano e per quelli che non lo supportano, userebbero invece altri formati di immagine.

Esempi di questi plugin includono Shortpixel, Imagekit, Cloudinary, ImageEngine, tra gli altri.

Conclusione

Sempre più formati di immagini di nuova generazione stanno nascendo man mano che le aziende cercano di migliorare le prestazioni del web e migliorano i formati di immagini precedenti e le loro limitazioni.

Sia WebP che AVIF sono formati next gen che sono raccomandati da Google per aiutare a velocizzare il tuo sito e migliorare l'esperienza dell'utente.

Alla fine della giornata, entrambi hanno vantaggi e svantaggi, e starebbe a te, come proprietario di un sito e imprenditore, decidere quale sia il tuo formato preferito per servire meglio il tuo sito e i tuoi visitatori/clienti.

Quando si tratta di velocizzare un sito pur fornendo immagini di qualità, entrambi i formati sono ottime opzioni, rispetto ai formati più comuni come JPEG e PNG. Abbiamo testato entrambi JPEG vs PNG per vedere se c'è un formato preferito e abbiamo scoperto che non ce n'è uno, e che si riduce davvero alla velocità della pagina. Controlla il nostro test su questo per maggiori dettagli.

Se il vostro obiettivo è quello di velocizzare il vostro sito, al fine di guadagnare rank, la compressione delle immagini è solo un fattore su cui lavorare e andare per WebP o AVIF è solo un passo verso questo. Speriamo che attraverso questi due articoli, tu ora abbia un'idea migliore di quale formato di immagine di nuova generazione scegliere.

Per ulteriori informazioni e consigli su come ottimizzare le tue immagini, controlla il nostro Ottimizzazione delle immagini articolo.

Marie Aquino

SIA STAFF SEO WRITER

Marie's biografia completa qui.