Perché le immagini JPEG piccole cambiano aspetto dentro Chrome

Un’immagine JPEG mostrata a pochi pixel di larghezza può apparire diversa tra Chrome e Firefox, anche quando il file è esattamente lo stesso. Dietro una differenza apparentemente inspiegabile sembra risiede un’ottimizzazione profonda, applicata durante la decodifica JPEG.

Ad analizzare la questione è Guillaume Técher che parte da un piccolo logo in formato JPEG: mentre in Chrome appare confuso e irriconoscibile, Firefox conserva meglio alcuni dettagli della forma originale.

JPEG nasce per comprimere foto e immagini con variazioni continue di colore; non è adatto per icone, loghi o elementi grafici minuscoli. Il formato risale ai primi anni ’90 e basa buona parte della propria efficacia su un principio ancora fondamentale nella compressione delle immagini: rappresentare separatamente le variazioni lente e quelle molto rapide presenti nei pixel, per conservare con maggiore precisione ciò che l’occhio percepisce meglio e sacrificare ciò che conta meno.

Perché JPEG permette di evitare parte del lavoro

Per capire perché Chrome può mostrare un piccolo JPEG in modo diverso rispetto ad altri browser, conviene partire da come funziona realmente la compressione. Un file JPEG non conserva ogni pixel così com’è. Divide invece l’immagine in piccoli blocchi, normalmente da 8 x 8 pixel, e per ciascun blocco cerca di descrivere soprattutto come cambiano luminosità e dettagli al suo interno.

Qui entra in gioco la DCT (Discrete Cosine Transform): invece di memorizzare direttamente i 64 valori del blocco, JPEG li trasforma in 64 coefficienti che descrivono il contenuto in un altro modo. Il primo rappresenta grossomodo il livello medio di luminosità del blocco; gli altri indicano quanto sono presenti variazioni più o meno rapide. Le variazioni lente corrispondono, per esempio, a una sfumatura morbida. Quelle rapide descrivono bordi netti, piccoli dettagli, texture e cambiamenti bruschi tra pixel vicini.

Il vantaggio è che l’occhio umano tollera abbastanza bene la perdita di una parte dei dettagli più fini. JPEG sfrutta proprio questa caratteristica: durante la quantizzazione riduce la precisione dei coefficienti meno importanti e può arrivare ad azzerarne molti. È qui che nasce gran parte della compressione, ma anche la perdita di qualità tipica del formato.

Chrome può ridurre il JPEG già durante la decodifica

Quando il browser deve visualizzare il JPEG, esegue il percorso inverso. La IDCT (Inverse Discrete Cosine Transform) usa i coefficienti rimasti per ricostruire i pixel del blocco. Normalmente si tornerebbe quindi agli 8 x 8 pixel originali. Ma se quell’immagine deve essere mostrata molto più piccola, per esempio a un ottavo della larghezza e dell’altezza, ricostruire tutti i 64 pixel di ogni blocco per poi scartarne quasi tutti sarebbe uno spreco.

Il decoder può allora fare una cosa più intelligente: ricostruire direttamente una versione ridotta del blocco, usando solo le informazioni realmente utili alla dimensione finale. È il principio della scaled IDCT. In pratica, Chrome può evitare di creare prima l’immagine JPEG alla risoluzione completa e ottenere subito una versione più piccola. Si risparmiano memoria e calcoli, ma c’è un prezzo: alcuni dettagli fini che avrebbero contribuito al ridimensionamento tradizionale possono andare persi prima. Su una fotografia quasi non si nota; su un logo o un’icona di pochi pixel, invece, un bordo può apparire più spesso o leggermente diverso.

Chrome sfrutta questa possibilità attraverso Skia e libjpeg-turbo. Skia può scegliere diverse scale intermedie, fino a 1/8 dell’originale, e affidare poi al normale ridimensionamento grafico il passaggio alle dimensioni finali richieste dalla pagina.

Per loghi e icone meglio evitare JPEG

Il problema, come abbiamo evidenziato in precedenza, emerge soprattutto con immagini molto piccole e dai bordi netti. JPEG nasce per le foto e tollera la perdita di dettagli poco percepibili; un logo o un’icona, invece, può dipendere proprio da pochi pixel.

Per questi elementi è preferibile usare il formato SVG, che mantiene la geometria vettoriale fino al rendering.

PNG resta una valida alternativa raster quando servono bordi precisi o trasparenza. Con JPEG, invece, il risultato può dipendere anche dalle scelte interne del browser durante decodifica e ridimensionamento.