I formati grafici e il sistema colore

rainbow-gridSpesso mi capita di spiegare la differenza tra i formati grafici, ed il sistema colore e quando utilizzare gli uni piuttosto che gli altri. Scrivo qui un promemoria riassuntivo delle principali differenze teoriche.

Non vuole essere un post esaustivo sull’argomento che rimane veramente complesso e ampio negli approfondimenti, ma un piccolo articolo propedeutico all’argomento. Ho cercato di arricchirlo con quanti più link esterni possibili.

Grafica vettoriale e grafica bitmap

La prima differenziazione da chiarificare è tra un file bitmap ed un file vettoriale:

Un file bitmap (o raster) è un file dove ogni pixel è definito in una griglia di dati dove per ogni posizione è indicato il colore del pixel. In un file bitmap, il numero di pixel visualizzabili è “finito” ovvero, la griglia ha una dimensione ben precisa definita nel file.

In un file bitmap se volessi ingrandire l’immagine senza perdere in qualità mi sarebbe pressochè impossibile in quanto se da una griglia 2×2 voglio passare ad una griglia 4×4, le informazioni dei 12 pixel mancanti non potranno essere recuperate in alcun modo se non supponendo una media di colori.

Esempi di file bitmap sono i file JPG, PNG, GIF, BMP, RAW, TIFF.

Un file in grafica vettoriale è definito tramite dei punti, linee e superfici che disegnano forme geometriche in un spazio di coordinate “virtuale” 2d o 3d. La visualizzazione è calcolata matematicamente invece di basarsi su una lista di punti con colori predefiniti.

Ciò significa che un disegno vettoriale potrà essere visualizzato nella massima qualità a qualsiasi dimensione in quanto verrà ricalcolato tutte le volte. Per questo motivo è chiamato a risoluzione indipendente. Se voglio passare da una dimensione 2×2 a 4×4 lo potrò fare senza problemi in quanto matematicamente verrà calcolato il colore dei 12 pixel mancanti.

Esempi di formati vettoriali sono EPS, AI, SVG, PDF, SWF.

Per le caratteristiche appena descritte è abbastanza facile intuire che un file vettoriale si adatta molto bene alle necessità della grafica tradizionale e tecnica (aree a colore pieno, geometrie, grafici scientifici) mentre per un’immagine fotografica o illustrativa, dove potenzialmente ogni punto della griglia ha caratteristiche differenti dal precedente, si adatterà sicuramente meglio un file bitmap.

Nei browser ormai sappiamo che i formati raster supportati sono JPG, GIF, PNG e pochi altri, mentre a livello vettoriale abbiamo a disposizione solo SVG, su alcuni browser, e se abbiamo un player, i filmati Flash (che sono prevalentemente vettoriali, in verità molto più complessi).

Il sistema colore

Non voglio entrare in un argomento così complesso come la gestione del sistema colore, però voglio accennare ai due metodi di memorizzazione dei colori nelle immagini più utilizzati dai software moderni.

Il sistema RGB è un metodo per definire i colori basato sulla sintesi additiva. Incrociando tre raggi di luce dei colori primari, il rosso (R), il verde (G), ed il blu (B) si possono ottenere tutti i colori possibili, il bianco è la somma della massima intensità dei tre.

Se immaginiamo, semplificando, che un pixel del nostro monitor si comporti come tre lampadine, ciascuna di uno dei tre colori primari, accese contemporaneamente, possiamo capire che definire un colore com (R23 G43 B255) indica i livelli di intensità che le tre lampadine devono avere per definire un determinato colore (per capire i numeri associati, dovremmo entrare nel concetto di profondità del colore).

Il sistema CMYK è basato su principi differenti. Se il sistema RGB è definito sulla sintesi additiva il sistema CMYK è definito sulla sintesi sottrattiva. Mescolando i tre colori, Ciano (C), Magenta (M), Giallo (Y) su un foglio di carta si potrà simulare parte della gamma di colori della sintesi additiva. Se tutti e tre i colori sono presenti al 100% avrò il nero. In verità mescolando il 100% dei tre colori, non ho un vero nero, bensì un colore simile al nero, così se ho bisogno di un nero puro, devo utilizzare un nero reale che è definito con la percentuale della lettera K.

Come si può intuire, ci stiamo basando su un sistema utilizzato con i dispositivi di stampa, plotter, stampanti tipografiche, inkjet che lavorano con gli inchiostri piuttosto che con la luce.

Per quanto riguarda la visualizzazione nei browser di un’immagine i cui colori sono codificati in CMYK, essa verrà visualizzata dai browser come meglio possono convertendola nello spazio colore RGB con risultati molto distanti dall’intento originale dell’immagine. Quindi attenzione a convertire sempre con un software abbastanza intelligente da poterlo fare per non avere risultati spaventevoli.