JPG vs PNG vs WebP vs AVIF: scegliere il formato immagine giusto nel 2026

Se distribuisci immagini sul web, il formato che scegli ha più impatto sul peso della pagina di quasi qualsiasi altra singola decisione. Un'immagine hero da 4 MB rispetto a una da 180 KB è la differenza tra un sito che sembra istantaneo e uno che arranca su uno smartphone Android di fascia media con una connessione 4G traballante. Nel 2026 abbiamo quattro contendenti mainstream che meritano attenzione: il veterano JPG, il lossless PNG, l'ormai universale WebP e l'AVIF sempre più maturo.

Questa guida illustra come funziona realmente ciascun formato sotto il cofano, da dove provengono i risparmi in byte, quali compromessi accetti e una raccomandazione chiara su quando usare cosa. Alla fine dovresti essere in grado di rispondere alla domanda "qual è il miglior formato immagine per il web nel 2026?" senza esitazioni, e dovresti sapere esattamente cosa fare quando un grafico ti consegna uno screenshot PNG di 28 MB alle 17 di un venerdì.

Il cast di personaggi

JPG (a volte scritto JPEG) è stato standardizzato nel 1992 ed è ancora il formato in cui scattano la maggior parte delle fotocamere. Usa una trasformata coseno discreta (DCT) su blocchi 8x8, quantizza i coefficienti di frequenza e codifica il risultato con Huffman. È lossy per progettazione e non ha canale alfa, ma è veloce, economico da decodificare e supportato letteralmente su ogni dispositivo costruito negli ultimi trent'anni.

PNG arrivò nel 1996 come sostituto privo di brevetti per GIF. Usa DEFLATE (lo stesso algoritmo di zip e gzip) sopra filtri di riga opzionali, quindi è completamente lossless. PNG supporta un vero canale alfa a 8 bit, palette indicizzate e persino colore a 16 bit per canale. Il prezzo che paghi è la dimensione del file: i contenuti fotografici si comprimono male con DEFLATE.

WebP fu pubblicato da Google nel 2010 e raggiunse il pieno supporto cross-browser intorno al 2020. WebP lossy usa la codifica intra-frame VP8 (le stesse modalità di predizione del codec video VP8) invece della semplice DCT. WebP lossless usa VP8L, un formato personalizzato con trucchi di colour-cache e predictor-transform. WebP supporta l'alfa per entrambe le modalità più l'animazione.

AVIF è il profilo per immagini fisse di AV1, il codec video finalizzato nel 2018 e distribuito praticamente da tutti entro il 2024. Usa blocchi di predizione molto più grandi e intelligenti, più opzioni di trasformazione e un coder entropico enormemente migliore di VP8. AVIF supporta colore fino a 12 bit, alfa, HDR e animazione.

Come funziona davvero la compressione

JPG divide l'immagine in blocchi 8x8, applica una DCT a ciascun blocco, poi divide i coefficienti risultanti per una matrice di quantizzazione. Le alte frequenze vengono compresse più duramente delle basse frequenze perché l'occhio umano è meno sensibile ai dettagli fini. Le impostazioni di qualità più basse moltiplicano semplicemente quella matrice di quantizzazione per uno scalare più grande. È per questo che gli artefatti JPG appaiono come ringing a blocchi attorno ai bordi netti: il codificatore letteralmente non può permettersi di mantenere i coefficienti ad alta frequenza che descrivono il bordo.

PNG non fa alcuna compressione percettiva. Ogni riga di pixel ottiene un prefisso filtro di un byte (None, Sub, Up, Average o Paeth) che predice ogni pixel dai suoi vicini, e poi DEFLATE comprime i residui. Se la tua immagine è una fotografia, i residui sono ancora rumore ad alta entropia e risparmi pochissimo. Se è uno screenshot pieno di colori solidi ripetuti e bordi nitidi, i risparmi sono enormi.

WebP lossy prende in prestito la predizione spaziale intra di VP8: ogni blocco 4x4 o 16x16 viene predetto dai pixel vicini già decodificati usando una di dieci modalità di predizione, e solo il residuo viene trasformato e quantizzato. Una migliore predizione significa residui più piccoli, che significa meno bit. WebP lossless (VP8L) va oltre con una colour cache personalizzata, trasformazioni di palette e un coder entropico adattativo al contesto.

AVIF essenzialmente usa un intero codificatore di keyframe video moderno. Le dimensioni dei blocchi vanno da 4x4 fino a 128x128, le trasformazioni includono DCT, ADST e identity in più dimensioni, e ci sono 56+ modalità di predizione intra inclusi predittori direzionali a fine granularità angolare. Il coder aritmetico in stile CABAC impacchetta significativamente più informazioni per bit rispetto alle tabelle Huffman di JPG. Il risultato sono file circa il 50% più piccoli di JPG alla stessa qualità visiva, al costo di una codifica molto più pesante.

Dimensione dei file a colpo d'occhio

Stessa foto 4000x3000 (paesaggio diurno, senza trasparenza):
JPG  (q=85)   ->  1.180 KB
JPG  (q=92)   ->  1.940 KB
PNG  (24-bit) -> 12.420 KB
WebP (q=85)   ->    810 KB
WebP (lossless) -> 9.860 KB
AVIF (q=60)   ->    495 KB
AVIF (q=80)   ->    760 KB

Stesso screenshot UI 1920x1080 (colori piatti, testo nitido):
JPG  (q=92)   ->    410 KB  (sfumature visibili sul testo)
PNG  (8-bit indexed) ->  92 KB
PNG  (24-bit) ->    280 KB
WebP (lossless) ->  74 KB
AVIF (lossless) ->  88 KB

Due conclusioni da questi numeri. Primo, su fotografie naturali AVIF è circa il 40-60 percento più piccolo di JPG e il 30-40 percento più piccolo di WebP a parità di qualità percepita. Secondo, su contenuti sintetici come screenshot ed esportazioni UI, WebP lossless di solito vince a mani basse, con PNG-8 secondo a poca distanza quando la palette si adatta.

Supporto browser nel 2026

JPG e PNG: 100 percento. Non c'è nulla di cui discutere. Funzionano ovunque esista un browser, inclusi tablet Android di dieci anni fa e WebView incorporate che hai dimenticato.

WebP: effettivamente il 100 percento del traffico browser. Safari ha distribuito il supporto in iOS 14 e macOS Big Sur già nel 2020, Chrome e Firefox lo hanno da molto più tempo, e ora anche la maggior parte dei browser in-app lo decodifica. A partire dal 2026, servire WebP senza un fallback JPG non è più sconsiderato per un tipico sito consumer.

AVIF: circa il 95-97 percento dei browser nel 2026. Chrome, Edge, Firefox, Safari (16.4+) e i principali WebView Android lo decodificano tutti. Il divario rimanente è principalmente Android molto vecchio, alcuni WebView incorporati su smart TV più datate e una lunga coda di dispositivi aziendali bloccati. Per un sito pubblico, AVIF con un fallback WebP o JPG è un'impostazione predefinita sicura.

Trasparenza, animazione e profondità di colore

JPG non ha alcun canale alfa. Se hai bisogno di qualsiasi tipo di trasparenza, non puoi usarlo. Questo è il singolo motivo più comune per cui i designer ricorrono a PNG quando non dovrebbero.

PNG offre un vero canale alfa a 8 bit e supporta fino a 16 bit per canale colore, il che lo rende utile per intermedi ad alta precisione nelle pipeline grafiche. Non c'è animazione nel PNG standard; APNG esiste ma il supporto è disomogeneo al di fuori di sticker ed emoji.

WebP supporta l'alfa sia in modalità lossy che lossless e ha un solido supporto per l'animazione che è significativamente più efficiente delle GIF animate. La profondità di colore è 8 bit per canale, il che va bene per quasi tutti i contenuti web.

AVIF supporta alfa, animazione, colore a 10 e 12 bit, gamut ampi e funzioni di trasferimento HDR. Se stai pubblicando fotografia HDR o opere d'arte a gamut ampio, AVIF è attualmente l'unico formato web mainstream che può trasportare i dati fedelmente.

Decodifica hardware ed energia

La decodifica JPG è così economica sull'hardware moderno che non importa davvero; persino un telefono del 2015 decodifica JPG più velocemente di quanto lo schermo possa visualizzarli. La decodifica PNG è più pesante per pixel perché DEFLATE non è parallelizzabile, ma i payload PNG sono tipicamente più piccoli per immagine nei casi d'uso in stile screenshot, quindi in pratica si compensa.

La decodifica WebP lossy usa lo stesso percorso silicio VP8 che i chip mobile hanno da oltre un decennio. La decodifica è veloce ed energeticamente efficiente. La decodifica WebP lossless è solo software sulla maggior parte dei chip ma comunque ben dentro il budget.

AVIF è dove le cose si fanno interessanti. La decodifica software è genuinamente più pesante di JPG o WebP, occasionalmente di un fattore tre-cinque su una singola immagine. La buona notizia è che la maggior parte dei telefoni rilasciati dopo il 2022 ha decodifica hardware AV1 attraverso cui il browser può instradare le immagini fisse; su quei dispositivi AVIF è in realtà veloce quanto JPG o più veloce. Su laptop più vecchi senza silicio AV1, decodificare un muro di miniature AVIF può apparire nei profili CPU, quindi usalo con giudizio e affidati al markup di immagini responsive in modo che la variante più piccola sia sempre quella decodificata.

Quando usare ciascuno: la versione breve

• Usa JPG per fotografie quando hai bisogno della massima compatibilità assoluta e non vuoi mantenere più varianti. Qualità da 82 a 88 è il solito punto ottimale.
• Usa PNG per screenshot, esportazioni UI, loghi con bordi netti e qualsiasi cosa che necessiti di trasparenza lossless al volo. Preferisci PNG indicizzato a 8 bit quando la palette si adatta.
• Usa WebP come formato web predefinito nel 2026. WebP lossy per le foto, WebP lossless per asset UI e icone che in passato sarebbero state PNG.
• Usa AVIF quando la banda e i Core Web Vitals contano di più, quando stai servendo contenuti HDR o a gamut ampio, o quando vuoi la più piccola immagine LCP possibile. Abbinalo sempre a un fallback WebP o JPG tramite l'elemento picture.
• Evita del tutto GIF. WebP e AVIF animati sono più piccoli e hanno un aspetto migliore allo stesso budget di byte.

Un flusso di lavoro pratico per la conversione

La maggior parte dei team non ha bisogno di un'elaborata pipeline di build per sfruttare i formati moderni. Il flusso di lavoro minimo sostenibile è semplice: mantieni l'esportazione originale dalla fotocamera o dallo strumento di design come fonte di verità, poi genera varianti JPG, WebP e AVIF al momento del deploy. Per conversioni occasionali, una CLI fa il lavoro in pochi secondi.

# Converti una singola foto in tutte e tre le varianti moderne
cwebp -q 85 hero.jpg -o hero.webp
avifenc --min 20 --max 30 -s 6 hero.jpg hero.avif

# Usa l'elemento picture in modo che il browser scelga il migliore che capisce
# <picture>
#   <source srcset="hero.avif" type="image/avif">
#   <source srcset="hero.webp" type="image/webp">
#   <img src="hero.jpg" alt="..." width="1600" height="900">
# </picture>

Se non vuoi installare strumenti da riga di comando e hai solo una manciata di immagini, Multilities offre un convertitore di immagini basato su browser su /tools/image-convert che gestisce JPG, PNG, WebP e AVIF in qualsiasi direzione senza caricare i tuoi file da nessuna parte; tutto gira nel tuo tab. Per spremere byte extra da un JPG o PNG esistente senza cambiare formato, /tools/image-compress ricodificherà a una qualità a tua scelta e ti mostrerà i conteggi in byte prima e dopo.

WebP vs PNG: la domanda che non vuole morire

La confusione più comune nel 2026 è ancora WebP vs PNG. Risposta breve: WebP lossless è strettamente migliore di PNG per quasi ogni caso d'uso web. È più piccolo, supporta lo stesso canale alfa e ogni browser che ti interessa lo decodifica. Le uniche ragioni per continuare a usare PNG oggi sono il tooling a valle che non accetta WebP (alcune ad network, alcuni plugin CMS legacy, alcuni flussi di stampa) e il fatto che PNG è il formato di interscambio de facto tra i designer.

Se stai costruendo un nuovo prodotto da zero, imposta come predefinito la tua pipeline di asset su WebP lossless per UI e AVIF lossy per le foto, e ricorri a PNG e JPG solo quando qualcosa rifiuta di accettare il formato moderno.

Trappole comuni

• Non ricodificare un JPG come un altro JPG a qualità più alta aspettandoti che il file appaia migliore. La quantizzazione originale ha già buttato via informazioni; renderai solo il file più grande.
• Non salvare gli screenshot come JPG. Il ringing a blocchi attorno al testo è inconfondibile e non correggibile. Usa PNG o WebP lossless.
• Attenzione al profilo colore. AVIF e i moderni codificatori WebP preservano i profili ICC per impostazione predefinita; gli strumenti più vecchi li rimuovono e la tua immagine cambierà tonalità sui display a gamut ampio.
• Testa la scala di qualità del tuo codificatore AVIF. Codificatori diversi usano convenzioni diverse: libavif usa una qualità da 0 a 100, mentre avifenc storicamente usava un quantizzatore min/max da 0 a 63 dove più basso è meglio.
• Se stai usando una CDN che ricodifica al volo, assicurati che stia effettivamente negoziando AVIF tramite l'header Accept. Molte CDN impostano il default solo su WebP a meno che tu non cambi un'impostazione.

E JPEG XL?

JPEG XL è un formato genuinamente buono, tecnicamente competitivo con AVIF e con il trucco unico di poter transcodificare in modo lossless i JPG esistenti riducendoli di circa il 20 percento. A partire dal 2026 Safari lo distribuisce, Firefox lo supporta dietro un flag e Chrome ancora non lo abilita per impostazione predefinita. Finché ciò non cambia, tratta JXL come un formato da osservare piuttosto che da distribuire. AVIF è il formato moderno con supporto cross-browser oggi.

L'albero decisionale di 30 secondi

Se è una fotografia, genera AVIF e WebP, ricorri a JPG. Se ha trasparenza o bordi netti, genera WebP lossless, ricorri a PNG. Se non puoi eseguire un build step, distribuisci JPG per le foto e PNG per tutto il resto e prosegui con la tua vita. I formati immagine non sono più un progetto di ricerca nel 2026; le risposte sono per lo più consolidate e il tooling è maturo. Scegli il formato giusto, imposta un fallback e spendi il tempo risparmiato in qualcos'altro.