Ophrys Photography

Wildlife photography by John Devries, Kent UK. Inspirational images from nature.
About us
Image of the
Free images
Site Map































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 screens.
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" box ?
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.