Nella serie 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
- Uncompensated Color;
- Standard Windows Color;
- Standard Macintosh Color;
- 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:
- i numeri RGB sono mandati al monitor senza essere modificati (cioè non viene fatta compensazione monitor);
- all’immagine viene assegnato sRGB e viene fatta la compensazione a monitor;
- all’immagine viene assegnato Apple RGB e viene fatta la compensazione a monitor;
- 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:
- 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);
- 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;
- 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;
- 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).
Torna all'indice di Gestione colore per il web
8 commenti
Vuoi fare un commento a questo post?
Devi essere collegato per scrivere un commento.
Mi sembra che al punto 1 sia stato ingannato da PS. Mi spiego: ok scegliere “Use Document Color Profile” per la compensazione a monitor dell’immagine originale (quella di sinistra per intenderci) ma non va bene per quella ottimizzata. Secondo me il giusto è “colore windows standard”, provi con un’immagine in Prophoto dove il comportamento è meglio visibile. Ovviamente “Converti in sRGB” deve essere attivato e si deve anche nella finestra di anteprima se manca la spunta. Impostando “Use Document Color Profile” su immagini in Prophoto si ottiene lo stesso risultato che aprire l’immagine in PS in sRGB e assegnare il profilo Prophoto.
Mi sembra che questo comando funzioni come un “assegna profilo”, solo di gamma con le prime tre opzioni, anche di primari nell’ultima. Penso che bisogna scegliere “colore windows standard” perchè questo è il gamma dell’immagine finale convertita in sRGB (2.2)
L’inganno è che con le immagini aperte in salva per web già in sRGB il problema non viene a galla perchè il profilo è in gamma 2.2, dunque un opzione vale l’altra.
Sbaglio?
Marco
MN
10/9/08 alle 12:45
E’ vero, i comandi dei menù si comportano diversamente per l’originale e per gli ottimizzati. Ho fatto un po’ di esperimenti e ho provato a riscrivere la pagina tenendo conto delle tue osservazioni. Spero che adesso sia venuta meglio. Grazie.
Mauro Boscarol
10/9/08 alle 17:29
Le mie prove non coincidono, dunque nemmeno le conclusioni.
Ho fatto una prova con un profilo rgb personalizzato per enfatizzare le differenze.
Sull’immagine originale, non importa se è selezionato o meno converti in sRGB, ma:
1. nessuna compensazione, gamma nativo
2. nessuna compensazione, gamma 2.2
3. nessuna compensazione, gamma 1.8
4. compensazione e gamma ok (quindi questa è quella giusta)
Sull’immagine ottimizzata, stesso comportamento se non metto la spunta su converti in sRGB: profilo non onorato nei primi tre casi con differenti gamma, tutto ok invece con “usa profilo per colore documento”.
In caso di spunta su converti in sRGB il profilo è onorato (dunque va attivata), ma:
1. l’immagine ottimizzata è in gamma nativo
2. immagine originale e quella ottimizzata sono uguali in tutto.
3. l’immagine ottimizzata è chiara (gamma 1.8)
4. l’immagine ottimizzata è completamente sballata
IMHO se vogliamo sfruttare la potenzialità del comando si può arrivare in salva per web con immagini in qualsiasi spazio di colore, non dobbiamo per forza avere una fotografia in sRGB, frequente l’editing in AdobeRGB, ci pensa salva per web a convertire e a fornire l’anteprima della conversione, compensazione a monitor e clipping di colore compresi, ma: l’anteprima produce l’immagine che lo vedo in Photoshop solo se converti in sRGB e colore windows standard sono selezionati e così sono sempre a posto in qualsiasi caso.
Come ha detto comunque, qualsiasi cosa scegliamo per la simulazione non influenza il risultato finale, le uniche due opzioni obbligatorie sono converti in sRGB e allega profilo colore.
Marco Noldin
MN
11/9/08 alle 00:27
Allora vediamo un problema alla volta, che forse riusciamo a venirne a capo. Partiamo dall’immagine originale.
Ho rifatto adesso l’esperimento con una immagine (un quadrato verde in ProPhoto), e mi risulta che il menù in alto:
1) manda i numeri RGB direttamente al monitor, quindi niente compensazione;
2) manda certi numeri al monitor, che sono gli stessi mandati da Photoshop quando all’immagine è assegnato sRGB; quindi, per me, *assegna* sRGB come profilo di origine e compensa al monitor;
3) come sopra, sostituendo sRGB con Apple RGB (ho provato anche con Generic RGB, che è il profilo ufficiale di Apple, ma quello non va bene);
4) come sopra, ma assegna ProPhoto (cioè il profilo dell’immagine originale) e compensa a monitor.
I numeri che mi vengono nella scheda video del monitor sono proprio uguali identici sia quando è Photoshop a compensare e quando è Salva per Web.
Quindi sull’immagine originale direi che è così, cioè 1 non fa compensazione monitor, 2, 3 e 4 assegnano un profilo (rispettivamente sRGB, Apple RGB, quello dell’immagine) e fanno la compensazione monitor.
Se questo è pacifico possiamo vedere il resto.
Ciao, grazie.
Mauro Boscarol
11/9/08 alle 02:36
Gulp, si confermo, è così.
Marco
MN
11/9/08 alle 11:44
Per quanto riguarda la seconda parte, il tuo workflow mi pare corretto se si tratta di partire da una immagine con profilo qualunque ed arrivare ad una immagine sRGB convertita da Save for Web.
Se invece si vuole implementare un workflow che mantiene il profilo originale (che per esempio Safari e Firefox supportano) mi pare che vada disattivata la conversione in sRGB, e in tal caso
1) simula un browser che non onora i profili su un monitor come quello che stiamo usando
2) simula un browser che non onora i profili su un monitor con gamma 2.2;
3) simula un browser che non onora i profili su un monitor con gamma 1.8;
4) simula un browser che onora i profili incorporati in JPEG.
Mauro Boscarol
15/9/08 alle 01:34
Salve. Ho una domanda riguardo la riduzione delle immagini.
In genere un’immagine per essere preparata per il web deve essere ridotta di dimensioni. Ho letto da qualche parte che usare la normale procedura “ridimensiona immagine” in photoshop non riproduce un buon risultato perchè il ricampionamento avviene in un colpo solo, mentre andrebbe fatto per passi successivi, tanto che qualcuno usa plugin ti terze parti per photoshop. Se invece la riduco con “salva per il web” ottengo risultati migliori?
Grazie
Andrea
Andrea Taschin
26/7/10 alle 14:39
Il campionamento in più passi non può che peggiorare l’immagine.
Se hai altre domande falle sul forum http://www.boscarol.com/forum
Grazie
Mauro Boscarol
11/8/10 alle 14:35