Take advantage of Firefox 3’s color profile support

One of the big complaints I’ve heard from the more photographically inclined about Firefox 2 was the lack of color profile support in the browser. The simplest way to explain color profiles (or embedded ICC) is to look at some examples of images rendered in browsers that don’t support color profiles (in the left frames) and those that do (in the right frame.)

Images provided by SmugBlog.

What do you immediately notice? For me, it was the depth of shadowing. What you being to realize as you look at the difference between the images, however, is how much more “real” the image feels to you; the expanded range of colors really makes the images pop out.

When you’re seeing an image on the web with a color profile in a browser that supports color profiles you’re seeing it in a closer representation to what the author intended. At this time, Firefox 3 and Omniweb are the only browsers to fully and properly support color profiles. Safari has a buggy implementation of it, and Internet Explorer… well, it’s Internet Explorer. They’re still scratching their heads over how to CSS working.

How do I enable color management support in Firefox?

Shockingly, Firefox 3 doesn’t come with color profile support enabled by default. This feature was one of the most praised and eagerly awaited aspects of the new version, ~~so I have no idea why they would chose to not enable it from the get-go.~~ Apparently Mozilla chose not to enable the feature by default over performance concerns. On a page with lots of color profile-enabled images this feature can slow down rendering time.

None the less, enabling color profiles is very simple, you can either:

Install the Color Management extension; keep in mind that the extension is still in the experimental/review phase as of this writing, so you’ll need an account with the Mozilla Addons site to get it.
Alternatively, you can enable profile support by hand, which is actually very simple and the method I recommend. In Firefox 3, type about:config. If you get a warning, just say OK and continue on. In the filter bar, type: gfx.color_management.enabled. It should have a state of “false”. Double click it to turn it bold and toggle it to “true”. Restart Firefox.

You can test if your color profile support was successfully enabled at this site. Another great demo page is over at SmugMug- try loading it in Firefox 3 with color profiles, then Internet Explorer or Safari. Big difference, no?

How do I export my images from Photoshop with ICC profiles?

By default Photoshop does not embed color profiles in images exported using the Save to Web & Devices interface. To enable this, choose the JPEG format and checkmark “ICC Profile”. Simple as that.