Color Profiles in Firefox 3

Deb Richardson wrote up an interesting piece today describing color profile support in Firefox 3. The result of a color profile is a more-accurate mapping from an original set of colors to better match the intended rendering. Profiles can be provided by the operating system (to provide better color distribution globally) or even locally by individual images.

For example, observe the following image which compares the difference between Firefox 2, Firefox 3 (with color profile support), and an image in Adobe Photoshop:

There is a noticeable difference between the rendering of the image in Firefox 2 compared to both Photoshop and Firefox 3 (in which they are rendered identically). All of this is due to the fact that Firefox 3 and Photoshop use the additional color profile information to get a better mapping of the resulting colors.

There’s one tricky point, however: Color profile support is disabled, by default, in Firefox 3. However, it can be quickly enabled by installing the Color Management Add-on or by twiddling some options in about:config.

The reasoning for the feature being disabled was outlined for two particular issues:

1. There was a large 10-15% drop in performance when this feature was enabled. The extra time spent on large images began to add up quite quickly. Obviously this will be a point that’ll be worked on in upcoming releases – but introducing a regression that large was pretty much unacceptable.
2. Plugins (such as Flash, Silverlight, Quicktime, etc.) did not do color profile correction, causing rough mis-renderings to occur. This correction is, unfortunately, left up to the plugins themselves – leaving this out of the realm of the browser itself. It’s unclear as to how this will be resolved.

At the very least, however, you can grab the Color Management Add-on with your copy of Firefox 3 and begin to view your pictures with an extra level of color and crispness.

Posted: April 29th, 2008

20 Comments (Show Comments)

1. John Resig (April 29, 2008 at 11:37 pm)

   Note: Safari does appear to have color profile support for images that have the profiles embedded within them. It’s my understanding that the profile support within Firefox 3 goes above and beyond this, utilizing the color profiles provided by the operating system, as well.

2. Bertrand Le Roy (April 29, 2008 at 11:57 pm)

   Yes, I was going to comment about the support in Safari. Their comprimise looks reasonable. As a photographer, I really appreciate anything browsers can do to respect the work of image creators.

3. thornton (April 30, 2008 at 2:55 am)

   Is that “rough mis-rendering” also apparent in Safari?

4. Damjan Mozetič (April 30, 2008 at 2:59 am)

   Besides the performance and plugin issues, so far so good, except IE still seems to ignore color profiles. Any news on that front?

5. Angus (April 30, 2008 at 3:17 am)

   Safari will show colour difference if you make an image from mix of formats, some that can contain colour profile and those that cannot (eg gif). I had this happen years ago. I would say the same for Flash content, Flash has no ability to embed profiles as far as I’m aware so how can Safari guess whether it might have started life as sRGB or AdobeRGB etc. The biggest problem then is using file formats that do not support colour management, or at least mixing them with formats that do. Other than an update of those formats, I don’t see how either Safari or Firefox can fix the display.

6. elmimmo (April 30, 2008 at 3:42 am)

   @Angus Foreign formats that need plugins cannot be helped I guess. Still there is absolutely no reason for anyone to still use GIF (except for animations –does anyone still like those?). PNGs no using features beyong what gif provides have been supported for ages by all major and minor browsers. Why Photoshop does not give the option to embed color profiles in PNGs (a format which does support color profiles) is beyond me, though.

7. Wired Earp (April 30, 2008 at 3:50 am)

   Misrendering can happen even with no plugins involved. I realize now that my trouble with Safaris color rendering was caused by residue color profiles in the Gimp working files. I can figure out how to control these profiles and still do composite image overlays in webpages. Sounds like a reasonable compromise alright; the argument against color management being that modern displays show bogus colors anyway.

   Hope that however FF3 decides to go “above and beyond” this, it will still be possible, taking the proper care with color profiles, to blend image borders seamlessly into backgrounds. Hypothetical features such as automated contrast enhancement may benefit a Flickr style photo gallery, but it can ruin a carefully arranged website layout.

8. ArAgost (April 30, 2008 at 6:11 am)

   Firefox’s effort in color management is really to be appreciated! FF is a big player in the browser “market” (bigger than Safari) and this is an important step towards a more color-aware web. Still, it seems to me that there are a few things to woek out.
   Look at this screenshot I took:
   http://img527.imageshack.us/img527/8654/immagine1gi3.png
   from left to right: Safari, Camino, Omniweb, Firefox 3 (w/ color profiles on, of course).
   Can anybody explain this?

9. Philippe (April 30, 2008 at 6:25 am)

   @ ArAgost: WebKit (Safari, OmniWeb) only does colour correction for images. Gecko (Camino 2.01a, Fx 3) does it for everything (images, HTML and CSS colours).

   Overall, it works great. I personally don’t see much slowness in pageload (JRessig, do you have some tests somewhere? Tests that I can run from home, that is. I know about the TP test on the Tinderboxes), but I’m using a Mac. Maybe the situation on Windows is different. That wouldn’t surprise me. Large images cause the same problems with or witout ColorManagement. Those can cause slowdowns anyway.

10. Der Rote Hund (April 30, 2008 at 7:00 am)

    I remember IE 5/Mac had a preference where you could enable ColorSync. I left it disabled most of the time, though, because it usually caused “rough mis-renderings” similar to what seems to happen with FF3 with color-correction and Plugins.

11. Joe Golike (April 30, 2008 at 10:32 am)

    As a web designer, the practice I use is to NEVER embed color profiles in the images I create in Photoshop. While working on the image in Ps, I use my monitor’s color-space (for me that’s the iMac profile). Then when I save for the web, I save it without embedding a color profile. This seems to guarantee an image with colors closest to what I see on my screen in Ps, as well as being uniform in all browsers. I like that the FF team is pushing the envelope to get color-space support working. But do you guys think that this will matter much until the other major browsers support it as well?

12. Dan (April 30, 2008 at 11:52 am)

    @elmimmo With regard to PNG: I wish that we could use PNGs instead of GIF. The anti-aliasing and alpha channel are great. Sadly IE6 is still quite common. At http://www.spokt.com 20% of our users use IE6. *sniff*

13. SSP (April 30, 2008 at 1:47 pm)

    hallelujah!!

14. Ryan Cannon (April 30, 2008 at 3:00 pm)

    @Dan PNG-8 works fine in IE6 and is usually quite a bit smaller than GIF. The problem is the PNG colors can sometimes not match CSS colors–see http://www.gballard.net/psd/saveforwebshift.html

    If the Internet isn’t color managed, it creates a somewhat stable baseline for developers. As the Internet becomes color-managed–in different ways by different user agents–this is going to be a very nasty headache (moreso than it is already).

15. Ryan Cannon (April 30, 2008 at 3:05 pm)

    My apologies, the proper link I was mentioning was the sad story of PNG Gamma “Correction”, http://hsivonen.iki.fi/png-gamma/ although the aforelinked article is also a good one to bookmark.

16. keif (May 1, 2008 at 9:33 am)

    Awesome – at first I was going to ask *why* it was disabled, since (IMO) it would give a better end-user experience until I saw how it would tax the user.

    I still look forward to the day where it’s no longer an issue and this stuff is just default enabled.

    Of course, I also look forward to the day I don’t need to develop for IE6…

17. Scott Johnson (May 1, 2008 at 3:55 pm)

    How does one go about creating color profiles to supply to Firefox? I installed the color manager, but I didn’t have a profile to direct it to, so I guess I’m using the default. The default is not pretty. I need better color before my eyes start bleeding.

18. kb (June 6, 2008 at 4:43 pm)

    So, why is it in Firefox 3, with color mgmt enabled, that CSS HEX colors are changed from what they are in the CSS style?

    When I use a tool like pipette or Digital Color Meter to sample the color, the HEX values are off from the actual values in the stylesheet when I’m viewing them in FF3 with the color mgmt on.

    -k

19. Reuben (June 18, 2008 at 2:15 pm)

    I’m confused, because for me, Firefox 3 *doesn’t* look the same as the image in Photoshop — I wish it did. I’m using the sRGB color space for everything, and for some reason in Firefox3 my jpegs seem brighter with more saturated colors. Anyone know why?

20. Jacob Rus (June 20, 2008 at 2:24 pm)

    kb: This is correct behavior. The CSS specification demands that colors be assumed sRGB unless stated otherwise. The result is that the “hex values” will vary from monitor to monitor, so that the ultimate appearance remains as close as possible to the same. Without color management (“changing hex values”), no website looks remotely similar on, e.g. side-by-side Mac and Windows machines.

Comments are closed.
Comments are automatically turned off two weeks after the original post. If you have a question concerning the content of this post, please feel free to contact me.