In part 4, I will address the issues that arise using a wide
gamut aRGB monitor when converting images from the aRGB colourspace
to the sRGB colourspace used by the internet.
You need to get this right from two perspectives, firstly your
own, so you can see your images presented correctly in a web browser
on your wide gamut screen, but also and perhaps even more importantly,
how they will look to someone else viewing them on the internet
- aka your audience !
So, back to Photoshop. You have finished editing your masterpiece,
resized it to your chosen dimensions and are now ready to save
it for uploading to the internet, emailing it etc. You click File>
Save for web.
In the example below you can see two imges side by side in the
2-up mode of the "Save for web" dialogue box. On the
left is the Original image which looks correct. On the right is
the image with the convert sRGB box ticked and it looks over-saturated
on the kingfisher's breast.
Here is a closeup of the top right of the dialogue box showing
the settings used.
The preview is set to Monitor colour - which we know is aRGB on
our monitor. The "convert to sRGB" box is ticked as
it should be as we want to post this image on the internet in
the all sRGB environment. So we have an sRGB image that on
our monitor would look oversaturated as it is. However,
it would not look oversaturated on somone else's small gamut RGB
monitor regardless of whether their browser was colour-managed
or not. This covers 95% of users. So this image situation does
not arise with anyone else, just us and the remaining 5% using
a high gamut monitor. As they have hopefully already found their
way around this issue by using a colour managed browser (plus they
should be more experienced anyway if they they have shelled out
for an expensive high gamut monitor).
However, we know that the original (left) image looks fine and
identical to the one it came from in Photoshop before we clicked Save for web.
If you now click the "convert to sRGB" tick box on and
off you will see that the image reverts to looking correct. This
seemed puzzling to me at first as I hoped to see a good optimised image
in the right pane ready for posting on the internet. But think
about it, when you tick "convert to sRGB" you are looking
at a converted sRGB image on an aRGB monitor so it looks oversaturated.
Untick the box and the image is still aRGB like the original and
looks fine on the aRGB monitor.
So previewing in "Monitor colour" looks alarming and
serves no useful purpose whn using a wide gamut monitor. I therefore prefer to set preview to"Use
document profile" where both images look correct and the
same. It doesn't provide any more useful information but I don't
like to see that oversaturated image as it looks so wrong!
The critical boxes to tick are "Convert to sRGB" and
"Embed Color Profile". So let's consider these in turn.
First, why tick the convert to sRGB box ?
By now this should be an easy question, because our image is aRGB
and it is about to enter the internet which is an all sRGB environment.
If you use a non colour-managed browser such as the current Internet
Explorer, it can't read the sRGB tag so if you uploaded an aRGB
image it would not recognise the fact and would assume that it
was sRGB. It would therefore appear de-saturated (washed out).
Now this is not good as it could affect a lot of viewers on sRGB
Warning again: NEVER POST AN aRGB IMAGE ON THE INTERNET. Only people working in aRGB with a colour managed workflow will see it correctly. In other words, hardly anyone!
If you posted an aRGB image on the internet and viewed it in
Firefox (Colour managed) then it wouldn't matter as the tag would
be read and the image presented correctly. If only all browsers
performed properly executed colour management this wouldn't be an issue.
Finally, why tick the "embed color profile"
Firstly I should say that this is irrelevant to users of sRGB
monitors or people using a non colour- managed browser as
a) Their monitor is working in sRGB anyway regardless of whether
the browser correctly identifies the embeded tag, so there is
no conflict and
b) A non colour-managed browser can not read the embeded tag.
So the the image will fortuntely present fine to the 95% ,
just not to us masochists using wide gamut monitors! As wide gamut
monitors become cheaper and more people buy them it is important
that the browser designers come to grips with all this.
If we forget to tick this box and someone like ourselves in the
high gamut brigade opens the now "untagged" sRGB image
Firefox will assume monitor RGB ie aRGB and the image will look
oversaturated. UNLESS WE HAVE LOADED THE FIREFOX EXTENSION (as
described in Part 2 of this article).
Preview button in Save for Web
I have not mentioned the Preview button at the bottom of the
Save for web screen. This is intended to enable you to check your image in your
browser of choice. You can set it up for your own Firefox browser or check the image in a non colour-managed browser.
However, there is no point in doing the latter however, as we know that
the image will (and should) look wrong on a wide gamut monitor in
a non colour-managed browser. Other people won't see it like this for all the reasons explained above.
However, if you preview the image in Firefox it should look fine to you and will do to anyone else regardless of browser.
In the last section I will summarise all the settings discussed
in this article into one short checklist.