Formati immagine moderni: WebP e AVIF, come implementarli oggi

JPEG ha oltre trent'anni. Nel frattempo sono nati formati che comprimono molto meglio, a parità di qualità visiva percepita, e oggi il supporto dei browser non è più un ostacolo serio. I formati storici (JPEG, PNG, GIF) hanno prestazioni inferiori rispetto ai nuovi, e restano diffusi solo per compatibilità storica.

1. WebP: il sostituto quasi universale

Sviluppato da Google, WebP offre compressione lossy in media dal 25 al 35% migliore di JPEG a parità di compressione visivamente simile, con supporto per canale alpha (trasparenza) e animazioni, coprendo in un solo formato ciò che prima richiedeva JPEG, PNG e GIF separati.

<img src="foto.webp" alt="Descrizione dell'immagine">

Il supporto è oggi praticamente universale su tutti i browser principali; l'unica eccezione storica erano le versioni di Safari precedenti alla 16 su macOS Big Sur o precedente, ormai una quota di mercato trascurabile.

Fonte: MDN Web Docs, «Image file type and format guide»: le immagini WebP lossy sono in media dal 25 al 35% più piccole di JPEG a parità di compressione visivamente simile.

2. AVIF: compressione ancora superiore, con un limite da conoscere

Basato sul codec video AV1, AVIF spinge la compressione oltre: MDN riporta una compressione mediana del 50% rispetto a JPEG sullo stesso set di immagini, contro il 30% circa di WebP, con supporto per HDR e una gamma di colori più ampia.

<img src="foto.avif" alt="Descrizione dell'immagine">

Il limite tecnico da conoscere: AVIF non supporta il rendering progressivo, quindi il file deve essere scaricato per intero prima di poter essere mostrato, a differenza di un JPEG che può apparire sfocato e poi affinarsi mentre scarica. Per file di grandi dimensioni questo limite può pesare, ma nella pratica i file AVIF sono già così più piccoli che il download completo è spesso comunque più veloce.

Fonte: MDN Web Docs, «Image file type and format guide»: AVIF ottiene generalmente una compressione migliore di WebP (mediana del 50% contro il 30% rispetto a JPEG sullo stesso set); AVIF non supporta il rendering progressivo, per cui il file deve essere scaricato per intero prima di essere mostrato.

3. Come implementarli: <picture> con fallback, non sostituzione secca

La scelta più sicura, già vista nella pillola su <picture>, non è sostituire JPEG con AVIF ovunque, ma offrire entrambi, lasciando che il browser scelga il migliore tra quelli che sa decodificare.

<picture>
  <source srcset="foto.avif" type="image/avif">
  <source srcset="foto.webp" type="image/webp">
  <img src="foto.jpg" alt="Descrizione dell'immagine">
</picture>

Questo garantisce che nessun visitatore resti senza immagine: chi ha un browser aggiornato riceve AVIF (il più leggero), chi ha un browser meno recente ma comunque moderno riceve WebP, e solo in casi estremi si arriva al JPEG di fallback.

4. Strumenti di conversione

Da riga di comando: cwebp (parte di libwebp, per convertire in WebP) e avifenc (parte di libavif, per AVIF), entrambi strumenti ufficiali degli sviluppatori dei rispettivi formati.

cwebp -q 80 foto.jpg -o foto.webp
avifenc --min 20 --max 40 foto.jpg foto.avif

Nel workflow di build: molti strumenti di build per il web (bundler, plugin CMS) offrono la conversione automatica in fase di pubblicazione, generando entrambi i formati insieme all'originale senza intervento manuale ripetuto per ogni immagine.

In sintesi

Il passaggio ai formati moderni non è un tutto o niente: <picture> permette di ottenere il massimo risparmio di banda per chi può riceverlo, senza mai lasciare indietro chi usa un browser meno aggiornato.