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.
GuidaFormatiPrincipiante
PNG, JPEG, WebP o AVIF: quale formato scegliere?
Scegli il formato immagine adatto a foto, screenshot, trasparenza o interfacce senza sacrificare inutilmente qualità e prestazioni.
Mostra indice
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.
Questo articolo ti è stato utile?
Fonti e riferimenti
- MDN — Image file type and format guide (si apre in una nuova scheda)Pagina in inglese
- Google — An image format for the Web (si apre in una nuova scheda)Pagina in inglese