AV1 Image File Format (AVIF) è una specifica del formato di file di immagine per memorizzare immagini o sequenze di immagini compresse con AV1 nel formato di file HEIF. È in concorrenza con HEIC che utilizza lo stesso formato contenitore, basato su ISOBMFF, ma HEVC per la compressione.
Le immagini AVIF consentono di mantenere, in pochissimi KB, una buona qualità di immagine rendendo così il tuo sito web più leggero e di conseguenza più veloce.
Differenza tra immagini AVIF e WebP
Le immagini AVIF, a differenza delle immagini WebP, supportano una risoluzione da 10 a 12 bit di colori in High Quality contro gli 8 bit di WebP le quali risultano decisamente più sfocate agli occhi degli utenti. Questo formato di nuovissima generazione utilizza un algoritmo di compressione molto efficiente ed è consigliato per animazioni, video ed immagini con sfondo trasparente. Rispetto a WebP, che oggi compie 10 anni, riesce a comprimere le immagini con risultati qualitativamente migliori riuscendo a tenere il peso dell’immagine quasi sempre più basso.
Che cosa è AVIF
AVIF è un nuovo formato di immagini molto performante che estende la sua duttilità anche ad altri formati come, per esempio, GIF in alta risoluzione, av1 video, avif images in quanto supporta dai 10 ai 12 bit di colori in alta definizione e anche l’high dynamic range hdr.
Attualmente AVIF, nonostante la giovane età, è stato scelto da aziende molto importanti che fanno dell’immagine e dei video, la loro punta di diamante per la comunicazione, una su tutte Netflix.
Ad oggi, Aprile 2023, con questo articolo ci stiamo proiettando verso il futuro prossimo in quanto, stando ai dati che ci fornisce Can I Use, sarebbero solamente circa l’84% degli utenti a poter utilizzare questo formato. Manca ancora un buon 26% che si sta piano piano allineando alla nuova tecnologia.
Come utilizzare AVIF
Tutto quello che serve per implementare all’interno del nostro sito per utilizzare immagini AVIF è sostituire il tag image con il tag picture definendo al loro interno in che modo devono essere visualizzate, ovvero in che formato andranno visualizzate sul web.
usa il tag code: 
utilizza il tag picture:
L’attributo type è importantissimo in quanto fornisce al browser di riferimento le informazioni necessarie per la corretta scelta dell’immagine.
Fornire più formati di immagini ci darà l’opportunità di avere una maggiore compatibilità con i vari browser, sapendo che quasi l’85% di questi già lo supportano e che andremo ad alleggerire in maniera sostanziale il peso delle nostre immagini rispetto ad esempio ad un formato png.
Nonostante questo andremo ad inserire, per quelli che hanno versioni obsolete dei propri browser, anche l’immagine in formato PNG ricordandoci di comprimerla sempre e comunque.
Perchè utilizzare AVIF
Semplicemente comprimendo la nostra immagine utilizzando il formato AVIF andremo a risparmiare moltissimi kb che daranno beneficio al nostro sito web online in quanto lo renderanno più reattivo e ci faranno guadagnare punteggi molto importanti come First Contentful Paint e Time to Interactive.
In parole spicce andremo a migliorare l’esperienza percepita dall’utente durante la navigazione nel nostro sito web e questo non farà altro che migliorare i Core Web Vitals che sono fattori importantissimi per l’indicizzazione del nostro sito web.
Utilizzare le immagini AVIF su WordPress
WordPress, così come moltissimi altri CMS, non prevede l’inserimento di immagini AVIF di default ma, se tu volessi trovare un modo per poterle caricare aumentando notevolmente il risparmio di kb all’interno del tuo sito, puoi avvalerti dell’aiuto di un plugin gratuito: stiamo parlando di Optimole.
Optimole è un plugin che, al suo interno, ha molte funzionalità per l’ottimizzazione delle immagini ma devi fare molta attenzione in quanto, se tu avessi già caricato nel tuo sito WordPress un altro plugin con le stesse funzionalità, questi potrebbero andare in conflitto e di conseguenza fare rallentare il tuo sito web.
Come si utilizza Optimole per le immagini AVIF su WordPress
Il plugin Optimole è gratuito e può essere installato tranquillamente dalla Bacheca di WordPress andando nella sezione nuovo plugin.
Una volta trovato Optimole non dovrai fare altro che installare ed attivare Image optimization & Lazy Load by Optimole.
A questo punto dovrai creare un account sulla piattaforma Optimole inserendo il tuo indirizzo e-mail e subito dopo il plugin inizierà un’ottimizzazione automatica delle immagini già presenti nella tua libreria fotografica.
Entrando all’interno del plugin attraverso la tab Settings puoi trovare inoltre le impostazioni di ottimizzazione.
All’interno della voce Generale potrai attivare o disattivare a tuo piacimento:
- la sostituzione delle URL delle tue immagini con la nuova URL ottimizzata
- il ridimensionamento e il lazy loading
- lo strumento per identificare eventuali errori
All’interno invece della sezione Advanced puoi trovare ulteriori opzioni quali:
- Compressione (dovrai avere la voce Enabel avif conversion attiva)
- Resize, per avviare il ridimensionamento automatico
- Lazyload
- Exclusion per escludere alcune immagini dall’ottimizzazione
Esiste, nel caso ne avessi bisogno, anche l’opzione Cloud Integration dalla quale è possibile impostare il salvataggio delle immagini nel Cloud di Optimole per liberare spazio nel tuo hosting.
Terminato questo percorso di configurazione le immagini AVIF saranno automaticamente mostrate agli utenti che visitano il tuo sito web con un browser che le supporta, mentre tutti gli altri vedranno le immagini nel formato predefinito, ma comunque ottimizzate.
Mantenere il proprio sito web al passo coi tempi è una cosa importantissima e, molto spesso, anticipare i tempi, potrebbe essere l’inizio di un successo sui tuoi competitor.
Hai bisogno di un Digital Marketing a Brescia?
Mettici alla prova!
Vuoi potenziare la tua presenza online a Brescia e oltre? Compila il modulo qui sotto per richiedere una consulenza personalizzata in Digital Marketing. Scopri come possiamo aiutarti a raggiungere i tuoi obiettivi di business attraverso strategie digitali mirate.
Oppure contattaci direttamente al 030 7993752, o inviaci un mail a info@zagcomunicazione.it
Non perdere l’opportunità di distinguerti nel mercato online, contattaci oggi stesso e scopri cosa possiamo fare per te!
