Chaos and Colorspace

I spend a lot of time fine tuning my images for my blog to get them to achieve the right balance of color and light. While it’s certainly not the hours that some professionals spend, it’s still probably the most time consuming part of food blogging for me (with the exception of some of the actual cooking). I want colors that are vivid, life-like or sometimes very subtle, to fit the mood I’m trying to achieve and I’m willing to tweak and futz with them until they are, in my eyes, just perfect.

So, imagine my disappointment when I went to try out Firefox and pulled up my blog and found, instead of the beautiful rich colors I was expecting, photos that looked dull and dead.

I certainly know that getting color right is hard… different displays show colors in different ways depending on how they are calibrated… different lighting conditions in the room also play a big role… but I was looking at the same photo on the same web page on the same computer in two different browsers and getting very different results:

STW browser color issue

The image on the left is in Safari on the Mac, the browser I normally use as do only about 8% of my readers. The image on the right is from Firefox, which makes up about 12% of my readership.

Firefox users: I’m sorry! I hadn’t realized how crappy the photos looked for you! You aren’t seeing rich maroons in the salad or the golden brown of the parsnip cake… all you get are the vague notions of color, the hint that perhaps the cake was cooked enough. You really should be reading this post on Safari so you can see what you are missing!

To my biggest group, IE users, I think you are ok. I can’t exactly tell, because IE is no longer supported on the Mac… but the photos looked pretty good when I checked them on my PC.

The issue is color space. A color space is a map of colors created by different variables plotted on different axis. There are lots of different color spaces, and each one has slightly different colors as well as a different number of supported colors (this is called a gamut). Everything has a gamut… the photo itself, the display’s capabilities and even the capabilities of the software. Ideally, you want the source (the photo in this case) to have all of its colors contained in a smaller gamut than its output (the display) gamut. When they don’t, you get color loss. Of course, if the output gamut is a lot bigger than the sources gamut, then you aren’t taking advantage of all the colors that you can. It’s a balancing act. Understanding color spaces is highly scientific with a bit of voodoo on the side for kicks… I know several people that I used to work with that have pretty much devoted their lives to this art… mapping out Reds, Greens and Blues (RGB); Hue, Saturation and Luminosity (HSL); Cyan, Magenta, Yellow and Black (CMYK) and many, many others. I consider myself lucky that I am not one of them.

For my purposes, I only care about one of these… RGB. Actually, I care about only certain variations of RGB… namely sRGB and Adobe RGB. sRGB was designed in 1996 to support monitors at that time. As monitor technology has improved, the number of colors that modern displays can show has greatly increase. So today, sRGB seems very limiting. The canvas can accept a lot more colors than are on the palette. Adobe RGB was developed in 1998 so it’s a little bit newer and holds more colors, particularly in the greens and cyans. It still isn’t the best overall color space, but it’s become a standard for digital photography. (For those curious, the LAB colorspace offers twice as many colors as Adobe RGB and was designed to map out all of the colors that the human eye can see… it’s almost entirely a mathematical problem, and all representations are inherently inaccurate, but there’s lots of equation fun to be had in the Wiki post.)

What it comes down to is that neither sRGB or Adobe RGB is a perfect solution… for software that supports Adobe RGB, the images can look deeper and richer. But, the software has to support it to achieve the effect. When it doesn’t, the images actually look worse. sRGB is a baseline standard, so you can be fairly confident that if you use this color space, you now what your images will look like, even if you can’t get them as rich as you would like. Predictable or Rich. You have to pick.

Some software, like Photoshop and Safari, can understand both of these colorspaces and display the color accurately as intended… so you don’t have to choose. However, other software, like Firefox, doesn’t support Adobe RGB at all, so as in the example above, any photos saved with this color space will look washed out. Files saved with an sRGB color profile may still look a bit different from program to program, but they will come a lot closer because they map better to having “no” color information.

Here is the same photo from above saved with an sRGB color profile instead of Adobe RGB:

STW RGB Color profile comparison
Click for a better view

The Safari version still looks good… in fact, it’s kind of hard to tell the difference. The Firefox sRGB version looks acceptable…there’s a bit more gold to the cake and a bit more red in the lettuce. It’s still not as vibrant as the Safari version, but at least it’s not as grey as the one on the far right with the Adobe RGB profile.

If you take photos in JPEG format on your camera, they will most likely be set to the sRGB color space by default. You probably won’t need to do anything to them, although it wouldn’t hurt to check them out in Firefox to make sure that your camera doesn’t embed a proprietary color space.

If you are edit your photos iPhoto 5, even if you start with JPEGs, your color space will change from sRGB to generic RGB (which is similar to Adobe RGB). I don’t use iPhoto, so I don’t know if this has been fixed in v6 or not, but I’m betting it’s buried even if it is. If you are editing your photos in iPhoto, you should definitely check to see if it’s changing your color space. If it is, you’ll end up needing to use a different tool to do your editing.

If you take photos in your camera’s Raw format, it’s likely that you will be using the wrong color profile for images for the web.

In Adobe Camera Raw, it’s easy to make the change. In the bottom left corner, there is a selection for the default color space:

STW color space

Simply switch this from Adobe RGB to sRGB, and proceed on with the rest of your workflow. Once you’ve set this, you shouldn’t need to change it again. You should also be able to change this setting within Photoshop (or Photoshop Elements).

Windows applications, such as Picasa and Microsoft Digital Image Suite should save in sRGB by default.

This isn’t the only problem with getting accurate digital color, or even the hardest problem… tackling the differences in displays is a huge issue that I can’t quite fathom how someone is going to solve. But, at least this is one that it’s easy to imagine being fixed. If the browser folks started supporting the various standards (Is various standards an oxymoron?) that are available today, it would make a huge difference. You can bet I’ll be pinging my IE friends to make sure that better color support is built into the next versions of IE… if anyone out there knows any Firefox developers, please, plant the seed! Either that, or all you Mac users should switch back to using Safari!

Update: If you want to see if your web browser is color managed, here is a quick tutorial that shows you the differences between properly managed and unmanaged images. If you don’t see a difference, than your browser isn’t showing you everything that should be.

Technorati Tags: , ,