Le immagini raster possono essere considerate come un insieme di istruzioni pixel per pixel per il rendering di una griglia bidimensionale. I formati di immagine raster più comuni sono GIF (.gif), JPEG (.jpg), PNG (.png) e WebP (.webp). Queste istruzioni vengono compresse e codificate da ogni formato di immagine, con differenze considerevoli tra le dimensioni dei file: un'immagine fotografica codificata in formato JPEG potrebbe essere di poche centinaia di kilobyte, mentre la stessa immagine codificata come PNG potrebbe essere di diversi megabyte, senza differenze di qualità evidente per l'utente finale.
L'origine di un'immagine raster in scala oltre le dimensioni intrinseche apparirà distorta, in blocchi o sfocata:
Per un'opera d'arte che contiene livelli di dettaglio reali, le immagini raster sono lo strumento adatto a ogni specifica situazione.
Esattamente come per la scelta tra immagini raster e vettoriali, la scelta del tipo appropriato di immagine raster dipende in definitiva dal caso d'uso. Quando suddividiamo le immagini raster nelle relative codifiche, parliamo dei metodi utilizzati per descriverne i contenuti e dei metodi di compressione (o la loro mancanza) che applichiamo. Ricorda che un server non invia un'immagine via cavo a un browser, ma un flusso di byte che descrivono la griglia di pixel che compongono l'immagine affinché il client possa ricomporla.
Quindi, per visualizzare meglio il processo di codifica di una griglia di pixel come dati in bytestream, devi immaginare di agire come il browser web. Disponi di un foglio di carta millimetrata e di una confezione specifica di pastelli a pastello del brand. Io, in qualità di server web, ho gli stessi elementi, ma ho già utilizzato i pastelli per riempire la carta millimetrata con un'immagine originale. Se ti inviassi un messaggio in testo normale, non potrei inviarti l'immagine stessa, ma potrei trasmettere le informazioni su un'origine dell'immagine in un linguaggio che comprendiamo entrambi, utilizzando il nostro standard condiviso per la griglia e i colori dei "pixel":
Inizia dall'angolo in alto a sinistra. Riga uno, colonna uno è blu. Riga uno, colonna due è blu. La riga uno, la colonna tre sono blu. La riga uno, la colonna quattro sono rosse.
Utilizzando queste informazioni testuali, saresti in grado di ricreare perfettamente l'immagine che ho sul mio foglio di carta millimetrata.
Le differenze nei formati delle immagini e nel modo in cui vengono codificati come dati possono essere considerate in modo generico, a causa del modo in cui queste informazioni sono state formattate. Ad esempio, le informazioni che ti ho inviato potrebbero essere immediatamente espresse come:
Inizia dall'angolo in alto a sinistra. Riga uno, colonne da uno a tre sono blu. La riga uno, la colonna quattro sono rosse.
Una di queste descrizioni genera la stessa immagine, ma la seconda riesce a descrivere la stessa immagine con meno caratteri. Si tratta di un metodo senza perdita di dati per comprimere i dati delle immagini: tutte le stesse informazioni, quindi non riduce la fedeltà visiva, ma meno byte trasferiti da me a te, dal server al motore di rendering. Si tratta dell'equivalente in linguaggio semplice della "codifica di esecuzione" per i dati delle immagini, in cui i dati vengono codificati come valore da ripetere e conteggio, anziché ripetere l'intero valore più volte.
La compressione inversa, con perdita, potrebbe sembrare un comando irrilevante in termini di valore nominale: perché dovresti mai volere che le tue immagini sembrino peggio? Tuttavia, non è proprio così e vale la pena ricordare che i nostri occhi non sono nemmeno perfetti. Scegliere il formato e le impostazioni corrette per la compressione delle immagini è un esercizio per trovare l'equilibrio tra il livello di dettaglio visivo che siamo in grado di percepire e la quantità di dati inviati al browser. Entrambi questi fattori sono determinati dai contenuti dell'immagine di origine.
I formati delle immagini raster sono quelli che probabilmente conosci meglio come sviluppatore: GIF, JPEG, PNG, WebP e altri ancora. Nei prossimi moduli scoprirai le funzionalità di ciascuno.