colore digitale blog

Il blog di Mauro Boscarol sulla gestione digitale del colore dal 1998

Risultati per la parola ‘web’

Gestione colore per il web

Creare un JPEG per il web con Photoshop CS3

Considerati tutti i limiti dei browser attuali e il fatto che i monitor hanno gamut diversi (anche molto diversi se sono monitor LCD) e al monitor può essere o non essere assegnato un profilo colore ICC, qual è il miglior modo per creare una immagine JPEG da visualizzare su web?

I migliori browser supportano (cioè riconoscono) un profilo colore ICC incorporato in un file JPEG, quindi è opportuno incorporare il profilo nel file. I browser che non lo supportano, dovrebbero (secondo W3C) considerare il JPEG come sRGB. È però comune, per esempio nel campo fotografico, utilizzare profili diversi per le proprie immagini. 

 

Creare un nuova immagine per il web

Per creare una nuova immagine in Photoshop CS3, si usa come al solito il comando File > New e si sceglie lo spazio colore, come nello screen shot qui sotto. Poi clic su OK.

A questo punto si disegna l’immagine e alla fine si dà il comando File > Save for Web and Devices. Si prosegue come indicato qui sotto in “Ottimizzare per il web”.

 

Salvare una fotografia per il web

Se invece di una nuova immagine dobbiamo preparare una fotografia per una pagina web, il principio è lo stesso: dobbiamo avere una fotografia RGB con profilo ICC incorporato. I passi sono questi.

Si apre la fotografia in Photoshop e si controlla se c’è un profilo incorporato. In caso affermativo l’immagine è già pronta per essere inserita in una pagina web. Dare il comando File > Save for Web and Devices e proseguire come indicato qui sotto in “Ottimizzare per il web”.

Se infine la fotografia non ha un profilo incorporato assegnare il profilo corretto e dare il comando File > Save for Web and Devices. 

 

Opzioni di ottimizzazione per il web

Con il comando File > Save for Web and Devices si apre la finestra relativa, come nello screen shot qui sotto. Come formato scegliere JPEG con le opzioni di compressione e qualità preferite.

In questa finestra ci sono tre menù popup: un primo menù  in alto (a sinistra di Save), un secondo un po’ più in basso a destra (è quello aperto qui sopra) e un terzo (ancora un po’ più in basso). Quest’ultimo non è interessante per il colore.

Il secondo menù (quello aperto) consente di far fare a Photoshop una conversione di colore a sRGB (Convert to sRGB). Se la nostra immagine è già in sRGB, questo comando non fa nulla, altrimenti converte l’immagine in sRGB.  

La casella ICC Profile, se attivata, indica a Photoshop di produrre un JPEG con profilo incorporato. Se non è attivata il JPEG non avrà un profilo incorporato.

Il primo menù (quello più in alto) riguarda la resa dell’immagine nella finestra stessa Save for web e non influisce sulla resa dell’immagine nel browser. Serve per simulare come verrà l’immagine quando sarà su web.

In questo menù si può scegliere tra quattro opzioni

  1. Uncompensated Color;
  2. Standard Windows Color;
  3. Standard Macintosh Color;
  4. Use Document Color Profile.

Sulla immagine originale (la prima in alto a sinistra) queste impostazioni non dipendono dall’impostazione Convert to sRGB e hanno rispettivamente questo effetto:

  1. i numeri RGB sono mandati al monitor senza essere modificati (cioè non viene fatta compensazione monitor);
  2. all’immagine viene assegnato sRGB e viene fatta la compensazione a monitor;
  3. all’immagine viene assegnato Apple RGB e viene fatta la compensazione a monitor;
  4. all’immagine viene assegnato il profilo incorporato nell’immagine stessa e viene fatta la compensazione monitor.

Sulle immagini cosiddette “ottimizzate” (se sono JPEG) queste impostazioni sono specifiche per ogni immagine: per esempio, se sono visualizzati  tre “ottimizzati”, ognuno di questi si può impostare diversamente. Inoltre queste impostazioni dipendono dall’impostazione Convert to sRGB: se è attivato viene preventivamente fatta la conversione a sRGB, altrimenti non viene fatta; successivamente le quattro opzioni hanno questi effetti:

  1. i numeri RGB sono mandati al monitor senza essere modificati: questo permette di simulare un browser che non onora i profili su un monitor come quello che stiamo usando (stesso gamma, bianco, primari);
  2. ai numeri RGB viene assegnato un gamma 2.2 al posto di quello originale: questo permette di simulare un browser che non onora i profili su un monitor con gamma 2.2;
  3. ai numeri RGB viene assegnato un gamma 1.8 al posto di quello originale: questo permette di simulare un browser che non onora i profili su un monitor con gamma 1.8;
  4. all’immagine viene assegnato il suo profilo (oppure lo spazio di lavoro in Photoshop, se l’immagine non ha un profilo assegnato): ha senso solo se Convert to sRGB non entra in azione (quindi o è disattivato o l’immagine è già sRGB) e in tal caso permette di simulare un browser che onora i profili incorporati in JPEG (come Safari e Firefox).

Tutto ciò è abbastanza complesso e reso anche più frustrante dalla scarsa documentazione di Adobe. Vediamo in pratica quali sono le migliori impostazioni da usare per evitare inutili complicazioni.

 

Workflow consigliato

Partiamo sempre da Photoshop con una immagine con profilo assegnato esplicitamente.

La casella ICC profile va sempre  attivata, così il profilo viene incorporato nel JPEG.

Se l’immagine è sRGB con profilo assegnato esplicitamente (in realtà potrebbe anche non essere assegnato ma impostato come spazio di lavoro in Photoshop), la conversione a sRGB del secondo menù non fa nulla dunque è irrilevante attivare o non attivare la conversione a sRGB.

Se l’immagine è in qualche altro profilo l’attivazione fa la conversione a sRGB. Questa scelta dipende dal profilo finale che intendiamo incorporare nella nostra immagine. Chi vuole essere prudente, attiva la conversione a sRGB (e l’immagine viene convertita in sRGB). I più avventurosi non la attivano e l’immagine rimane nel suo profilo originale (per esempio Adobe RGB).

L’altro menù, quello più in alto, si imposta diversamente per l’originale e per ogni singola “ottimizzata”.

Per l’originale ha senso impostarlo su Use Document Color Profile. In questo modo vedo l’originale esattamente come è (cioè come lo vedo in Photoshop, con la compensazione monitor).

Sulle immagini ottimizzate, l’impostazione dipende da cosa voglio simulare. Per simulare un browser che

  • onora i profili incorporati, va impostata su Use Document Color Profile
  • non onora i profili 
    • su monitor a gamma 2.2, va impostato su Standard Windows Color
    • su monitor a gamma 1.8, va impostato su Standard Macintosh Color;
    • su monitor come il nostro va impostato Uncompensated Color

Qui sotto, Convert to sRGB non è attivato, dunque l’immagine rimane nel suo profilo che è ProPhoto. I preview sono:

– in alto a sinistra l’originale in ProPhoto; in alto a destra la simulazione Uncompensated Color;

– in basso a sinistra la simulazione Standard Macintosh Color; in basso a destra Use Document Color Profile.

A questo punto possiamo salvare l’immagine in un file, che sarà un file JPEG con una immagine RGB con profilo ICC incorporato.

Ancora un paio di cose. Più la qualità del JPEG è bassa (cioè maggiore è la compressione) meno accurata sarà la eventuale conversione di colore. Poi, quando si agisce nel secondo menù e la finestra è in 4-up, cioè come nell’immagine in cima a questa pagina, bisogna dare il comando Repopulate Views per applicare a tutti gli ottimizzati le impostazioni.

Nella prossima pagina (clic qui sotto a destra) si può controllare se il nostro browser supporta i profili ICC nei JPEG (a patto che ci siano, naturalmente).

Mauro Boscarol

18/8/2008 alle 12:04

Parole chiave , ,