AVIF e WebP: come scegliere il formato immagine giusto
AVIF, WebP o i vecchi JPEG e PNG: quale formato conviene a quale immagine e come la conversione automatica velocizza davvero un sito web.
Team rabbitclipPubblicato: 5 min di lettura
In breve
AVIF è adatto alle immagini a base fotografica, WebP a tutto ciò che richiede un ampio supporto dei browser con trasparenza, e JPEG o PNG restano come riserva per i browser più vecchi che non leggono nessuno dei due. Servire tutti e tre insieme si fa con l'elemento picture o con la conversione automatica lato server; chi visita il sito non fa nulla in più, il suo browser riceve semplicemente il file più piccolo che sa leggere.
Quando la pagina galleria di una catena di spa si carica come una serie di JPEG ad alta risoluzione, la comparsa può richiedere diversi secondi. Servendo le stesse immagini come AVIF o WebP, il peso del file scende in modo evidente; secondo le misurazioni di web.dev, le immagini WebP senza perdita risultano circa il 26% più leggere di un PNG, mentre il WebP con perdita è più leggero del 25-35% rispetto a un JPEG equivalente.
Cosa sono AVIF e WebP, e come si differenziano dal JPEG?
AVIF è un formato immagine open source costruito sul codec video AV1; produce un file molto più leggero a parità di qualità visiva rispetto al JPEG. WebP, sviluppato da Google, supporta sia la compressione con perdita sia senza perdita oltre alla trasparenza; il suo supporto nei browser è più ampio di quello di AVIF.
Entrambi sono pensati per sostituire i vecchi formati JPEG e PNG, ma non sono intercambiabili. AVIF comprime di più ma impiega più tempo a codificare; WebP codifica più velocemente e funziona su più browser. La maggior parte dei siti serve entrambi, in ordine di priorità.
Quale formato conviene a quale immagine?
Il formato giusto dipende da cosa è realmente l'immagine: una fotografia, un logo, un'icona e un'animazione danno un risultato migliore ciascuno in un formato diverso.
- foto e immagini di prodotto: AVIF come priorità, WebP come riserva
- loghi e icone trasparenti: WebP, perché supporta la trasparenza sia con perdita sia senza perdita
- disegni semplici e grafica a colori piatti: SVG, senza bisogno di alcun formato raster
- brevi animazioni: un WebP animato al posto di una GIF
Come impostare la conversione automatica
La strada più semplice è l'elemento picture; al browser vengono proposti in ordine AVIF, poi WebP, poi JPEG, e sceglie il primo che sa leggere. La configurazione può avvenire a uno di tre livelli.
- su un sito Next.js il componente Image integrato genera automaticamente il formato giusto per ogni richiesta, senza configurazione aggiuntiva
- su WordPress o un sito statico, strumenti come sharp o squoosh-cli generano copie AVIF e WebP durante il build
- a livello di CDN, un servizio immagini sceglie da solo il formato con un'opzione come format=auto, in base a ciò che supporta il browser che fa la richiesta
- in tutti e tre i percorsi il JPEG o PNG originale resta come riserva, così nessun browser rimane mai senza immagine
Perché serve ancora una riserva?
AVIF e WebP funzionano sulla grande maggioranza dei browser attuali, ma versioni più vecchie usate su reti aziendali, alcuni client di posta o anteprime dentro un'app potrebbero non riconoscere nessuno dei due formati. Un'immagine AVIF pubblicata senza riserva semplicemente non appare su questi client; diventa un'icona rotta.
La guida ai formati immagine di MDN raccomanda proprio per questo una riserva accanto a ogni nuovo formato; l'elemento picture o la negoziazione dei contenuti lato server rende questa riserva automatica, senza dover caricare ogni immagine due volte a mano.
Consegna automatica del formato a livello di CDN e hosting
Lasciare la conversione al CDN invece che al processo di build ha il vantaggio che l'immagine sorgente resta intatta mentre il formato servito si adatta da solo al browser. I servizi di ottimizzazione immagini di Cloudflare fanno questo con un'opzione come format=auto; un browser che supporta AVIF riceve AVIF, uno che non lo supporta riceve WebP al suo posto.
Il punto da tenere d'occhio è quale servizio sia realmente in uso; Cloudflare ha ritirato il vecchio servizio Polish per le nuove zone durante il 2026, indirizzando le nuove configurazioni verso Image Resizing e Cloudflare Images. Il servizio dietro un sito decide direttamente se AVIF sia anche solo disponibile.
Errori frequenti
Impostare una conversione una volta non chiude il discorso; tre errori si presentano ancora regolarmente.
- pubblicare AVIF senza riserva, perdendo l'immagine del tutto sui client più vecchi
- lasciare la compressione all'impostazione più aggressiva senza controllare la qualità a occhio
- caricare un'immagine sorgente molto più grande della sua reale dimensione di visualizzazione, il che gonfia il file qualunque sia il formato
- convertire il formato senza mai impostare larghezza e altezza nell'HTML, il che causa uno spostamento del layout durante il caricamento della pagina
Scegliere tra AVIF e WebP non è di per sé un trucco di velocità; il formato giusto paga solo insieme alla dimensione corretta e a una riserva. Una prima chiamata con rabbitclip è un buon modo per misurare quanto peso delle immagini stia davvero rallentando il vostro sito.
Domande frequenti
AVIF è sempre migliore di WebP?
Per la dimensione del file di solito sì, ma richiede più tempo per la codifica e funziona su meno browser. La maggior parte dei siti serve entrambi, con AVIF come priorità.
PNG e JPEG vanno abbandonati del tutto?
No, devono restare come riserva. Browser e client più vecchi ne hanno ancora bisogno.
Cambiare il formato immagine influisce sul SEO?
Non direttamente, ma pagine più veloci migliorano i punteggi Core Web Vitals e, indirettamente, i segnali di esperienza utente.
Quando conviene usare SVG al posto degli altri formati?
Per loghi, icone e disegni a colori piatti; essendo vettoriale e non raster, resta nitido a qualsiasi dimensione ed è di solito anche più leggero.
