PNG vs JPG: quando usare l'uno o l'altro

TL;DR. Usa PNG per screenshot, loghi e tutto ciò che ha bordi netti o trasparenza perché è senza perdita e supporta un canale alfa. Usa JPG per le fotografie perché la sua compressione DCT con perdita produce file 5-10× più piccoli senza perdita percettibile di qualità.

Due formati di immagine, entrambi vecchi di oltre 30 anni, entrambi ancora onnipresenti, entrambi corretti in situazioni diverse. La regola generale è semplice: PNG per screenshot, loghi, tutto ciò che ha bordi netti o trasparenza; JPG per le fotografie. Il ragionamento alla base di questa regola è più interessante della regola stessa.

Le differenze principali

Perché la compressione con perdita vince per le fotografie

L’algoritmo di compressione JPG — la trasformata discreta del coseno (DCT), seguita dal sottocampionamento cromatico e dalla codifica Huffman — è progettato attorno al sistema visivo umano. L’algoritmo scarta informazioni che l’occhio non riesce facilmente a vedere:

• Sottocampionamento cromatico. La visione umana è molto più sensibile alla luminosità (luma) che al colore (croma). JPG memorizza il colore alla metà della risoluzione della luminosità, il che è invisibile nella visualizzazione normale.
• Quantizzazione nel dominio delle frequenze.Le fotografie contengono molto rumore ad alta frequenza (gradienti sottili, texture, grana del sensore). La DCT separa l’immagine in bande di frequenza; JPG quantizza aggressivamente le bande ad alta frequenza. Perdi dettagli che non stavi consapevolmente vedendo comunque.

Per una fotografia 4K, JPG alla qualità 85 è indistinguibile dall’originale senza perdita per la maggior parte degli spettatori, a un decimo delle dimensioni del file. Quel rapporto è imbattibile.

Perché la compressione con perdita fallisce per screenshot e loghi

Le regioni piatte e i bordi netti sono esattamente il tipo di contenuto sbagliato per la matematica nel dominio delle frequenze di JPG. L’algoritmo introduce artefatti di ringing attorno ai bordi netti (visibili come leggeri aloni vicino al testo), e il sottocampionamento cromatico che si nasconde bene in una fotografia diventa ovvio come sbavature di colore accanto a un colore del brand saturo.

La compressione DEFLATE di PNG, al contrario, è esatta. Un colore a 24 bit viene memorizzato come colore a 24 bit. Le regioni piatte si comprimono magnificamente perché la codifica run-length individua la ripetizione; i bordi netti rimangono nitidi. Un tipico screenshot dell’interfaccia utente in PNG è più piccolo dello stesso screenshot salvato come JPG.

La questione della trasparenza

JPG non ha canale alfa. Un “JPG trasparente” non esiste; il formato fisicamente non può memorizzarlo. Se hai bisogno che qualcosa si sovrapponga a uno sfondo non rettangolare — loghi, icone, ritagli stile adesivo, qualsiasi cosa a strati — PNG è l’unico dei due che funziona.

La soluzione che le persone a volte tentano è abbinare lo sfondo JPG al colore di sfondo di destinazione. Funziona per una destinazione specifica e si rompe nel momento in cui la risorsa viene riutilizzata. Non farlo. Usa PNG o, meglio, un formato vettoriale come SVG.

Quando né PNG né JPG è la risposta giusta

Tre casi:

1. Grafica vettoriale. Loghi, icone, illustrazioni dovrebbero essere distribuiti come SVG quando possibile. I vettori si scalano a qualsiasi risoluzione, rimangono nitidi su qualsiasi display e di solito si comprimono a poche centinaia di byte. PNG ti blocca a una risoluzione.
2. Fotografie web moderne. Usa WebP (o AVIF dove supportato). Entrambi i formati producono file 25-50% più piccoli di JPG a qualità visiva equivalente, ed entrambi supportano alfa. Il nostro convertitore JPG in WebP e PNG in WebP gestiscono la conversione nel browser. Torna a JPG con<picture> per la piccola quota di client che non supportano WebP.
3. Immagini UI inline. A volte la risposta giusta è saltare del tutto un file separato. Il nostro strumento immagine in Base64 codifica qualsiasi immagine come URI dati che puoi incollare direttamente in HTML, CSS o JSON. Utile quando l’immagine è piccola (sotto ~10 KB) e una richiesta HTTP separata rallenterebbe il percorso di rendering critico.

L’albero delle decisioni

1. Ha bisogno di trasparenza? → PNG (o SVG se vettoriale).
2. È una fotografia o simile? → JPG, o WebP per il web.
3. È uno screenshot, cattura dell’interfaccia utente o grafica a colori piatti? → PNG.
4. È sotto 10 KB e usato una volta? → Base64 inline.
5. È un logo o un’icona? → SVG. PNG come fallback.

Questo copre circa il 95% dei casi. Il 5% si risolve tipicamente provando entrambi i formati e confrontando le dimensioni dei file — nessun algoritmo è magico, e la risposta giusta dipende dal contenuto specifico.

Dati numerici

• Dimensioni massime: PNG fino a 2³¹−1 × 2³¹−1 px (teorico); JPG limitato a 65.535 × 65.535 px (campo a 16 bit).
• Profondità di bit: PNG supporta 1/2/4/8/16 bit per canale + alfa; JPG è fisso a 8 bit per canale, 3 canali (nessun alfa). Esiste JPG a 12 bit ma raramente è supportato nei browser.
• Vantaggio profondità colore: PNG a 16 bit = 281 trilioni di colori vs 16,7 milioni di JPG — significativo solo per sorgenti HDR e lavoro su banding dei gradienti.
• Rapporto tipico dimensioni file (foto 4K alla qualità 85): PNG ~12 MB vs JPG ~1,5 MB — circa 8×.
• Rapporto tipico dimensioni file (screenshot UI, colore piatto): PNG ~80 KB vs JPG ~180 KB — PNG circa 2× più piccolo.
• Qualità JPG vs percettiva: q=95 è visivamente senza perdita sulla maggior parte dei contenuti; q=80 è il punto ideale per il web; q=60 inizia a mostrare artefatti su volti e gradienti.
• Sottocampionamento cromatico 4:2:0: memorizza il croma a un quarto della risoluzione, risparmiando ~50% delle dimensioni del file con un impatto percettivo minimo sulle foto ma ringing visibile sul testo.
• Livelli di compressione PNG: 0-9 in libpng; il livello 9 produce file ~5-15% più piccoli del livello 6 ma richiede ~3-5× più tempo. oxipng e zopflipng possono ridurre ulteriormente del 10-20%.
• Perdita di generazione: JPG risalvato 10 volte a q=85 perde ~3 dB di PSNR rispetto all’originale; PNG è senza perdita quindi perdita di generazione = 0.
• Dimensioni file APNG vs GIF: tipicamente 50-70% più piccolo del GIF equivalente a maggiore profondità di colore.

Matrice decisionale

Fonti

• W3C / ISO 15948 — Portable Network Graphics (PNG) Specification, Third Edition — w3.org/TR/png.
• ITU-T T.81 (ISO/IEC 10918-1) — Information technology – Digital compression and coding of continuous-tone still images (specifica core JPEG) — itu.int.
• Wallace, G.K. — The JPEG Still Picture Compression Standard, Communications of the ACM, aprile 1991 — articolo JPEG originale sottoposto a revisione paritaria.