Tecniche di gestione colore su web

Gestione digitale del colore > Gestione del colore su web

La situazione ideale

Per vedere correttamente i colori di una immagine in una pagina web dovrebbero essere soddisfatte queste condizioni:

l'immagine deve contenere un profilo ICC;
il browser deve supportare i profili ICC, e deve essere attivato in tal senso;
il monitor deve avere un profilo ICC.

Se queste condizioni sono soddisfatte, il browser oppure il sistema operativo possono fare una conversione di colore:

profilo di origine: quello contenuto nell'immagine;
profilo di destinazione: quello del monitor;
intento di rendering: colorimetrico relativo;
motore di colore: quello a disposizione (nel browser o nel sistema operativo).

Purtroppo queste condizioni non sono quasi mai soddisfatte (a) perché i browser che supportano i profili ICC sono molto rari e (b) perché i monitor che hanno un profilo sono altrettanto rari.

In altre parole, inserire un profilo in una immagine non è un problema. L'unica questione è che il "peso" dell'immagine aumenta, ma ci sono diverse tecniche che rendono questo fatto sopportabile (vedi oltre). Fare in modo che il visitatore del sito usi un browser che supporti i profili è invece un vero problema, se non altro perché questo browser sono rari. Si potrebbe comunque aggiungere un'avvertenza del tipo "Per vedere correttamente i colori di questo sito è necessario utilizzare un broser che supporti i profili ICC". Fare in modo che i monitor di tutti i visitatori del sito, che magari stanno in Corea, Alaska, Cina e Kenia, abbiano un profilo (e che questi profili siano corretti) è invece un ostacolo, mi pare, insormontabile.

La situazione ideale è dunque difficilmente raggiungibile, se non in una intranet, in una rete chiusa e controllabile. Vediamo come procedere.

Due workflow

L'immagine viene creata in Photoshop, con il profilo corretto, con i numeri di pixel (base e altezza) corretti. A questo punto distinguerei due workflow, a seconda che l'immagine

possa essere vista da tutti i browser, senza troppe complicazioni; in questo caso i colori non saranno sempre visti correttamente;
venga vista solo dai visitatori che hanno un monitor profilato e un browser che supporta i profili; in questo caso i colori saranno visti correttamente.

Per il primo workflow, bisogna tener contro che il World Wide Web Consortium indica nelle specifiche CSS2 che tutte le immagini senza profilo sono da considerarsi nello spazio sRGB. Quindi può essere consigliata questa procedura:

in Photoshop, convertire dal profilo dell'immagine al profilo sRGB;
sempre in Photoshop, dare il comando File > Salva per web;
nel Menù anteprima della finestra di salvataggio attivare "Usa profilo per colore documento" sia per l'originale che per l'ottimizzata (serve solo per l'anteprima, non modifica nessuna immagine);
disattivare la casella "Profilo ICC".

Dopo aver fatto tutte le altre regolazioni, si può salvare.

Per il secondo workflow si può invece mantenere il profilo originale dell'immagine, salvare per il web e attivare "Profilo ICC" che allora viene incorporato. Conviene che il profilo sia a matrice e non a tabella, in modo che non occupi troppo spazio.

Da Photoshop bisogna salvare per forza in JPEG perché con i formati PNG e GIF "Profilo ICC" non è attivabile. In realtà anche GIF e PNG supportano i profili ICC, dunque se si desidera usare uno di questi formati bisogna incorporalo con qualche altra applicazione. Per quanto riguarda i formati vettoriali, la gestione del colore è possibile con SVG.

In questo caso abbiamo una immagine con un profilo incorporato, ma ci sono tecniche alternative per assegnare un profilo ad una immagine in una pagina web.

Profilo specificato in un tag HTML

Invece di incorporare il profilo nell'immagine che viene spedita dal server al browser è possibile fare riferimento al profilo in un tag HTML. In tal caso, naturalmente, il profilo deve essere presente sulla macchina dove risiede il browser (eventualmente può essere scaricato un volta per tutte).

Alcune di queste proposte sono state fatte dalla Apple.

Profilo ICC come tag HTML
L'indicazione del profilo può essere inserita nel tag dell'immagine IMG

oppure nel tag BODY

anche mediante indicazioni di stile

BODY {iccprofile: url("source.icc");}

Profilo ICC nel tag di stile
Microsoft ha proposto l’indicazione del profilo ICC come stile. In questo caso il profilo, se non è sRGB, deve essere presente nella macchina del browser.

Supporto del browser

Una volta che siamo riusciti a far arrivare l'immagine al browser del visitatore, il passo successivo spetta al browser. Il browser in teoria dovrebbe (a) considerare il profilo incorporato nell'immagine, (b) se non c'è assumerne uno di default e (c) convertire l'immagine nel profilo di destinazione, che è quello del monitor.

Se una immagine non ha un profilo assegnato il browser può assumere che sia sRGB (come specificano le regole del World Wide Consortium). La tabella qui sotto riguarda il formato JPEG.

Mac OS X		mancante	incorporato	tag IMG	tag BODY	stile BODY	stile
	Safari	monitor	sì
	Explorer	sRGB	sì se attivato	sì	sì
	OmniWeb	sRGB	no
	Navigator		no
Windows XP
	Explorer	sRGB	no				sì
	Navigator		no

Charles Cowen aveva una interessante pagina web mediante la quale era possibile testare il proprio sistema e browser per controllare quali delle precedenti possibilità sono supportate.

Qui c'è un'altra pagina di test di ICC per verificare le versioni di profili ICC che il browser supporta.

Un'altra pagina web da consultare è quella di Robin Myers.

Controllo per PNG

Pagina di

NorthLight

xxx

Profilo predefinito

Supporto del browser

Altre tecniche

Nella realtà dunque ci si scontra con limiti pratici che attualmente sono i seguenti:

delle due piattaforme più diffuse, Windows e Macintosh, solo Macintosh ha un sistema di gestione digitale del colore a livello di sistema operativo (ColorSync);
dei due browser più diffusi, Netscape Navigator e Microsoft Internet Explorer, solo il secondo, dalla versione 4, supporta ColorSync.

Non sempre è possibile o conveniente inserire un profilo in un JPEG. Infatti si tratta di solito di immagini di pochi Kbyte e l’inserimento del profilo, anche se piccolo, può aumentarne la dimensione in modo da rendere il metodo non pratico.

D'altra parte non è prevedibile il fatto che su una macchina sia presente un determinato profilo. Sono stati allora studiati altri metodi, basati sempre sui profili ICC, ma che non prevedono la conversione del colore fatta dal browser dell’utente.

E-Color
La soluzione di E-Color (detta True Internet Color) non consiste nello spedire il profilo ICC incorporato nell’immagine. Invece il server web (che necessita di una speciale estensione) richiede al browser il profilo del monitor ed esegue la conversione di colore dalla parte server, prima che l’immagine venga trasmessa. Così l’immagine è più leggera perché è senza profilo, ma i colori sono corretti, perché sono già stati convertiti per il monitor del browser. La tecnica è illustrata anche nella pagina Taking Color to the Web del sito Apple.

Pantone
Pantone ha qualcosa per il web.

ColorLock System di SGI
Soluzione molto costosa che gira solo su workstation SGI.

Home | Commenti a Mauro Boscarol | Ultimo aggiornamento 6 ottobre 2002