PNG, JPEG, WebP o AVIF: quale formato scegliere?

Scegliere un formato per il Web significa bilanciare fotografia, trasparenza, testo, compatibilità, peso e qualità. Non esiste un formato universalmente migliore: esiste quello più adatto al contenuto e all’uso.

Scelta rapida

Contenuto	Primo formato da provare	Alternativa
Fotografia	AVIF o WebP	JPEG
Screenshot / interfaccia	WebP o PNG	AVIF
Trasparenza	WebP, AVIF o PNG	secondo compatibilità
Logo / icona geometrica	SVG	PNG se raster obbligatorio
Illustrazione raster	WebP / AVIF	PNG o JPEG

Formato, risoluzione e compressione

Sono tre decisioni diverse. Ridimensionare decide quanti pixel servono; il formato decide come vengono rappresentati; la qualità decide il compromesso della compressione.

Ottimizzare bene significa combinarle.

JPEG

JPEG resta molto efficace per fotografie con molte tonalità, transizioni e texture. Usa compressione con perdita e gode di compatibilità enorme.

È meno adatto a testo nitido, grafica piatta, contorni duri e trasparenza. Con compressione forte possono comparire blocchi, aloni e perdita di dettaglio.

PNG

PNG usa tipicamente compressione senza perdita ed è adatto a screenshot, grafica piatta, trasparenza e casi in cui i pixel codificati devono restare esatti.

Su grandi fotografie può però essere molto più pesante di JPEG, WebP o AVIF.

Il supporto alpha permette ombre, bordi antialias e sfondi trasparenti.

WebP

WebP riunisce modalità con perdita e senza perdita, trasparenza e animazione. È diventato un formato generale molto utile sul Web.

Una fotografia JPEG può spesso diventare più leggera in WebP a qualità visiva simile; alcuni PNG possono essere sostituiti da WebP lossless. Ma il risultato dipende dall’immagine e dall’encoder: verifica sempre sul file reale.

AVIF

AVIF può ottenere compressioni molto efficienti, soprattutto sulle fotografie. Supporta inoltre trasparenza e funzionalità moderne come profondità elevate e HDR nei workflow compatibili.

L’encoding può essere più costoso e non sempre il guadagno giustifica la complessità. Confronta peso, resa e tempi di produzione.

E per SVG?

Logo, icone e schemi geometrici sono spesso descritti meglio come vettori. SVG può scalare senza diventare sfocato e risultare più logico di un raster.

Come confrontare correttamente

Confronta formati partendo dallo stesso master e dalle stesse dimensioni. Non attribuire al codec il guadagno ottenuto contemporaneamente riducendo la risoluzione.

Valuta:

• peso;
• qualità alla dimensione reale;
• trasparenza;
• compatibilità del tuo pubblico;
• costo di encoding;
• semplicità della pipeline.

Fallback e <picture>

Quando serve distribuire più formati, l’elemento HTML <picture> permette al browser di scegliere una sorgente supportata. Una strategia può offrire AVIF, poi WebP e infine un fallback più tradizionale.

Non è sempre necessario moltiplicare i formati. Se WebP soddisfa qualità, compatibilità e peso, una pipeline più semplice può essere preferibile.

Regola pratica

• fotografia: prova AVIF/WebP e confronta con JPEG;
• screenshot: prova WebP lossless o PNG;
• trasparenza: WebP/AVIF/PNG;
• logo geometrico: SVG;
• archivio: conserva comunque il master originale.

La scelta migliore è quella verificata sul contenuto reale, non quella dichiarata “più moderna” in astratto.