Negli anni ’80, Microsoft ha sviluppato una soluzione di resa delle immagini agnostica al dispositivo per le bitmap: il formato di file BMP.Coloro che hanno usato Microsoft Paint in precedenza avrebbero apprezzato le gigantesche dimensioni del file prodotte da semplici tratti e riempimenti di colore.
L’idea dietro il formato di file BMP è che ad ogni pixel viene assegnato un valore di colore. Quindi se ho una bitmap 480×360 che supporta 16 milioni di colori (24 bit), la bitmap finirebbe per essere da qualche parte a nord di 4MB di dimensione.
Questo naturalmente non è ideale se si desidera rendere più immagini di alta qualità. Quindi, la domanda deve essere posta. “C’è un modo per ottimizzare la rappresentazione bitmap in modo che si possa ancora preservare l’integrità visiva dell’immagine ma con meno risorse da usare?”
La risposta è sì. Si scopre che per la maggior parte, gli utenti sono più interessati alle immagini come aiuto visivo piuttosto che alla completezza. Per esempio, supponiamo che mi venga data un’immagine del Golden Gate Bridge come mostrato qui sotto:
Mentre so che il ponte reale, visto di persona, è molto più dettagliato, quello che vedo qui è abbastanza buono per i suoi scopi. Quindi la maggior parte delle persone è disposta a barattare l’integrità visiva con la velocità, a patto che il compromesso sia accettabile. Per esempio, se la degradazione della qualità visiva soggettiva è dell’1%, ma l’utente può godere di un risparmio di spazio del 90%, è per la maggior parte, uno scambio ben accetto.
Quindi, una delle considerazioni chiave nella compressione di bitmap è quella di ottimizzare per l’indistinguibilità visiva. Cioè, rimuovere certi elementi di un’immagine dove l’occhio nudo non è in grado di identificare la differenza. Questo è chiamato compressione lossy, che costituisce la maggior parte dei tipi di compressione che si vedono sullo streaming video delle immagini online. Questo è il modo in cui funzionano i codec H.264, HEVC, HEIF e JPEG.
Altri tipi di immagini come PNG sono compresse senza perdita. L’idea è che si conserva la piena integrità visiva dell’immagine originale ma consumando meno byte per rappresentare la stessa cosa. Ancora, ci sono altri formati di file come WebP che supporta sia la compressione lossy che lossless. Perché vogliamo comprimere senza perdite? Come sopra, è basato su ciò che vogliamo ottenere per l’immagine. Per esempio, le icone nelle applicazioni sono generalmente in PNG (e recentemente, in formato grafico vettoriale).
La compressione dell’immagine senza perdita consiste in una maggiore dimensione del file rispetto alla compressione con perdita. La ragione principale è che ci sono meno strade per comprimere la prima che la seconda. Per gli scopi di questo blog, parleremo di compressione lossy.
I passi generali fatti nella compressione JPEG sono fatti fino ad oggi nella compressione video. Nel corso degli anni, l’algoritmo è migliorato ma i concetti generali rimangono gli stessi.
Passo 1. Conversione dello spazio colore
La conversione dell’immagine inizia convertendo il formato grezzo dell’immagine RGB nei suoi valori di croma (r e b) e luminanza (Y). L’idea è che i nostri occhi sono più sensibili ai cambiamenti di luminosità che al colore. Quindi, siamo effettivamente in grado di ridimensionare la gamma di colori nell’immagine senza influenzare sensibilmente la qualità visiva dell’immagine. Questo viene fatto attraverso il sottocampionamento cromatico come spiegato di seguito.
PASSO 2. Chroma Subsampling
Molti giocatori possono ricordare che il subsampling è tra le possibili manopole che possono impostare per ottimizzare la loro esperienza di gioco. L’idea principale è che più sottocampionamento si fa, più veloci sono le prestazioni di gioco. Questo perché il gioco richiede meno gamma di colori per il rendering.
Il sottocampionamento della croma è indicato da J:a:b, dove J è il numero di pixel da sottocampionare, a rappresenta i pixel della riga superiore e b quelli della riga inferiore.
Nel caso di 4:4:4, significa che in un pixel 4×2, la prima fila (a) deve avere 4 colori e così la seconda fila. Nel caso di 4:2:2, significa che in un pixel 4×2, la prima riga deve essere rappresentata da due colori e così la seconda riga. Nel caso di 4:2:0, significa che in un pixel 4×2, la prima riga dovrebbe essere rappresentata da due colori e la seconda riga copia ciò che è sulla prima riga.
Come potete vedere, attraverso il sottocampionamento del croma, si è in grado di ridurre la gamma di colori fino al 75%.
Passo 3. Discrete Cosine Transform
La compressione JPEG è fatta tagliando l’immagine originale in pezzi di 8×8 pixel. In questo passo, assegniamo i coefficienti per il pezzo 8×8 basati sui segnali mostrati sotto.
L’idea qui è che come l’occhio umano si sposta dalla parte superiore sinistra del riferimento DCT alla parte inferiore destra, più è difficile da percepire. Quindi di solito, quello che succede è che nell’assegnazione dei coefficienti, l’alto a sinistra ottiene un valore molto alto e scende man mano che ci si sposta in diagonale.
Ecco come potrebbero apparire le cose in formato numerico:
FASE 4. Quantizzazione
Dopo l’applicazione del DCT, il prossimo passo è chiamato quantizzazione. Qui, una tabella di quantizzazione viene applicata ai valori DCT risultanti. La tabella differisce tra gli algoritmi di compressione e alcuni software permettono all’utente di impostare la quantità di quantizzazione che vogliono usare. Sotto c’è una tabella standard:
Nota che le cifre diventano più alte man mano che ci si sposta dall’alto a sinistra al basso a destra. Questo è intenzionale. L’idea della quantizzazione è che i dati risultanti dal DCT sono divisi con la tabella di quantizzazione. È qui che l’immagine compressa perde molti dei suoi dati. Poiché i numeri in basso a destra sono alti, la maggior parte dei suoi valori diventerà zero dopo la divisione. Ecco come potrebbe apparire:
FASE 5. Codifica Entropia usando la Codifica Huffman
La codifica Huffman è l’ultimo passo nella compressione. Ecco come funziona.
Supponiamo che io voglia rappresentare una serie di numeri usando dei bit. Inoltre, voglio rappresentarli in modo da consumare la minor quantità di bit per la rappresentazione. Il modo in cui si potrebbe fare è che i numeri altamente ripetuti ricevono bit più bassi. Per esempio, se lo zero è rappresentato molto, generalmente gli assegnerei dei bit più bassi. Una spiegazione più approfondita della codifica Huffman può essere trovata qui.
L’idea qui è che si usano meno bit per rappresentare un insieme più lungo di valori. La codifica Huffman è un algoritmo di compressione senza perdita che è anche usato nella compressione di file di testo. Facendo questo, è possibile risparmiare fino al 50% della dimensione originale.
Che cosa c’è dopo?
La compressione è semplicemente una parte dell’equazione. Quando uno deve rendere l’immagine, deve invertire il processo di compressione prima di essere in grado di rendere l’immagine sullo schermo.
I JPEG sono circa il 90% più piccoli della loro controparte bitmap. Ad oggi è ancora il formato di compressione d’immagine più popolare disponibile. Algoritmi più recenti come HEIF (2013) e AVIF (2018) aumentano la gamma di pixel che si possono usare per l’algoritmo di compressione.²
Nonostante la popolarità di JPEG, formati più recenti forniscono una compressione migliore. WebP per esempio in generale è circa il 70% della dimensione di JPEG e tuttavia è ancora in grado di mantenere l’integrità visiva dell’immagine. Quindi, Google (l’azienda che ha sviluppato WebP) ha spinto gli sviluppatori a ricodificare le loro immagini da JPEG a WebP. Il supporto per WebP, tuttavia, è ancora inferiore a quello di JPEG. Quindi, è necessario supportare entrambi i formati come risultato.
¹ “The BMP File Format.” Prepressure. Accesso al 19 aprile 2019. https://www.prepressure.com/library/file-formats/bmp.
² Netflix ha pubblicato il primo set di immagini AVIF nel 2018. A partire da questo post, le immagini sono ancora accessibili qui. Aziende come Firefox e Microsoft supporteranno presto questa immagine nelle loro offerte software.