Understanding Color Profiles
The other day I read a post that my friend and fellow “big daddy” Mr. Jason Morrison posted to his photo/design blog. He noticed that when he viewed images in different browsers, they sometimes looked different. If you are interested in the details, he posts more about it here, but the gist is that he was seeing the difference in how different web browsers managed the image’s embedded color profile. If you are planning on working with images in any depth at all, it’s important to understand what a color profile does and what you need to do to make sure your images look the way they should when posted online, viewed on your monitor, or when printed. Keep reading to find out the dirty details.
First of all, I promise you that once you understand what a color profile is that you will have no issue using it. It sounds a little intimidating at first, but it’s really quite simple. Because computers, browsers, monitors, and printers all talk in 1′s and 0′s, they have to speak the same language or they will get confused. Think of it like this: if I go to Sao Paulo and someone starts giving me directions in Portuguese, I’m going to be lost. I’ll have no idea what they are telling me to do. I might try my best to understand using my native language, but when it comes down to it, I’m very likely going to get lost. Think of the color profile as my Portuguese-to-English translator. When someone speaks to me in Portuguese, I have my translator to tell me what they say. Then I understand what I need to do.
Color profiles are sort of like the translators of digital images. There are many different profiles out there. When you create a digital image, you pick one of these profiles for your image to use. The profile is the map of which combination of 1′s and 0′s makes a specific color. Then, wherever that image goes, that color profile tells the printer or browser how to display the image properly. The only catch is that the device on the other end has to understand that color profile. A few browsers will now manage different color profiles, meaning that they look at the profile embedded in the image and display the image according to that profile. This is called Integrated Color Management. As Jason learned, not all browsers do this by default. If you enable color management on your browser, you will see images as intended. Once upon a time, all browsers defaulted to using the sRGB color profile to display images. That meant if you rendered your photo with an AdobeRGB or other color profile, the colors would not look right if you viewed your image on the web. My personal opinion is that you should still use sRGB when loading images on the web. This will ensure that the majority of internet users view your images correctly. For those using a browser with Integrated Color Management enabled, the browser will see the embedded profile and use it to display the image correctly.
So how does the color profile know the correct color to display? Well, the color profile itself is just a translator, or like I tell my Get to Know Your SLR students, it’s like a decoder ring for the image.
Here is what the sRGB color profile looks like when plotted:
Here is what the AdobeRGB profile looks like when plotted:
As you can see, they look similar but they are really not the same. The Adobe profile is a little wider, so it literally has more colors to choose from. To simplify it even more, let’s make an example.
Let’s say that we have two color profiles, each represented in the little tables, Profile A and Profile B, below. Profile A and B both have the same four colors in them, but the profiles are very different. We have a digital image that is saved using Profile A as its color profile. The first pixel in that digital image is coded to display as (X=01,Y=11). So we look at the Profile A table, and we see that (X=01,Y=11) is red. Now, let’s assume that we open that image in a browser that does not perform color management. Rather, this browser assumes that every image is saved with Color Profile B. If we look at Profile B, we see that (X=01,Y=11) is yellow. This means that when the browser opens the image, it will display that pixel as yellow and not red. Oh, no! If the browser were managing color profiles, it would look at the image, see it is using Color Profile A , and would know that the first pixel should be red, and therefore would display that pixel properly.
Now, in actuality, color profiles are far more complex. They work on three axes and not two, but essentially they work the same way as the example above. Some color profiles may have data that crosses like the example I just gave, or some may have colors that other profiles do not have at all. In those cases, that color is left out completely. This is called clipping. The important thing is to understand what the profile does and to make sure that the devices using the image understand the profile. If you look at the other profiles listed in the images above, you will see there are many other profiles. Some are specifically for printing with online printing services like AdoramaPix. They specify profiles for the different printers they use as well as for the paper the images are printed on. You can download those files, install them like I did above, and when you render your image for print, you would just pick the proper profile for the type of print you are doing. You would need to use the specific profile the printing company recommends for the printer and paper they use. This works the same way if you are printing at home. Make sure to use the proper color profiles recommended by the manufacturer for the paper and ink you are using. For printing at box stores, it’s safe to assume that their printer will understand the sRGB profile.
For some more info, see below for which web browsers offer Color Management and which ones have it turned on by default.
| Browser | Supported | Enabled by Default | Download |
|---|---|---|---|
| Safari | Yes | Yes | Click here to download |
| Internet Explorer | No | N/A | |
| Firefox v3.0 | Yes | No, can be enabled in about:config file | |
| Firefox v3.5 or newer | Yes | Yes, limited to ICC v2 profiles | Click here to download |
| Chrome | No | N/A | |
| Opera | No | N/A |
.
Still not sure if your browser supports color profile management? Check out the three images below. Each is encoded with a different color profile. If they all look the same, then you are good. If the color looks different from image to image, then your browser is not supporting the tagged color profiles in the images.
Before I end, a few other quick points. First, even browsers that support color management require that the image have the ICC Profile embedded in the image. If someone renders the image in a profile other than sRGB and does not embed the profile in the image, even browsers with color management will not display the image as the creator intended. Second, what I have touched on is just the tip of the iceberg when it comes to color management. Even when a browser or printer renders an image using the proper profile, you must also have a calibrated monitor to make sure that what you see on the screen is what you get when you print or move to another calibrated computer. Lastly, don’t get super-obsessed trying to work all this out. Even though the science behind it might be a little confusing, you really only need to know four steps depending on your work flow:
- Use a colorimeter or spectrophotometer (aka, monitor calibrator) to create a custom ICC Profile for your monitor (I’ve discussed this before here).
- Download and install the ICC profiles for any printer/ink/paper you use (both your own or commercial printers). Render images for print using the proper printer/ink/paper ICC Profile. If you are printing the same image on different papers or on different printers, you will need to render separate images with the proper corresponding ICC Profile for each combination of printer/ink/paper.
- If you are rendering content for the web, use the sRGB color space. This will make sure anyone using browsers without Color Management will see your images correctly. If you insist on using a different color space, make sure you embed the color profile so browsers with built-in color management can display them properly.
- If you are printing at home and you have a spectrophotometer, use it to create a custom ICC profile for all your printer/ink/paper combinations. Otherwise, check for proper ICC profiles from your printer/paper manufacturer and render your images using the profiles they supply.
Hopefully this helps clear up some of what color profiles do. As I said before, they are just the decoder ring for what colors should be used in your image. Now that you understand them a little more, you can make sure that you use the proper profile for each situation.
2 Responses to “Understanding Color Profiles”
Dubtastic | Photography, Digital Art, Tutorials, and Helpful Things… - April 30th, 2010
[...] Fellow photography guru, Dan Edwards, has written a really great article explaining color profiles and how the heck to understand them. It is well worth a read. Now if he [...]
This is a really great article, Dan. The details are what I was hoping to see and you have explained them very well.
As someone who wants to put the “correct” image out for the world to see, I am always fearful that some process, profile, or browser will somehow manipulate or alter the way I originally intended the image to be viewed. While I have not had problems with what I see on my monitor and what I see in print, I certainly have seen issues with the files I process and what ends up on the web.
I won’t even touch what Facebook does to compress photos that are uploaded to their site.
I worry that even though I am saving images for the web in the sRGB color space that depending on what browser and setup the user has, they may or may not see the file as I intended for them to. Given the variety of browsers, monitors, and other equipment, I am not really sure that one can ever have total control over that.
Leave a Reply