JPG, PNG, WebP, AVIF: quale formato immagine per che cosa

Una società di ginnastica di Losone ha bisogno di immagini in molti posti: sul sito web, nella newsletter, sul volantino della festa di ginnastica, nel rapporto al Comune. La segretaria riceve le foto in HEIC, il logo come JPG con un bordo bianco e gli screenshot della pagina d’iscrizione in PNG. Finora sceglie il formato a sensazione.

Non esiste un’unica risposta giusta, ma alcune linee chiare sì. Dipendono da che cosa mostra l’immagine e da dove appare.

I formati in sintesi

MDN, la documentazione per sviluppatori di Mozilla, descrive così i formati più diffusi:

Formato	Punto di forza	Limite
JPEG	foto e immagini con sfumature morbide	con perdita, nessuna trasparenza
PNG	riproduzione esatta, trasparenza	file grandi per le foto
GIF	animazioni semplici	al massimo 256 colori
WebP	immagini e animazioni, più leggere che in JPEG o PNG	non riconosciuto ovunque negli ambienti più vecchi
AVIF	forte compressione per immagini e animazioni	nessuna visualizzazione progressiva durante il caricamento
SVG	grafiche che restano nitide a qualsiasi dimensione	solo per forme disegnate, non per foto

Come funzionano la compressione senza perdita e con perdita è descritto nell’articolo Senza perdita o con perdita.

Secondo l’uso

Per la società di ginnastica ne risulta una ripartizione secondo lo scopo:

Uso	Formato più indicato	Perché
Foto sul sito web	WebP o AVIF, JPEG come ripiego	file leggeri con buona qualità
Logo sul sito web	SVG, altrimenti PNG	contorni nitidi, trasparenza
Screenshot, istruzioni	PNG o WebP senza perdita	il testo resta nitido
Foto nella newsletter o per e-mail	JPEG	diffuso e leggibile dalla maggior parte dei programmi
Volantini e stampa	secondo le indicazioni della tipografia	requisiti di risoluzione e colori

Che cosa mostrano i browser

Per i siti web la domanda più importante è se i browser conoscono un formato. MDN ne elenca il supporto: WebP è mostrato da tutte le versioni di Chrome, Edge, Firefox, Opera e Safari, anche se Safari sul Mac richiede almeno la versione 14 e macOS Big Sur. AVIF è mostrato da Chrome dalla versione 85, da Edge dalla 121, da Opera dalla 71, da Firefox dalla 93 e da Safari dalla 16.1. JPEG XL, un formato più recente, è supportato da Safari dalla versione 17; in Chrome, secondo MDN, è disponibile solo tramite un’impostazione sperimentale.

Per le immagini raster sul web, MDN raccomanda quindi in primo luogo WebP o AVIF e consiglia di offrire con l’elemento <picture> un ripiego in PNG o JPEG per i browser che non conoscono i formati più recenti.

Loghi e grafiche

Il logo con il bordo bianco è un caso tipico. In JPEG non ha uno sfondo trasparente — JPEG non ha un canale alfa —, e sui bordi delle lettere si vedono le tracce della compressione con perdita. Per loghi, diagrammi e icone che devono essere disegnati con precisione in dimensioni diverse, MDN raccomanda il formato vettoriale SVG. Se è disponibile solo una grafica raster, un PNG con sfondo trasparente è la scelta migliore successiva.

Per la società vale quindi la pena chiedere alla persona che a suo tempo ha disegnato il logo: spesso da qualche parte esiste una versione vettoriale.

Screenshot

Le istruzioni con screenshot — per esempio «Come iscriversi alla festa di ginnastica» — contengono molto testo. MDN osserva che in immagini di questo tipo sfocature e aloni colorati attorno al testo e ai contorni netti sono ben visibili con la compressione con perdita, e raccomanda una codifica senza perdita. PNG o WebP senza perdita mantengono il testo nitido.

Trasparenza e movimento

Due proprietà restringono ulteriormente la scelta:

• Trasparenza. PNG, WebP e AVIF possono salvare aree trasparenti, JPEG no.
• Animazione. GIF può animare, ma è limitato a 256 colori. MDN indica WebP e AVIF come una buona scelta anche per le immagini animate.

Foto dall’iPhone

Molte foto dei soci arrivano in formato HEIC, il formato predefinito degli iPhone più recenti. Per il sito web, la newsletter e la stampa vengono di norma convertite in uno degli altri formati. A che cosa prestare attenzione è descritto nell’articolo Convertire HEIC in JPG.

Convertire non è rinominare

Chi rinomina un file da «foto.heic» a «foto.jpg» non ha cambiato il formato — solo il nome. I dati all’interno sono gli stessi, e alcuni programmi si rifiutano poi di aprire il file perché nome e contenuto non corrispondono. Per un altro formato serve una vera conversione, in cui l’immagine viene salvata di nuovo.

Stampa e archivio

Per la stampa valgono regole proprie. La tipografia indica quale formato, quale risoluzione e quale spazio colore si aspetta. La risoluzione vi è spesso indicata in dpi, punti per pollice sulla carta. Un’immagine rimpicciolita per il sito web di solito non basta per un volantino — per questo conviene conservare gli originali.

Lo stesso vale per l’archivio della società: gli originali restano a grandezza piena e nel formato d’origine, e ogni versione per il sito web, la newsletter o la stampa viene generata di nuovo a partire da essi.

Anche la dimensione conta

Il formato è solo una leva. web.dev, un sito informativo di Google dedicato allo sviluppo web, fa notare che uno schermo con densità di pixel doppia ha bisogno di quattro volte più pixel. Una foto alla piena risoluzione della fotocamera resta pesante anche in WebP. Prima rimpicciolire alla dimensione necessaria, poi scegliere il formato adatto: è questo ordine a far risparmiare di più.

Per la società di ginnastica di Losone

La segretaria deposita una piccola tabella nella cartella della società: foto per il sito web in WebP con ripiego JPEG, foto per la newsletter in JPEG, screenshot in PNG, il logo in SVG, che la grafica aveva ancora. Per il volantino chiede alla tipografia. Gli originali HEIC restano in una cartella a parte.

Gli strumenti immagini che stiamo sviluppando convertiranno le immagini tra JPG, PNG, WebP e HEIC, le comprimeranno e le ridimensioneranno — elaborate in Svizzera, in memoria, senza che alcuna immagine resti salvata, e in modalità riservata interamente sul Suo dispositivo.