AnandTech Guide to Better Photos: Post-Processing

Color Space

Color space is a topic that can and does fill entire web sites and books. In fact, it can easily give some people headaches and hours of frustration while trying to get their images to look the same on different mediums (print, screen, etc.). At the beginning of this guide, we recommended setting the color space to Adobe RGB 1998 if your images were shot in the Adobe RGB color space. Let’s say that you started out editing an image in Adobe RGB, but now you want to upload that same picture to your web site. The most common mistake that people make is to just upload the image without changing the color space to sRGB. Without giving you a headache, we are going to show you how to get your images to look right on the web.

First of all, you should know that these color space issues mostly arise from the ability of some cameras (mostly higher-end) to shoot in the Adobe RGB color space. If your camera only shoots images in the sRGB color space, you should just leave Photoshop’s color space as sRGB and be done with it. By doing so, you won’t need to worry about conversion for the web.

Whenever you save an image in Photoshop or Elements, the dialog box will have an option to tag the file with the ICC (International Color Consortium) profile. The screenshot below is from Photoshop CS, but it may not be available in some earlier version of Photoshop.

“Save for Web” dialog showing ICC option

You might be thinking, “Great, so I just need to check that box?” Unfortunately, it’s not that easy. The problem is that most web browsers are not “color aware”. This means that they totally ignore the embedded ICC tags and assume that all images are sRGB. On PCs, IE, Firefox, and almost all other browsers, they are not color aware. On Macs, Safari will recognize the embedded profile and display the image appropriately. So, what happens when you save your Adobe RGB image and throw it on the web without converting it to sRGB? Below is an example of an untagged Adobe RGB image compared to an untagged sRGB image.

Original image is untagged Adobe RGB
Rollover image is untagged sRGB
Hold mouse over image.

Notice that the original Adobe RGB image appears less saturated and flat compared to the correctly displayed sRGB image. Now, let’s see what happens if we embed the color profile into both the Adobe RGB and sRGB images.

Original image is tagged Adobe RGB
Rollover image is tagged sRGB
Hold mouse over image.

Assuming that you are viewing this in a non-color aware browser, you can see that the tags make no difference. The browser does not even process the embedded color profiles and just assumes that all images are sRGB. This works fine for the sRGB images, but incorrectly displays the Adobe RGB images. If you take the tagged files above and open them in a color-aware application, they will both display properly because the application will recognize the embedded profiles.

Given that most browsers are not color aware, the only way to win in this color struggle is to make sure that all your images are sRGB before uploading them to the web. Fortunately, this process is very simple provided that you are not using Elements. For some reason, Adobe decided not to include the option to convert color profiles in Photoshop Elements. For that reason, the steps below will only work for the standard version of Photoshop.

1) Open up your Adobe RGB image and select “Image\Mode\Convert to Profile”.

“Convert to Profile” dialog box

2) Select “sRGB IEC61966-2.1” in the “Destination Space” section. Then, select OK.

That’s it! Now, you can save your image and post it on the web. If you use the “Save for Web” option (to optimize the file size), you can check the “ICC Profile” box to embed the sRGB profile. This will add a little bit to the file size, but this way, you can be sure that people with color aware applications will view the image with the appropriate colors.

Hopefully, this color space thing didn’t give you too much of a headache. After familiarizing yourself with the concepts, it will become much easier to think about color space. Unfortunately, there’s no way around learning this stuff if you want to have consistent color in your images. Now that you’ve read through this guide, we are certain that you can apply some of these ideas to your own images to make them better. Even if you just apply the Levels method, you will be on your way to much more impressive results. In future guides, we have plans to cover more Photoshop techniques and tricks. As always, let us know if there is something in particular that you’d like us to cover. Happy Photoshop-ing!