1. Home
2. Formati immagine

Confronto formati: JPEG, PNG, WebP e AVIF

Quattro formati coprono oltre il 99% delle immagini sul web moderno. Fanno scelte diverse su compressione, trasparenza, animazione e supporto browser. Ecco una guida pratica per scegliere quello giusto.

Confronto affiancato

Panorama rapido; il dettaglio per formato è sotto.

JPEG — la base universale

Come funziona

JPEG (Joint Photographic Experts Group) è standardizzato dal 1992 ed è il più vecchio dei quattro. Usa una DCT con perdita su blocchi 8×8, poi quantizzazione e codifica entropica. La qualità si controlla con un numero da 1 a 100. Encoder moderni come MozJPEG spremono 10–20% in più dal formato senza cambiare il bitstream, così ogni decoder JPEG li legge.

Ideale per

Contenuti fotografici con gradienti morbidi e molto dettaglio — ritratti, paesaggi, still life, immagini hero.

Pro

• Supportato da ogni visualizzatore immagini.
• Decodifica accelerata in hardware quasi ovunque.
• Ecosistema maturo di ottimizzatori (MozJPEG, jpegli).

Contro

• Nessun canale alfa — gli sfondi vanno appiattiti.
• Artefatti a blocchi su testo, line art e bordi netti.
• Solo 8 bit per canale.

PNG — lossless e trasparente

Come funziona

Il PNG (Portable Network Graphics) nasce a metà anni '90 come sostituto libero del GIF. È strettamente lossless: compressione DEFLATE su filtri per riga. Ottimizzatori come oxipng (port Rust di optipng) provano combinazioni filtro/compressione per la dimensione minima senza cambiare un pixel.

Ideale per

Interfacce, icone, screenshot, diagrammi, line art, logotipi a colori piatti e tutto ciò che richiede alfa reale.

Pro

• Lossless — i pixel sopravvivono al round trip intatti.
• Alfa 8 bit, fino a 16 bit per canale.
• Supporto universale.

Contro

• Grande sulle foto — spesso molte volte più di JPEG/WebP/AVIF.
• Nessuna animazione nello spec originale (APNG è un'estensione successiva).

WebP — il formato “web-first” di Google

Come funziona

WebP è rilasciato da Google nel 2010, basato sul codec video VP8 e poi esteso con una modalità lossless separata. Supporta con e senza perdita, alfa e animazione. In lossy di solito batte il JPEG del 25–35% a parità di qualità. In lossless batte spesso il PNG del 20–30%.

Ideale per

Uso generico sul web quando l'AVIF non è ancora prudente — foto, sprite con trasparenza, sostituti delle GIF animate, e come livello di fallback sotto l'AVIF.

Pro

• Un solo formato per foto, grafica, alfa e animazione.
• Notevolmente più piccolo di JPEG e PNG a qualità comparabile.
• Supporto ampio: browser aggiornati dal 2020.

Contro

• 8 bit per canale — niente HDR in quel senso.
• Decodifica a volte più lenta del JPEG su dispositivi deboli.

AVIF — oggi il leader in compressione

Come funziona

AVIF (AV1 Image File Format) è un profilo immagine fermo del codec video AV1, dal 2019 (Alliance for Open Media). Supporta fino a 12 bit, alfa, HDR, gamut ampio e grana film. L'encoder di riferimento (aom-av1 in libavif) è lento ma ottiene la miglior compressione oggi praticabile sulle foto reali.

Ideale per

Immagini hero, gallerie e ovunque la banda pesi più del tempo CPU. Funziona bene come livello superiore in <picture>.

Pro

• Compressione top — spesso 40–60% sotto al JPEG.
• Alfa, animazione, HDR, gamut ampio, profondità 10/12 bit.
• Libero da royalty e aperto.

Contro

• Codifica lenta — in produzione o in async.
• Safari solo dalla versione 16 (2022).
• Meno adatto di WebP lossless o PNG a grafica sintetica netta.

Quale formato usare?

• Foto, immagini hero a tutta larghezza: AVIF come formato principale, WebP e JPEG come fallback con <picture>.
• Grafica UI con trasparenza (icone, loghi): PNG per massima retrocompatibilità, WebP lossless per carichi più leggeri.
• Line art, screenshot, diagrammi: PNG (o WebP lossless) — JPEG/AVIF su bordi netti creano artefatti visibili.
• Al posto delle GIF animate: WebP o AVIF — molto più piccole, con alfa reale.
• Un solo formato su tutti i browser, oggi: JPEG per le foto, PNG per la grafica. Non l'opzione più leggera, ma zero problemi di compatibilità.

In pratica non serve sceglierne uno solo: servi AVIF per primo, WebP secondo, JPEG o PNG per ultimo dentro <picture> — ogni browser ottiene la versione più piccola che sa decodificare.