JPEG è il tipo di immagine più comune utilizzato sul Web e con una buona ragione: per decenni, JPEG è quasi invariabilmente la scelta giusta per la codifica delle fotografie. Il caso d'uso è proprio qui nel nome: JPEG è l'acronimo di " Joint Photographic Experts Group", il comitato responsabile della prima emissione dello standard nel 1992. L'estensione di un file JPEG viene visualizzata in formato .jpg o .jpeg, anche se quest'ultimo è raro nell'uso moderno.
Mentre la compressione senza perdita di dati comprime passivamente i dati delle immagini nel miglior modo possibile, la compressione con perdita di JPEG cerca opportunità per rendere più efficiente la compressione con piccole modifiche spesso impercettibili ai dati delle immagini. JPEG codifica i dati delle immagini come otto per otto blocchi di pixel e descrive i blocchi (non i singoli pixel al loro interno) in modo algoritmico.
Potrebbe sembrare un riconoscimento accademico sulla carta: "GIF usa una griglia composta da pixel, mentre JPEG usa una griglia composta da più piccole griglie di pixel". In pratica, questo uso di blocchi piuttosto che di pixel fa sì che JPEG sia adatto a un caso d'uso molto più comune per le immagini: il tipo di sottili sfumature a più livelli che compongono una fotografia del mondo reale.
Descrivere anche un gradiente di un solo pixel molto semplice utilizzando la codifica in stile GIF sarebbe estremamente dettagliato:
Riga uno, colonne da una a nove sono #00CC00. La riga uno, la colonna dieci è #00BB00. La riga uno, la colonna undici è #00AA00. La riga uno, la colonna dodici è #009900. La riga uno, la colonna tredici è #008800. La riga uno, la colonna quattordici è #007700. La riga uno, colonna quindici è #006600. La riga uno, la colonna sedici è #005500.
La descrizione di un gradiente utilizzando la codifica in stile JPEG è molto, molto più efficiente:
Il blocco uno è #00CC00. Il blocco due è un gradiente da #00CC00 a #005500.
Il punto di forza del JPEG è la quantificazione del livello di dettaglio "alta frequenza" di un'immagine, spesso in modo impercettibile. Di conseguenza, salvare un'immagine come JPEG di solito significa ridurre la qualità dell'immagine in modi misurabili, ma non necessariamente visibili. Come hai imparato, la quantizzazione della tavolozza in stile GIF è un'operazione relativamente semplice: ridurre il numero di colori di un'immagine genera file più piccoli, ma in un modo che può essere facilmente individuato dall'occhio umano.
JPEG, d'altra parte, è molto abile nell'esecuzione della quantizzazione: i suoi tentativi di compressione con perdita di dati di JPEG sono in grado di quantificare l'origine di un'immagine in modo da rispecchiare vagamente il modo in cui i nostri sistemi psico-visivi quantificano il mondo che ci circonda. In effetti, JPEG cerca di eliminare dettagli che non era possibile vedere prima, in modo da poter eseguire un'ulteriore compressione.
Il sistema psico-visivo umano riesce a "comprimere" molto le immagini che acquisisci costantemente. Quando guardo fuori il mio giardino, riesco immediatamente a elaborare una grande quantità di informazioni: ad esempio, risaltano singoli fiori dai colori vivaci. Rendo subito conto che il terreno è grigio polveroso e le foglie sono cadenti: le mie piante hanno bisogno di acqua. Quello che vedo, ma non elaboro completamente, sono la forma, le dimensioni, l'angolo e la tonalità di verde esatti di ogni singola foglia che cade. Posso cercare attivamente quel livello di dettaglio, ma sarebbe semplicemente troppe informazioni da acquisire passivamente e senza alcun reale beneficio. Il mio sistema psico-visivo esegue una piccola quantizzazione, distillando le informazioni nelle "foglie cadenti".
In effetti, JPEG funziona allo stesso modo. La compressione con perdita di dati di JPEG riduce il livello di dettaglio di un'immagine in un modo che potrebbe non essere registrato affatto nei nostri sistemi psicovisivi naturalmente "perdenti", se effettuato entro i limiti, e introduce molte più opportunità di risparmio della larghezza di banda rispetto alla sola compressione senza perdita di dati.
Ad esempio, il formato JPEG sfrutta uno dei nostri principali punti deboli psicovisivi: i nostri occhi sono più sensibili alle differenze di luminosità che a quelle di tonalità. Prima di applicare qualsiasi compressione, JPEG utilizza un processo chiamato "trasformazione coseno discreta" per suddividere l'immagine in frequenze separate, cioè "livelli", che rappresentano per esempio la luminanza (luminosità) e la crominanza (colore), oppure "luma" e "crominanza".
Lo strato lumatico viene compresso in minima parte, scartando solo i piccoli dettagli che probabilmente non sono visibili all'occhio umano.
Gli strati cromatici vengono ridotti in modo significativo. Anziché limitarsi a quantificare la tavolozza dei livelli cromatici come GIF, JPEG può eseguire un processo chiamato "sottocampionamento", in cui uno strato cromatico viene memorizzato a una risoluzione inferiore. Se ricombinata estendendo efficacemente gli strati cromatici a risoluzione più bassa sullo strato della luma, la differenza è spesso impercettibile. Lievi differenze nella tonalità possono essere evidenti se confrontiamo l'origine dell'immagine originale e il nostro JPEG affiancato, ma solo quando sappiamo esattamente cosa cercare.
Detto questo, JPEG non è perfetto. Per quanto furbo come JPEG ci sia una compressione nascosta, può diventare estremamente ovvio se viene preso troppo lontano. Infatti, se hai trascorso molto tempo sul Web, specialmente nei giorni passati, potresti aver notato il risultato della compressione JPEG che era troppo lunga:
Una compressione troppo aggressiva dei dati delle immagini comporta una riduzione del livello di dettaglio superiore a quella che i nostri sistemi psicovisivi ignorano naturalmente e, di conseguenza, viene spezzata l'illusione. È evidente che mancano dettagli. Dal momento che JPEG funziona in termini di blocchi, possono iniziare a essere visibili i confini tra questi blocchi.
JPEG progressivo
Il formato JPEG progressivo (PJPEG) riordina in modo efficace il processo di rendering di un'immagine JPEG. I file JPEG "di base" vengono visualizzati dall'alto verso il basso man mano che il trasferimento procede, mentre il formato JPEG progressivo spezza il rendering in un insieme di "scansioni" a grandezza originale, analogamente eseguite dall'alto verso il basso, con ogni scansione che aumenta la qualità dell'immagine. L'intera immagine appare immediatamente, anche se sfocata, e diventa più chiara man mano che il trasferimento prosegue.
Sulla carta sembra una differenza strettamente tecnica, ma offre un enorme vantaggio percettivo: poiché offre subito una versione a grandezza originale dell'immagine anziché uno spazio vuoto, la PJPEG può sentirsi più veloce di un JPEG di base per l'utente finale. Inoltre, a parte le immagini più piccole, codificare un'immagine come PJPEG quasi sempre significa file di dimensioni inferiori rispetto a un JPEG di base, non di molto, ma ogni byte è utile.
Tuttavia, c'è un piccolo compromesso: la decodifica PJPEG è più complessa sul lato client, il che significa sovraccaricare un po' di più il browser e l'hardware di un dispositivo durante il rendering. Questo overhead del rendering è difficile da quantificare in termini esatti, ma è minimo e difficilmente riconoscibile, tranne che nel caso di dispositivi molto poco potenti. È un compromesso che vale la pena fare e, nel complesso, il progressivo è un approccio predefinito sensibile ogni volta che un'immagine viene codificata come JPEG.
Con JPEG
Potresti sentirti un po' sopraffatto da tutte queste informazioni. Tuttavia, c'è una buona notizia per il tuo lavoro quotidiano: le specifiche più tecniche della compressione JPEG non vengono eliminate, ma vengono mostrate come un'unica impostazione di "qualità": un numero intero compreso tra 0 e 100. 0 rappresenta la dimensione minima dei file e, come ci si potrebbe aspettare, la qualità visiva peggiore. Man mano che si passa da 0 a 100, la qualità e le dimensioni del file aumentano. Questa impostazione è soggettiva, ovviamente: non tutti gli strumenti interpretano il valore "75" nello stesso modo e la qualità percettiva varia sempre a seconda dei contenuti dell'immagine.
Per capire come funziona questa impostazione di compressione, utilizziamo uno strumento comune basato sul web per ottimizzare i file immagine: Squoosh.
Squoosh, gestito dal team di Chrome, offre un confronto diretto tra diversi metodi di codifica e configurazione degli output delle immagini, con opzioni di configurazione che vanno dal dispositivo di scorrimento globale della "qualità" 0-100 alla capacità di perfezionare i dettagli del ricampionamento della crominanza rispetto al ricampionamento della luminanza. Più basso è il valore di "qualità", maggiore è la compressione e minore sarà il file risultante.
In questo caso, con la "qualità" impostata su 60, la dimensione del file si riduce del 79%. Non farti ingannare dalle implicazioni di questa etichetta: le differenze di qualità nella maggior parte della scala saranno impercettibili all'occhio umano, anche se esegui un confronto affiancato.
Per convertire l'immagine di origine in un formato JPEG progressivo, seleziona la casella "rendering progressivo" nella sezione "Opzioni avanzate". Alcune di queste opzioni di configurazione sono quasi sicuramente un approfondimento più approfondito di quello richiesto da un progetto web medio, ma possono fornirti un'analisi più approfondita di come le cose che hai imparato sulla codifica JPEG influiscono sulla dimensione e sulla qualità dei file nei casi d'uso reali.
In pratica, non c'è molto da fare, nonostante quanto ora sappiamo che il formato JPEG è interno. Squoosh è solo uno degli innumerevoli metodi per salvare le immagini JPEG ottimizzate, che utilizzano tutti un metodo simile per determinare il livello di compressione: un singolo numero intero compreso tra 0 e 100.
Determinare il livello di compressione ideale per le tue immagini è un gioco di finezza, dato che tutta la complessità della codifica JPEG viene ridotta a un singolo numero intero, soprattutto quando così tante sono le dipendenze dei contenuti di un'immagine. Come se pensassi di battere le palpebre o di respirare, prendere in considerazione le impostazioni di compressione JPEG cambia il modo in cui le percepiamo.
Guardando indietro adesso, dopo aver scritto tutto questo, la mia elaborazione psicovisiva è diventata più manuale: ora osservo le singole foglie, anche se l'immagine stessa, per così dire, non è cambiata. Per questo la configurazione della compressione JPEG è un po' complessa: sai esattamente che tipo di difetti visivi cercare. Pensando innanzitutto alla compressione delle immagini, ci concentriamo sulle singole foglie: siamo in grado di individuare una leggera sfocatura e occasionalmente gli artefatti di compressione. Più cerchi gli artefatti mentre perfeziona le impostazioni di compressione JPEG, maggiori sono le probabilità di trovarli, quando è probabile che un utente non lo faccia. Anche se l'utente sapeva esattamente cosa cercare, è improbabile che visiti una pagina con la compressione JPEG.
Per questo motivo, evita l'istinto di eseguire l'ottimizzazione di un'immagine cercando artefatti o guarda troppo da vicino le parti delle nostre immagini in cui sai che gli artefatti appaiono per primi. Per gli utenti, i deboli artefatti si fondono con i piccoli dettagli che solitamente i loro sistemi psicovisivi con perdita di dati evidenziano. Infatti, anche comprendendo i trucchi che JPEG tenta di riprodurre, non noteresti gli stessi artefatti mentre navighi sul Web a meno che tu non li stia cercando. Per questo motivo, è quasi sempre opportuno limitare la compressione JPEG un po' più bassa di quanto pensi possa essere percepibile, soprattutto quando l'immagine verrà visualizzata più piccola delle sue dimensioni intrinseche a causa dello stile diretto o dei vincoli impostati dal layout circostante.