WebP vs AVIF vs JPEG vs PNG: quale formato scegliere e come ridurre il peso delle immagini

Nel 2026 tutti e quattro i formati sono ancora utili, ma per compiti differenti:

• AVIF vince più spesso sul peso per fotografie e immagini complesse.
• WebP offre un eccellente equilibrio tra compressione, funzioni, compatibilità e costo di implementazione.
• JPEG rimane il fallback più sicuro per fotografie e sistemi con requisiti sconosciuti.
• PNG ha senso soprattutto per grafica raster lossless, screenshot di interfacce, dettagli pixel-perfect e trasparenza precisa.

TL;DR: per le fotografie servi AVIF, poi WebP e conserva JPEG come fallback. Per screenshot, grafica semplice e trasparenza confronta WebP o AVIF lossless con PNG. Per icone e loghi, SVG è di solito preferibile a tutti questi formati raster.

Funzioni, compatibilità e raccomandazioni verificate il 23 luglio 2026.

Differenze principali

AVIF supporta compressione lossy e lossless, trasparenza, animazione, HDR e wide color gamut. WebP combina modalità lossy e lossless, canale alfa e animazione. PNG è lossless e supporta trasparenza parziale, ma per le fotografie produce normalmente file troppo pesanti.

Scelta rapida per tipo di asset

La strategia corretta è una policy per tipo di asset, non la conversione di tutto in AVIF.

1. JPEG: ancora utile, raramente la migliore scelta principale

JPEG è stato progettato per le fotografie. Usa compressione lossy, eliminando informazioni meno percepibili dall’occhio umano. In questo modo riduce molto il peso rispetto a PNG, ma una compressione eccessiva crea blocchi, variazioni di colore e perdita di dettaglio.

Vantaggi

• compatibilità quasi universale,
• fallback affidabile per fotografie,
• codifica e decodifica rapide,
• JPEG progressivo,
• strumenti maturi come MozJPEG.

Il JPEG progressivo mostra inizialmente una versione approssimativa su tutta l’immagine e la rende più nitida con il download. Può essere leggermente più piccolo di un JPEG baseline e migliorare la percezione su reti lente.

Limiti

• nessun canale alfa,
• nessuna animazione,
• compressione distruttiva,
• testo, linee sottili e interfacce generano facilmente artefatti,
• salvataggi successivi degradano la qualità,
• WebP e AVIF sono spesso più piccoli a qualità simile.

Uno studio ufficiale del team WebP ha rilevato file WebP più piccoli del 25-34% rispetto a JPEG a SSIM comparabile. Non è una promessa valida per ogni asset: sorgente, encoder, impostazioni e metrica influenzano il risultato.

Quando scegliere JPEG

• quando un singolo file deve funzionare nel maggior numero di sistemi,
• quando non controlli il client finale,
• per CMS vecchi, email, documenti o piattaforme esterne,
• come fallback in <picture>,
• quando la pipeline AVIF/WebP non è pronta.

Su un frontend moderno controllato, i formati più recenti dovrebbero essere serviti per primi.

2. PNG: fedeltà, nitidezza e trasparenza al costo del peso

PNG usa compressione lossless e conserva i pixel senza perdita da codifica. Supporta inoltre un canale alfa con molti livelli di trasparenza.

Vantaggi

• testo, linee e UI molto nitidi,
• trasparenza alfa completa,
• nessuna perdita generazionale,
• compatibilità universale,
• buon formato raster di riferimento.

Limiti

• fotografie molto più pesanti di JPEG, WebP o AVIF,
• il PNG classico non è animato; APNG è la variante animata,
• raster scala peggio di SVG,
• metadati, canali o palette non ottimizzati aumentano il file,
• la trasparenza da sola non giustifica sempre PNG.

web.dev osserva che PNG quasi mai è il formato corretto per distribuire fotografie. Le grafiche semplici semitrasparenti vanno confrontate con WebP o AVIF.

Quando PNG continua a vincere

• screenshot con testo piccolo e linee sottili,
• copia raster lossless,
• piattaforma che accetta PNG ma non WebP/AVIF,
• palette ridotta,
• riproduzione perfetta più importante del trasferimento,
• fonte per codifiche future.

Per loghi, icone, grafici e illustrazioni semplici prova prima SVG.

3. WebP: il formato predefinito più pratico

Google ha sviluppato WebP come alternativa più efficiente a JPEG e ha poi aggiunto lossless, trasparenza e animazione. Può sostituire fotografie JPEG, molti PNG e alcune animazioni GIF.

Vantaggi

• modalità lossy e lossless,
• trasparenza,
• animazione,
• ampia compatibilità nei browser attuali,
• ecosistema maturo in CMS, librerie e CDN,
• in genere più piccolo di JPEG o PNG,
• codifica più semplice e spesso più rapida di AVIF.

Limiti

• niente visualizzazione progressiva,
• alcuni sistemi richiedono ancora JPEG o PNG,
• il valore “quality” non è confrontabile tra formati,
• WebP non è sempre più piccolo di AVIF,
• WebP lossless non supera sempre un PNG ben ottimizzato.

Quando usare WebP

WebP è ideale se vuoi:

• ridurre rapidamente le fotografie,
• mantenere la trasparenza,
• coprire quasi tutti i browser attuali con un formato moderno,
• elaborare localmente o on demand,
• limitare il numero di formati in produzione,
• bilanciare qualità, peso e costo di codifica.

Il Convertitore e ottimizzatore di immagini POLPROG elabora PNG, JPG e WebP localmente nel browser, con conversione, compressione, ridimensionamento e rimozione dei metadati.

4. AVIF: trasferimento minimo e funzioni moderne

AVIF si basa sul codec AV1 e sul contenitore HEIF. Supporta compressione lossy e lossless, trasparenza, animazione, HDR e wide gamut.

Vantaggi

• elevata efficienza di compressione,
• buona qualità a basso bitrate,
• modalità lossy e lossless,
• trasparenza e animazione,
• immagini a 8, 10 e 12 bit, HDR,
• supporto in tutti i principali browser attuali,
• ottimi risultati su fotografie, gradienti e immagini complesse.

AVIF fa parte di Baseline da gennaio 2024, quindi è supportato dalle versioni attuali dei principali engine.

Limiti

• nessun rendering progressivo,
• codifica potenzialmente più costosa di JPEG o WebP,
• qualità e peso molto dipendenti da encoder, velocità e subsampling,
• alcune piattaforme rifiutano ancora .avif,
• asset piccoli possono non battere SVG, PNG o WebP,
• impostazioni errate possono sfocare texture e testo.

MDN segnala che AVIF può comprimere leggermente meglio di WebP, ma non supporta rendering progressivo. Non esiste una percentuale fissa valida per ogni immagine.

Quando implementare AVIF

• quando le immagini rappresentano gran parte del trasferimento,
• quando esistono molte foto hero o prodotto,
• quando è disponibile una pipeline automatizzata,
• quando gli asset vengono codificati una volta e serviti spesso,
• quando servono HDR, wide gamut o maggiore profondità,
• quando WebP/JPEG restano come fallback.

5. AVIF è sempre più piccolo di WebP?

No. web.dev lo identifica come candidato molto efficiente per cataloghi fotografici, con WebP come fallback moderno e JPEG come base più affidabile. Il risultato dipende da:

• contenuto e risoluzione,
• rumore,
• testo e linee sottili,
• modalità lossy/lossless,
• profondità e subsampling,
• versione dell’encoder,
• impostazione di velocità,
• metrica di qualità.

Confronta a qualità visiva equivalente, non usando lo stesso numero del cursore. quality=75 non ha lo stesso significato nei diversi formati.

6. Core Web Vitals e LCP

Un formato moderno può ridurre il tempo di download e migliorare la parte del LCP legata al trasferimento. Non corregge scoperta tardiva, server lento, dimensioni errate o rendering via JavaScript.

Per un’immagine LCP:

• non usare loading="lazy",
• inserirla presto nell’HTML,
• considerare fetchpriority="high",
• definire width e height,
• usare srcset e sizes,
• evitare redirect e dipendenze,
• non scaricare varianti inutilizzate.

web.dev sconsiglia il lazy loading per immagini above the fold e candidate LCP. fetchpriority="high" può anticiparne la priorità.

Vedi anche Audit di un sito web nel 2026 e Core Web Vitals nella pratica.

7. Implementazione corretta con <picture>

<picture>
  <source
    type="image/avif"
    srcset="/images/hero-800.avif 800w,
            /images/hero-1280.avif 1280w,
            /images/hero-1920.avif 1920w"
    sizes="100vw"
  >
  <source
    type="image/webp"
    srcset="/images/hero-800.webp 800w,
            /images/hero-1280.webp 1280w,
            /images/hero-1920.webp 1920w"
    sizes="100vw"
  >
  <img
    src="/images/hero-1280.jpg"
    srcset="/images/hero-800.jpg 800w,
            /images/hero-1280.jpg 1280w,
            /images/hero-1920.jpg 1920w"
    sizes="100vw"
    width="1920"
    height="1080"
    fetchpriority="high"
    alt="Dashboard di analisi delle prestazioni del sito"
  >
</picture>

Il browser sceglie il primo <source> supportato. AVIF va quindi prima di WebP e <img> fornisce il fallback.

Google può trovare l’immagine nell’attributo src di <img>, anche all’interno di <picture>. Google Search supporta JPEG, PNG, WebP e AVIF.

Per immagini fuori viewport:

<img
  src="/images/example.webp"
  width="960"
  height="640"
  loading="lazy"
  decoding="async"
  alt="Confronto del peso dei file immagine"
>

Non applicare lazy loading automaticamente a hero, prodotto principale o candidato LCP.

8. Le immagini responsive contano più del solo formato

Convertire 2400 × 1600 in AVIF non basta se il telefono visualizza 360 px. Servire il numero corretto di pixel può far risparmiare più del cambio codec.

Considera:

• larghezze in srcset,
• sizes corretto,
• ritaglio mobile dedicato,
• alta densità solo dove visibile,
• limiti di upload nel CMS,
• vere miniature anziché ridimensionamento CSS.

Formato, dimensioni e compressione sono un unico sistema.

9. Come confrontare la qualità

1. Parti dall’originale o da una fonte lossless.
2. Genera più livelli di qualità per formato.
3. Valuta alla dimensione finale.
4. Controlla volti, capelli, gradienti, testo, bordi e aree scure.
5. Misura il costo di codifica e decodifica.
6. Scegli il file più piccolo ancora accettabile.
7. Ripeti su diverse categorie di immagini.

SSIM aiuta, ma non sostituisce la revisione visiva.

10. Errori comuni

Ricodificare un JPEG già molto compresso

AVIF non recupera i dettagli persi. Usa l’originale o una fonte lossless.

Un solo valore di qualità

Ritratto, screenshot, foto notturna e gradiente reagiscono diversamente. Usa profili o controlli.

Dimensioni mancanti

Senza width e height può comparire CLS con qualsiasi formato.

Lazy loading dell’hero

Anche un AVIF piccolo arriva tardi se scoperto dopo il rendering o marcato loading="lazy".

Troppe varianti

Molte larghezze in quattro formati aumentano storage e build. Genera solo ciò che serve.

PNG per ogni trasparenza

WebP e AVIF supportano alfa. Mantieni PNG se offre bordi migliori, file minore o compatibilità necessaria.

Raster per icone e loghi

SVG è in genere più leggero, scalabile e stilizzabile.

11. SEO delle immagini

Google Search supporta tutti e quattro i formati. Non esiste un bonus documentato per .avif o .webp. Il vantaggio è indiretto tramite prestazioni e UX.

Controlla anche:

• URL stabile e descrittivo,
• estensione coerente con il tipo reale,
• MIME corretto,
• alt utile,
• contesto testuale visibile,
• accesso per Googlebot,
• dimensioni corrette,
• image sitemap nei siti visuali,
• metadati di licenza quando rilevanti.

Usa Stato del sito web per i controlli tecnici e Anteprima Open Graph per le card social.

12. Policy consigliata

Opzione semplice

• WebP principale,
• JPEG fallback per foto,
• PNG per grafica selezionata,
• SVG per loghi e icone,
• srcset per immagini importanti.

Opzione ottimale

• AVIF prima,
• WebP seconda,
• JPEG fallback,
• WebP/AVIF lossless o PNG per screenshot,
• larghezze automatiche,
• budget qualità e trasferimento,
• monitoraggio LCP e RUM.

E-commerce

• foto prodotto in AVIF e WebP,
• fallback JPEG,
• grandi immagini e miniature separate,
• zoom dopo interazione,
• immagine critica senza lazy loading,
• test di texture, colori e trasparenza,
• cache e image CDN.

Verdetto

AVIF è la scelta migliore quando conta il minimo trasferimento e la pipeline è solida. WebP è il miglior formato generale per semplicità, compatibilità e compressione. JPEG resta il fallback fotografico più sicuro e PNG va usato consapevolmente per grafica lossless e trasparenza.

La strategia consigliata:

AVIF → WebP → JPEG

per fotografie e:

AVIF/WebP lossless ↔ PNG

per asset nitidi o trasparenti dopo confronto reale.