Come usare le immagini AVIF sul tuo sito web

I passaggi essenziali

1. Scegli un’immagine già utilizzata su una pagina e conserva l’originale.
2. Crea una versione AVIF e controllane la qualità.
3. Aggiungi l’AVIF al sito con un metodo supportato dal tuo sistema di pubblicazione.
4. Controlla la pagina pubblicata su un telefono e un computer.
5. Consulta le richieste di rete del browser per verificare quale file immagine viene caricato.

Le sezioni seguenti spiegano cosa controllare in ciascun passaggio.

Verifica come il tuo sito gestisce AVIF

Un sistema di pubblicazione può accettare un file AVIF nella libreria multimediale, ma elaborarlo diversamente da JPG o PNG. Verifica sia l’aggiunta del file sia il suo utilizzo su una pagina pubblicata.

Fai una prova con un’immagine:

• La libreria multimediale accetta il file?
• L’immagine compare nell’editor della pagina?
• Si vede sulla pagina pubblicata?
• Vengono generate le versioni più piccole necessarie, se il sistema normalmente le crea?

Un servizio di ottimizzazione delle immagini o una CDN potrebbe già fornire le immagini in AVIF. Controlla il funzionamento attuale prima di sostituire i file manualmente. Un JPG nella libreria non basta a stabilire quale formato ricevano i visitatori.

Prepara un’immagine per la prova

Scegli un’immagine rappresentativa del sito. Una foto di prodotto, un’immagine di apertura di un articolo o una grafica trasparente è più utile di un’immagine di prova estranea ai tuoi contenuti.

Usa il convertitore adatto al formato di partenza:

• JPG → AVIF
• PNG → AVIF
• WebP → AVIF

I convertitori AVIF di Pixilo mantengono le dimensioni originali in pixel e usano un’impostazione fissa di compressione con perdita. Producono una singola immagine statica. Non conservano l’animazione, le informazioni HDR originali né i metadati.

Confronta l’AVIF scaricato con l’originale. Controlla soprattutto la leggibilità del testo, i bordi sottili, le sfumature e le aree trasparenti. Verifica anche il peso: la conversione non rende sempre il file più piccolo.

Se la qualità non è sufficiente o il file diventa più grande, mantieni la versione attuale. Cambiare formato non è un obiettivo in sé.

Aggiungi AVIF tramite il sistema di pubblicazione

Se usi un costruttore di pagine o un sistema di gestione dei contenuti, aggiungi l’AVIF alla libreria multimediale e selezionalo come nuova immagine nell’elemento interessato.

Durante la prova, lascia invariati la dimensione di visualizzazione e il ritaglio. Potrai valutare il cambio di formato senza modificare contemporaneamente l’impaginazione.

Quando sostituisci l’immagine, controlla:

• il testo alternativo
• le proporzioni e il ritaglio
• l’eventuale didascalia e collegamento
• l’impaginazione su computer e dispositivi mobili.

Cambiare l’estensione nell’URL non converte l’immagine. Pubblica un vero file AVIF o usa un servizio che esegua la conversione.

Offri un formato alternativo quando serve

Se modifichi il codice HTML, puoi usare un elemento picture per proporre AVIF come prima scelta e JPG come alternativa.

Nell’esempio, entrambi i file mostrano la stessa immagine di 1200 × 800 pixel. Adatta i percorsi, le dimensioni e il testo alternativo alla tua immagine.

<picture>
  <source srcset="/images/product.avif" type="image/avif">
  <img
    src="/images/product.jpg"
    width="1200"
    height="800"
    alt="Zaino blu visto di fronte">
</picture>

Un browser che supporta AVIF può scegliere la versione AVIF. Se non supporta il formato dichiarato, in questo esempio usa il JPG. Per un’immagine trasparente, scegli un’alternativa che conservi la trasparenza, come PNG. Consulta la documentazione MDN sull’elemento picture.

Questa alternativa gestisce la compatibilità del formato. Non corregge automaticamente un URL AVIF errato o un file danneggiato.

Se il tuo sistema gestisce automaticamente i formati alternativi, usa la sua funzione integrata.

Verifica quale immagine carica il browser

Il fatto che l’immagine sia visibile non dimostra che venga usato AVIF. Il browser potrebbe caricare la vecchia immagine, una variante più piccola o un file prodotto da un servizio di ottimizzazione.

In Chrome puoi verificarlo con gli strumenti per sviluppatori:

1. Apri la pagina pubblicata e gli strumenti per sviluppatori.
2. Seleziona la scheda Network e il filtro Img.
3. Attiva Disable cache e ricarica la pagina lasciando aperti gli strumenti.
4. Apri la richiesta relativa all’immagine da controllare.
5. Controlla l’URL e il Content-Type della risposta. Per AVIF è image/avif.

L’estensione non è l’unico indizio: un servizio di ottimizzazione può fornire AVIF da un URL che termina con .jpg. Il pannello Network permette anche di verificare il peso del file trasferito. Consulta la guida di Chrome all’analisi delle richieste di rete.

Se la pagina usa un’immagine diversa sui dispositivi mobili o più dimensioni, controlla anche le relative richieste.

Controlla la pagina pubblicata prima di sostituire altre immagini

Esamina l’immagine nel punto in cui viene realmente usata. L’anteprima della libreria non mostra il ritaglio su mobile, l’effetto dello sfondo della pagina o se viene caricata la versione corretta.

Verifica che:

• l’immagine sia interamente visibile o che il ritaglio sia voluto
• il testo e i dettagli importanti restino sufficientemente nitidi
• le aree trasparenti si vedano correttamente sullo sfondo della pagina
• lo spazio riservato all’immagine e l’impaginazione restino corretti
• il browser carichi il file previsto.

Per confrontare il caricamento prima e dopo, usa la stessa pagina, la stessa dimensione della finestra e le stesse impostazioni di test. Un singolo caricamento più rapido non dimostra un miglioramento costante. La riduzione del peso è più facile da verificare quando le immagini hanno le stesse dimensioni e una qualità accettabile.

Se l’immagine AVIF non compare

Controlla prima se l’URL diretto dell’immagine si apre nel browser. Se non funziona, verifica la posizione del file e gli eventuali errori segnalati dal sistema di pubblicazione.

Se l’immagine diretta funziona ma la pagina mostra la vecchia versione, controlla l’URL dell’elemento immagine, le altre dimensioni e la cache del sito. Ignorare la cache del browser non svuota quella del sistema di pubblicazione né della CDN.

Se la causa rimane incerta, ripristina l’originale funzionante in quell’elemento e verifica il supporto di AVIF prima di riprovare.

Domande frequenti

Bisogna sostituire tutte le immagini del sito con AVIF?

No. Sostituisci quelle che offrono una riduzione utile del peso e funzionano nel tuo sistema di pubblicazione con una qualità accettabile.

Basta aggiungere l’AVIF alla libreria multimediale?

No. Devi anche selezionarlo per usarlo sulla pagina. Controlla le richieste di rete della pagina pubblicata per vedere quale file viene caricato.

AVIF richiede sempre un’immagine alternativa?

Dipende dai browser dei visitatori e dal modo in cui pubblichi le immagini. Un altro formato è utile per gli ambienti in cui AVIF non funziona.

Perché il nuovo AVIF non riduce il file caricato dalla pagina?

La pagina potrebbe usare ancora la vecchia immagine o un’altra versione generata dal sistema. Anche l’AVIF stesso potrebbe essere più grande. Controlla la richiesta effettiva e confronta file con le stesse dimensioni in pixel.

Riassumi conChatGPT (si apre in una nuova scheda)Grok (si apre in una nuova scheda)Google (si apre in una nuova scheda)Perplexity (si apre in una nuova scheda)Claude (si apre in una nuova scheda)