I have previously talked about colour management in the past, and those who are serious about digital photography will need to know about colour management. While it can get technical, colour management is simply the process of ensuring an image is display/printed properly from one device to another.
It can be difficult to explain, but with some of the newer browsers, it is much easier to show how it can affect the look of an image. In this post I’ll show how colour management can change an image, and what you should do about images on your web site/blog.
Preparing for the Examples
Before showing you the examples, it is important to first setup a web browser with colour management. While some browsers support colour management, others may not. The good news is that many people have switched to the Firefox 3.0 web browser, which supports colour management. If you don’t currently have Firefox installed, I recommend that you download and install the browser before continuing.
Once Firefox is installed, you will need to enable colour management. For this we will use an add-on. Use the following steps to install and setup the add-on:
- Open the Firefox browser.
- Click Tools->Add-ons to display a list of add-ons currently installed.
- Click the Get Add-ons icon at the top.
- In the search text box, enter color management and press Enter. The list will populate with the add-ons that match the search. The Color Management add-on should appear in the list.
- Click the Add to Firefox button to install the add-on.
- Once it is installed, you will be prompted to restart Firefox. Click the Restart Firefox button.
- Now we will need to setup a colour profile. If the add-on window isn’t currently open, click Tools->Add-ons and then click the Extensions icon.
- Select the Color Management add-on, and then click Options.
- Ensure the Enabled checkbox is checked, and then click Browse button.
- For Windows, navigate to your Windows directory, and then system32\spool\drivers\color subdirectory. Within that directory select your monitor colour profile. If you don’t have one, then select the sRGB colour profile.
- Click the Open button to select the profile, and return to the options window. Click OK to close that window, and then close the Add-ons window.
Your Firefox browser has now been setup with colour management. How does this affect images? Lets have a look.
Images with Embeded Colour Profiles
For the most part, you won’t notice any difference with web sites whether you have colour management enabled or not. The biggest difference is when images are saved with embedded colour profiles.
The two images below are saved with different colour profiles. The one on the left has been saved with the Adobe RGB (1998), while the image on the right is using the sRGB colour profile.
With colour management enabled, you will notice that both images look identical. This is because your Firefox browser is displaying each image using the embedded colour profile. This is what applications that have colour management capability are able to do.
For the next part of the test disable the colour management addon by simply doing the following:
- Click Tools->Add-ons
- Select the Color Management add-on, and then click the Disable button.
- Restart Firefox when prompted, and ensure that you reload this page.
Alternatively, you could open a non-colour management browser, such as IE6 or IE7, but we will stay with Firefox.
Now look at the two images above. You will notice that they are no longer identical. While the sRGB image still looks the same, the Adobe RGB (1998) image looks rather dull, in terms of color.
Since you turned off colour management, it no longer uses the Adobe RGB (1998) profile to display the colours in the image, so it will try to find the best colour match with a standard profile. In this case the colours don’t match the ones in the Adobe RGB (1998) profile. Why does the sRGB image still look fine? I’ll get to that in a minute. Now lets look at what happens when you don’t embed a profile. You can keep the Colour Management add-on disabled.
Images without Embedded Colour Profiles
Look at the two images below. The image on the left was created with the Adobe RGB (1998) profile, while the one on the right is using the sRGB colour profile. The difference this time is neither image includes the profile in the file.
You will notice that the two images don’t match. If you have been following so far, you may also think that is because the Colour Management add-on is disabled. Go ahead and enable that add-on, and restart your browser.
Once the add-on is enabled, view the above two images again. You will notice that they still aren’t the same. Why?
The reason is the images don’t contain information about their colour profile. Since there is no information, Firefox doesn’t know which colour profile to use, so it attempts to find the best match for the colours. Similar to the first example ,the Adobe RGB (1998) image is rather dull. The sRGB image still appears the same. Why is that?
The Common Profile
While there are many colour profiles available, there is one that is the most common for images displayed on the Web: sRGB. This profile is the one used by digital cameras to save JPEGs, and is the default for monitors to display colours. When you save an image using the sRGB colour profile, it should display properly whether embedded the image or not.
This brings me to my next point. When saving JPEGs, don’t embed the sRGB profile. Embedding the profile will increase the size of your image by about 4KB. Since the browser will display the image properly without the profile, you don’t need it.
This is the reason the two sRGB images shown above looked the same with and without the Colour Management add-on enabled
Summary
This post talked about colour management, and how colour profiles affect how the colours of an image are displayed. While photo editors are able to manage colour profiles, many applications, including some web browsers, cannot. When saving images for the Web, you should stay with the sRGB profile, and don’t embed the profile in the file.