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: 
Dettagli sul Tag
: Specifica l’immagine di riserva che verrà utilizzata se il browser non supporta i formati forniti.
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.
Collaborare tra agenzie Web e Digital
Quando un’agenzia specializzata nel web design unisce le forze con un’agenzia esperta in marketing digitale, si creano sinergie che vanno ben oltre la semplice somma delle singole competenze.
Uno dei principali vantaggi di collaborare con altre agenzie, come NetStrategy, è l’accesso a un pool più ampio di competenze specialistiche. Ad esempio, una campagna di marketing digitale può richiedere competenze avanzate in SEO, content marketing, gestione dei social media e analisi dei dati. Raramente una singola agenzia dispone di tutte queste competenze ai massimi livelli. Collaborando con partner che eccellono in ciascuna di queste aree, possiamo garantire che ogni aspetto della campagna sia curato nei minimi dettagli, massimizzando i risultati per i nostri clienti.
Collaborare con altre agenzie ci permette di rimanere sempre aggiornati sulle ultime tendenze e tecnologie. Questo è particolarmente rilevante quando si tratta di implementare nuovi formati di file come le immagini AVIF. Le immagini AVIF offrono una compressione superiore e una qualità visiva eccellente, rendendole ideali per migliorare le prestazioni dei siti web. Grazie alla collaborazione con agenzie specializzate in tecnologie web avanzate, possiamo integrare queste innovazioni nei nostri progetti, offrendo ai clienti siti web più veloci e performanti.
Se sei interessato a scoprire ulteriori vantaggi delle collaborazioni tra web agency e come queste possono trasformare il tuo approccio al digital marketing, non perdere il nostro approfondimento su L’importanza delle collaborazioni tra web agency.
Il tuo sito WEB aziendale a Brescia è lento?
Metti alla prova il nostro valore!
Contattaci per ottenere supporto personalizzato nella conversione delle tue immagini, garantendo la migliore qualità e performance.
Oppure contattaci direttamente al 030 7993752, o inviaci un mail a info@zagcomunicazione.it
Migliora la SEO e velocizza il tuo sito web con immagini ottimizzate!
