Scegliere un formato immagine era semplice: JPEG per le foto, PNG per la grafica, e via. Oggi la situazione è più articolata, ma anche più vantaggiosa. Formati moderni come WebP e AVIF possono ridurre il peso di un'immagine della metà o più senza alcun calo visibile di qualità, e questo migliora direttamente la velocità della pagina, le prestazioni nei motori di ricerca e l'esperienza di chiunque navighi con una connessione lenta.
Questa guida spiega come funzionano davvero i principali formati immagine per il web, dove ciascuno dà il meglio di sé e come scegliere con sicurezza. È pensata per chiunque pubblichi immagini online — sviluppatori, designer, esperti di marketing e titolari di negozi — e si concentra su decisioni pratiche più che sulla teoria.
Parti da Due Domande
Quasi ogni decisione sul formato si riduce a due proprietà della tua immagine.
**È una fotografia o una grafica?** Le fotografie (toni continui, sfumature, bordi morbidi) si comprimono bene con i formati *lossy*, che eliminano dettagli che l'occhio percepisce a malapena. Le grafiche con bordi netti, colori piatti e testo — loghi, icone, screenshot, grafici — richiedono una compressione *lossless* o un formato vettoriale per restare nitide.
**Ti serve la trasparenza o l'animazione?** Un logo collocato su sfondi diversi ha bisogno di un canale alpha. Una breve clip in loop richiede il supporto all'animazione. Questi requisiti includono o escludono un formato ancora prima che entri in gioco la dimensione del file.
Tieni a mente queste due risposte mentre esaminiamo i formati.
I Formati Immagine per il Web in Sintesi
| Formato | Compressione | Trasparenza | Animazione | Supporto browser | Ideale per |
|---|---|---|---|---|---|
| JPEG (JPG) | Lossy | No | No | Universale | Fotografie dove conta la compatibilità |
| PNG | Lossless | Sì (alpha) | No | Universale | Loghi, icone, screenshot, grafiche piatte |
| WebP | Lossy + lossless | Sì (alpha) | Sì | Tutti i browser moderni | Una scelta predefinita moderna per foto e grafiche |
| AVIF | Lossy + lossless | Sì (alpha) | Sì | Quasi tutti i browser moderni | Massima efficienza per foto e immagini hero |
| SVG | Vettoriale (lossless) | Sì | Sì | Universale | Loghi, icone, illustrazioni che devono scalare |
| GIF | Lossless, 256 colori | 1 bit | Sì | Universale | Vecchie animazioni semplici |
JPEG (JPG): Il Formato Universale per le Foto
JPEG è il formato fotografico predefinito da tre decenni, e il suo punto di forza più grande è la compatibilità universale. Ogni browser, sistema operativo, fotocamera e strumento di editing lo legge senza problemi.
JPEG usa la compressione lossy: elimina i dettagli ad alta frequenza a cui la visione umana è meno sensibile e memorizza il resto in modo compatto. Con impostazioni di alta qualità la perdita è invisibile; spingi troppo la compressione e otterrai artefatti a blocchi e aloni intorno ai bordi.
I suoi limiti contano quanto la sua diffusione. JPEG non gestisce la trasparenza, quindi qualsiasi area trasparente diventa uno sfondo pieno, e fatica con i bordi netti e il testo. Usa JPEG quando una fotografia deve aprirsi ovunque senza alcun rischio di compatibilità. Se hai grafiche o ti serve la trasparenza, converti JPG in PNG invece.
PNG: Quando Ti Serve la Trasparenza o il Dettaglio al Pixel
PNG è lossless: riproduce ogni pixel esattamente come è stato salvato, senza artefatti di compressione. Questo lo rende lo strumento giusto per loghi, icone, screenshot, diagrammi e qualsiasi grafica con bordi netti o ampie aree di colore piatto. Supporta inoltre la trasparenza alpha completa, così le immagini si appoggiano in modo pulito su qualsiasi sfondo.
Il compromesso è la dimensione del file. Per le fotografie, un PNG può essere diverse volte più grande di un JPEG equivalente di alta qualità. La regola pratica è semplice: PNG per le grafiche e la trasparenza, non per le foto. Quando un PNG fotografico rallenta una pagina, converti PNG in JPG oppure, meglio per il web, converti PNG in WebP. Per un approfondimento, leggi JPG vs PNG.
WebP: La Scelta Predefinita Moderna e Pratica
WebP, sviluppato da Google, è oggi il formato a cui la maggior parte dei siti dovrebbe ricorrere per primo. Supporta sia la compressione lossy sia quella lossless, la trasparenza alpha completa e l'animazione, coprendo quasi ogni caso d'uso in un unico formato. Google indica che le immagini WebP lossy sono in genere dal 25 al 34 percento più piccole dei JPEG comparabili, e che il WebP lossless è di solito circa il 26 percento più piccolo del PNG.
Il supporto non è più un ostacolo: WebP funziona in tutti i principali browser attuali, incluso Safari dalla versione 14. Per la stragrande maggioranza del pubblico puoi servire WebP direttamente, ed è per questo che è una scelta predefinita sensata sia per le foto sia per le grafiche. Per adottarlo, converti JPG in WebP oppure converti PNG in WebP. Per una spiegazione più completa, leggi Cos'è WebP.
AVIF: Il Più Efficiente, con Qualche Compromesso
AVIF è il formato mainstream più recente, costruito sul codec video AV1 dell'Alliance for Open Media. È il campione dell'efficienza: a parità di qualità visiva, i file AVIF sono spesso circa la metà di un JPEG e sensibilmente più piccoli del WebP. Gestisce inoltre l'alta gamma dinamica, gli ampi spazi colore, la trasparenza e l'animazione.
Ci sono due compromessi pratici. La codifica è più lenta ed esigente rispetto a JPEG o WebP, il che conta per i grandi lotti. E sebbene il supporto sia ormai ampio — Chrome, Firefox, Edge e Safari 16.4 e successivi — resta leggermente indietro rispetto a WebP, quindi è saggio prevedere un fallback. AVIF brilla per le grandi immagini hero e le pagine ricche di foto, dove ogni kilobyte conta. Provalo convertendo JPG in AVIF o PNG in AVIF, e consulta Cos'è AVIF per i dettagli.
SVG: Per Tutto Ciò Che Deve Scalare
SVG è fondamentalmente diverso: è un formato vettoriale, che descrive le forme con la matematica anziché con una griglia di pixel. Un SVG resta perfettamente nitido a qualsiasi dimensione, da una favicon a un cartellone pubblicitario, restando minuscolo per le grafiche semplici. È la scelta corretta per loghi, icone e illustrazioni costruiti con forme e linee piene.
SVG non è adatto alle fotografie, che non hanno una geometria pulita da descrivere. Ma per le icone di interfaccia e gli asset di brand, nulla eguaglia la sua scalabilità e nitidezza. Scopri di più in Cos'è un File SVG.
Un Semplice Schema Decisionale
Quando hai dubbi, procedi con questi punti nell'ordine:
- **È un logo, un'icona o un'illustrazione piatta?** Usa SVG.
- **È una grafica o uno screenshot, oppure serve la trasparenza o bordi perfetti al pixel?** Usa PNG, o il WebP lossless per file più piccoli.
- **È una fotografia per un pubblico moderno?** Usa AVIF per la dimensione più piccola, WebP per il miglior equilibrio tra dimensione e diffusione.
- **Deve aprirsi letteralmente ovunque, anche su software datati?** Usa JPEG.
- **È animata?** Usa WebP o, meglio ancora, un vero formato video come MP4, non GIF.
Servire i Formati Moderni in Sicurezza
Non devi scegliere un solo formato per tutti. L'elemento picture di HTML consente al browser di scegliere il formato migliore che supporta: elenca prima AVIF, poi WebP, poi un fallback JPEG o PNG, e ogni visitatore scarica un solo file. I browser moderni ottengono la versione efficiente e quelli più vecchi un fallback garantito, senza bisogno di JavaScript.
Questo va oltre l'estetica. Le immagini sono di solito la parte più pesante di una pagina, quindi la scelta del formato incide direttamente sul Largest Contentful Paint, uno dei Core Web Vitals di Google, e di conseguenza sia sull'esperienza utente sia sulle prestazioni nei motori di ricerca. Immagini più piccole e ben scelte sono uno dei miglioramenti di velocità a più alto impatto disponibili.
Come Convertire le Tue Immagini Esistenti
Raramente devi riesportare da zero. Per modernizzare una libreria esistente, converti sul posto: JPG in WebP, PNG in WebP, JPG in AVIF, oppure PNG in JPG per la massima compatibilità. Conserva i tuoi master originali di alta qualità e genera i formati moderni a partire da essi quando serve.