Convertire fra PNG e JPG senza perdere ciò che conta

Questo non è un articolo sulla scelta del formato

Quale formato debba avere un'immagine è un'altra domanda, risolta dal suo essere fotografica o a tinte piatte e dal bisogno di trasparenza; l'abbiamo trattata altrove. Questo articolo riguarda quanto costa la conversione in sé una volta decisa — ed entrambe le direzioni fra PNG e JPG hanno ciascuna un guasto preciso che non ha nulla a che vedere con quale fosse il formato giusto.

I due guasti sono opposti, ed è per questo che vale la pena impararli insieme. PNG verso JPG perde qualcosa che il file aveva e non te lo dice. JPG verso PNG non perde nulla, ed è proprio per questo che è così spesso la cosa sbagliata da fare.

PNG verso JPG: il convertitore sceglie il tuo colore di sfondo

Il JPEG memorizza tre canali e nessun quarto. Il formato non ha dove registrare che un pixel è trasparente, quindi il convertitore deve decidere quale colore quel pixel diventa — e ogni convertitore decide in modo diverso, senza chiedere. L'abbiamo provato con un logo 600 × 400 reso su trasparenza: 203 445 dei suoi 240 000 pixel sono totalmente trasparenti, 34 333 totalmente opachi e 2 222 stanno in mezzo, sui bordi antialiasati delle forme.

Due convertitori, stesso file, stesso formato di destinazione, risposte opposte. La pipeline d'immagine di sistema di Apple ha prodotto bianco: il 95,31 % dei pixel originariamente trasparenti è uscito esattamente a 255,255,255, il resto essendo ringing JPEG vicino ai bordi. Una canvas di browser — il meccanismo dietro moltissimi convertitori online — ha prodotto nero: il 94,82 % è uscito esattamente a 0,0,0. Nessuno dei due ha offerto una scelta, e la differenza è invisibile nell'anteprima di un file browser, perché quell'anteprima sta di solito su uno sfondo chiaro dove la versione bianca sembra perfetta e quella nera sembra una scelta grafica.

La dimensione dell'errore si quantifica facilmente. Abbiamo composto l'originale correttamente su bianco — ciò che un designer avrebbe voluto — e confrontato. Il JPEG appiattito su nero differisce da quel risultato corretto di 217,60 livelli in media su tutta l'inquadratura, perché l'84,77 % dell'inquadratura è ora un rettangolo nero invece di niente. La versione appiattita su bianco differisce di 0,32 livelli: nella sostanza corretta, su una pagina bianca. Su una pagina scura le due si scambiano i ruoli. Il punto non è che il bianco sia giusto; è che il convertitore ha preso una decisione sul tuo progetto senza dirlo.

L'alone è peggio del rettangolo

Un riquadro nero o bianco attorno a un logo è almeno evidente. Il danno che finisce in produzione sta ai bordi. Quei 2 222 pixel parzialmente trasparenti sono l'antialiasing che rende curve e caratteri lisci, e ognuno di essi è una miscela non ancora risolta. Quando il convertitore appiattisce sul colore sbagliato, si mescolano verso quel colore invece che verso quello della tua pagina.

Un pixel del nostro test lo mostra esattamente. Alle coordinate 244,59 la sorgente conserva il colore 28,76,217 — un blu deciso — con un alfa di 120, cioè il 47 % di copertura del pixel. Composto su bianco, come previsto, dovrebbe valere 148,171,237: un azzurro pallido e morbido che rende liscia la curva. Nel JPEG appiattito su nero vale 16,39,89: quasi nero. Su tutti i 2 222 pixel di alone l'errore medio rispetto alla composizione corretta è di 141,04 livelli, contro 6,54 della versione appiattita su bianco. Metti quel logo su una pagina bianca: non è solo inscatolato, è contornato da un alone scuro che nessun ridimensionamento o riesportazione toglierà, perché ormai è il dato di pixel stesso.

JPG verso PNG: senza perdita, e quindi inutile

È probabilmente la conversione sprecata più comune del web, e nasce da un'intuizione dall'aria ragionevole: il PNG è il formato senza perdita, quindi mettere l'immagine in PNG dovrebbe proteggerla. E lo fa — da ogni perdita futura. Non fa nulla per la perdita già avvenuta, perché quella perdita non è conservata a parte. I pixel quantizzati, a blocchi e con ringing del JPEG sono ora l'immagine, e il compito del PNG è riprodurre esattamente ciò che riceve.

L'abbiamo misurato su un file reale. La foto 1600 × 900 in qualità 75 pesa 314 890 byte. Convertita in PNG pesa 1 501 885 byte — 4,76 volte tanto. Abbiamo confermato che le due sono identiche decodificandole entrambe in bitmap grezze: 4 320 054 byte ciascuna, e lo stesso hash SHA-256. Non un pixel è migliorato; il file è semplicemente cinque volte più pesante da servire.

Il rapporto peggiora man mano che il JPEG peggiora, ed è la parte controintuitiva. In qualità 90 la stessa foto pesa 426 601 byte e il suo PNG 1 587 574 — una penalità di 3,72 ×. In qualità 30 il JPEG è di soli 92 816 byte ma il PNG è ancora 1 061 895 — una penalità di 11,44 ×. Il motivo: il PNG comprime prevedendo ogni pixel dai vicini, e un JPEG molto compresso è pieno di bordi di blocchi 8 × 8 e di ringing che nessun predittore si aspetta. Stai pagando un milione di byte per conservare artefatti con precisione. Se una piattaforma pretende PNG, dagli PNG; altrimenti questa conversione è una fattura senza nulla dall'altra parte.

Il dettaglio che rende il JPEG sbagliato per il testo colorato

Il JPEG non codifica rosso, verde e blu. Converte in un canale di luminosità e due canali di differenza di colore, e poi — per impostazione predefinita — memorizza i canali di colore a metà risoluzione in orizzontale e in verticale. È il sottocampionamento della crominanza, un buon compromesso su una foto, dove il colore cambia lentamente. È un cattivo compromesso ovunque il colore cambi su un bordo netto, che è esattamente ciò che è il testo colorato.

Abbiamo reso un foglio di prova 1000 × 360 con tre fasce della stessa frase su bianco: nero neutro, rosso saturo, blu saturo. In qualità 75 l'errore medio della fascia nera è 0,365 livelli per pixel con un errore di crominanza esattamente nullo, perché il testo grigio non ha colore da perdere. L'errore della fascia rossa è 1,265 con una componente cromatica di 0,862. Quello della fascia blu è 2,362 con una componente cromatica di 1,783 — sei volte e mezzo l'errore totale della fascia nera, sullo stesso file, con la stessa impostazione e lo stesso carattere. Contando solo i pixel che erano bianco puro nella sorgente, il 6,8 % è contaminato nella fascia nera, il 19,1 % nella rossa e il 36,1 % nella blu.

La parte che sorprende è che alzare la qualità aiuta appena. Abbiamo letto i fattori di campionamento direttamente dai file: in qualità 75 e in qualità 90 il nostro encoder scrive lo stesso schema sottocampionato, e solo in qualità 100 passa al colore a piena risoluzione. Così passare da 75 a 90 ha fatto crescere il file da 80 122 a 98 578 byte e migliorato la fascia blu da 2,362 a 2,116 — 23 % di byte in più per un 10 % di risultato. La qualità 100 finalmente lo risolve, portando la fascia blu a 0,143, a 213 085 byte. Il PNG della stessa pagina pesa 57 854 byte ed è esatto. Quando l'immagine è testo colorato, il cursore della qualità non è il comando che cerchi; lo è il formato.

Domande frequenti

Perché il mio logo si è ritrovato con un riquadro bianco?

Perché hai convertito un PNG con trasparenza in JPG, e il JPEG non ha canale alfa, quindi il convertitore ha composto la zona trasparente su un colore di sfondo scelto da sé. Il nostro ha scelto bianco con uno strumento e nero con un altro, sullo stesso identico file. La correzione è appiattire tu il disegno sul colore della pagina in cui starà prima di convertire — o tenere il PNG, se la trasparenza è il punto.

Convertire un JPG in PNG migliora la qualità?

Non può. Abbiamo convertito un JPEG di qualità 75 in PNG e decodificato entrambi in bitmap grezze: identici byte per byte, stesso hash SHA-256. L'unica cosa cambiata è la dimensione, da 314 890 a 1 501 885 byte. La conversione è davvero senza perdita, ed è proprio il punto — senza perdita significa che copia ciò che le è stato dato, compreso ogni bordo di blocco e ogni ringing già presenti nel JPEG.

Quando convertire JPG in PNG è davvero la scelta giusta?

Quando la ragione riguarda il passo successivo e non l'immagine. Un intermedio senza perdita mentre modifichi, così che salvare ripetutamente non riquantizzi ogni volta l'immagine. Uno strumento, una tipografia o una piattaforma che non accetta altro. Un file che stai per scontornare e a cui aggiungerai trasparenza vera, che il JPEG non sa proprio conservare. In ciascuno di questi casi il PNG è un file di lavoro, non un consegnabile — pubblica il JPEG, o meglio un WebP, quando hai finito.

Posso alzare la qualità JPEG per correggere il testo colorato sfocato?

Appena, e non per il motivo che ti aspetteresti. La sfocatura sul testo colorato viene dal sottocampionamento della crominanza, che la maggior parte degli encoder tiene attivo fino in cima alla scala di qualità. Abbiamo letto i fattori di campionamento dai nostri stessi file: qualità 75 e qualità 90 usano lo stesso colore sottocampionato, quindi alzare l'impostazione ha fatto crescere il file del 23 % e migliorato la fascia di testo blu solo del 10 %. La qualità 100 finalmente codifica il colore a piena risoluzione e lo risolve davvero — a 213 085 byte contro 57 854 della stessa pagina in PNG. Usa il PNG.

La trasparenza è davvero persa o è solo nascosta?

Davvero persa. Il JPEG ha tre canali e nessun quarto in cui nascondere alcunché. Una volta scritto il file, un pixel prima trasparente è un normale pixel opaco del colore scelto dal convertitore, indistinguibile da un pixel che il designer abbia dipinto così di proposito. Riconvertire il JPEG in PNG ti ridà un canale alfa, ma completamente opaco ovunque. Conserva il PNG originale.