Firefox 3: Color profile support (oh the pretty, pretty colors)

[Click on pictures to view different sizes.]

I got my first camera around 1985 or so. It was second-hand Fujica 35mm with a 50mm lens that I purchased for $110. I ran a lot of film through that camera, and used it constantly through all of high school and university, going so far as to process my own film, do my own prints, and work as the photo editor for the school paper. I finally replaced my old Fujica with a second-hand Nikon FM2n (and a handful of used prime lenses) in 1997 or 1998. Since then, of course, I’ve been a digital camera junkie, starting with a 1 megapixel Kodak DC240, then moving up through a host of various Nikon and Canon point-and-shoots until finally scraping together the cash for a proper DSLR, the Nikon D70s. I’ve upgraded once since then to the Nikon D80, and I think this is all the camera I need until Nikon puts out a reasonably priced full-frame sensor model. In short, I’m a bit of a photography enthusiast.

One thing that has always irritated me about looking at pictures on the web is that browsers don’t seem to display photographs properly. And by “photographs” I really mean “colors”. I spend a lot of time tweaking pictures in Photoshop, but when I upload them to my Flickr account and look at them in Firefox 2 the colors aren’t the same — they’re more washed out, dull, and lifeless. It’s a subtle thing, but annoying nonetheless.

Here’s an example of what I mean. The following is a split-photo created from two screenshots — one of my Flickr photos displayed in Firefox 2, and the same photo displayed in Photoshop:

Firefox2-Photoshop-Split

It turns out that these differences are because of something called “color profile support”. Firefox 2 does not include support for color profiles, so the browser renders colors as best it can without doing special tweaks based on your system or custom color profiles.

The good news is that Firefox 3 does include full support for color profiles. The bad news is that color profile support will be turned off by default when Firefox 3 ships. I’ll explain why this is the case a little later.

Here’s a three-split photograph created using screenshots of another of my Flickr photos in Firefox 2, Firefox 3 (with color profile support enabled), and Photoshop. As you can see, the Firefox 3 photo matches the Photoshop photo exactly. This is happy news for photographers.

ColorProfileExample6a

There are two ways to turn on color profile support in Firefox 3. The easiest is to install the Color Management add-on (which will work with Firefox 3 Beta 5). After you install the add-on and restart Firefox 3, color profile support is enabled, and you can specify a custom color profile by going to the Tools menu, selecting “Add-ons”, and clicking the Color Management add-on “Preferences” button. If you do not specify a color profile, the system default profile will be used, which should be OK for most people.

The second way to turn on color profile support is through the about:config page, which is a special page where a huge number of different (and usually hidden) Firefox options can be tweaked. This is not a recommended method for most people — about:config options should only be edited if you are very aware of what you’re doing. That said, if you do want to edit the options there, they are gfx.color_management.enabled and gfx.color_management.display_profile. For more about editing about:config, see the SUMO knowledgebase article, or the more detailed (if slightly out of date) content over on MozillaZine.

Here’s another example photo, this time just Firefox 2 compared to Firefox 3 with color profile support enabled:

ColorProfileExample1

Why wouldn’t you want it turned on?

So, if color profile support is so awesome (and it really is, in my opinion), why won’t it be on by default for Firefox 3? There are two main reasons.

First, color profile support causes a roughly 10-15% performance hit in many of our performance tests. If the images that you’re viewing are of a reasonable size, that’s probably negligible. If they’re large, it could be noticeable. We’re working on improving the performance of this feature so that we can turn it on by default in future releases.

Second, plugins do not currently support color profiles. What this means is if a plugin has been color-matched precisely with other parts of the page, it may no longer match when color profile support is turned on. As an example, here are two screenshots of a plugin displayed on the GuildWars game website, Firefox 2 on the left, and Firefox 3 (with color profile support enabled) on the right. You’ll notice that the background grey on the Firefox 3 screenshot is a lot darker, so the corners and bottom of the plugin no longer match it exactly. This is caused by color profile support being enabled — if disabled, Firefox 3 renders the background grey exactly the same way as Firefox 2.

GW-side-by-side

So, there are currently some trade offs involved with enabling color profile support, and the Firefox 3 developers have opted to leave it disabled by default for the time being. That said, I have been using Firefox 3 with color profile support enabled for months and have never encountered any noticeable performance impact. It is likely that a future version of Firefox will see this feature enabled by default, which will be a happy day as everyone will then be able to see photographs on the web as they were meant to be seen. There will be great rejoicing.

ColorProfileExample2

For more examples of Firefox 2 vs. Firefox 3 (with color profile support enabled) screenshots, check out my Flickr set.

digg_url = ‘http://www.dria.org/wordpress/archives/2008/04/29/633/’;

Advertisements

65 thoughts on “Firefox 3: Color profile support (oh the pretty, pretty colors)

  1. Safari has image color profile support and yet renders that Guild Wars site just fine. I’m curious what Firefox is doing differently that would cause problems on that site.

  2. Firefox color corrects everything except plugins (plugins need to correct themselves!) Images without a profile are treated as sRGB, css colors are treated as sRGB). Safari only corrects images that have a profile embedded in them so it isn’t correcting the background image on the guildwars site.

  3. Hm, the color profile is for the whole screen, isn’t it? and when you print something you use the printer’s profile. So why is it the responsibility of every application to adapt its output to the screen and not the responsibility of whatever is driving the screen (e.g. X on Linux)? Probably I’ve somehow misunderstood how color profiles work, but I thought you go from input device -> input device profile -> “canonical” representation -> output device profile -> output device. So why would applications ever handle anything else than the “canonical” representation?

  4. Has Mozilla considered enabling this by default for certain sites on white-list (Flickr, PicasaWeb, etc.)? This way this kick-ass feature could be enabled by sites/users that really benefit from it without breaking the rest of the web.

  5. Has Mozilla considered enabling this by default for certain sites on white-list (Flickr, PicasaWeb, etc.)? This way this kick-ass feature could be enabled by sites/users that really benefit from it without breaking the rest of the web.

  6. Pingback: John Resig - Color Profiles in Firefox 3

  7. Just tried this out, and I saw one perf problem, rather noticeably:

    With color profile on, go to a picture-heavy page, then bring a few other pages to the foreground and let things linger for a bit. I think you need to wait ’til some imagelib cache times out. Go back to the page, and you’ll see a noticeable lag in displaying the window. Without color profiling, this doesn’t happen.

    Seen on Windows XP, current nightly.

  8. Pingback: Color profile support &laquo b&k m online

  9. Pingback: foxiewire.com

  10. <strong>dria.org » Blog Archive » Firefox 3: Color profile support (oh the pretty, pretty colors)…The good news is that Firefox 3 does include full support for color profiles. The bad news is that color profile support will be turned off by default when Firefox 3 ships. I’ll explain why this is the case a little later….

  11. Pingback: Boycott Novell » Links 01/05/2008: Another Large Migration to Debian GNU/Linux; Ubuntu Upgrade Successes

  12. 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.

  13. The mozilla add-on site does not allow me to register. I always get the message that there are errors in the submitted form. Is there any other way to obtain this add-on?

  14. The mozilla add-on site does not allow me to register. I always get the message that there are errors in the submitted form. Is there any other way to obtain this add-on?

  15. That’s a very nice feature, indeed, but what happens if one has setup its system to use a color_profile on whole screen : do the cumulative color profiles lead to distort the color again ?

  16. Thank god this isn’t enabled by default! Color profile management is great for displaying photographs online (on photoblogs and Flickr and such), but it’s HELL for anyone trying to create a website design mixing CSS colors and, say, PNG or JPEG. When you the very first thing you need is for colors to MATCH, you can’t have you CSS colors rendered directly and your images going though some color management filter.

    Color management is an issue in Safari when you use PNG (open format, supported by the W3C, only way of displaying RVBA images on a web page…). If your PNG file has some color profile information, Safari will apply that color profile to the image, and probably a default Mac color profile to everything else. So theoretically identical colors (say, #442200 and… #442200) won’t match. Solution: strip any color profile information from the image (using PNGcrush for instance), and Safari will apply the same default color profile for both the CSS or JPEG colors and the PNG colors.

    Of course if the image’s color profile is the same as the system default, everything will look ok. But this means that an image authored in Windows or Linux will only match CSS colors in Windows or Linux, and an image authored in Mac OS X will only match CSS colors in OS X. Ouch.

    For color profile management to work for webdesign (and thus for websites…), you need:
    – browsers that support color profile management;
    – browsers that apply a default system color profile when the image bears no color profile information (and of course they need to apply the same profile to CSS colors);
    – plugins that manage color profile in the same way browsers do;
    – image authoring tools that write NO color profile information for images saved for the Web.

    I haven’t done a survey of authoring tools yet, but it seems that most just write the system’s default color profile as color profile information (if the image format supports some kind of color profile information).

    So for the time being I think not enabling color profile management is the right thing to do.

  17. It’s easy to get colours and images to match if the browser corrects them properly and the image is setup properly.

    CSS and HTML colours are defined in the sRGB colour space (and gamma), so the browser needs to draw them in that colour space (Firefox does, apart from gamma I think), Safari doesn’t draw them corrected (but does correct images since it’s actually using system image decoders, which do correct them)

    Images are also treated in the sRGB range if they have no profile, if they have a profile they should be corrected, so it should go like this

    Colours (sRGB) > Monitor (or output device) Profile
    Images (sRGB or embedded) > Monitor profile

    In practice it ends up more like this.

    Colours (Monitor profile) > Monitor Profile
    Images (Monitor, sRGB or embedded) > Monitor Profile

    So we either do it fully or don’t do it at all, only doing half of it (only correcting some colours/images and not others) leads to problems (Like images authored on a Mac showing up in a different shade than the background colour on a PC)

  18. Pingback: Firefox 3’s Color Profile Support « Soray2000’s Weblog

  19. Pingback: The Link Farm | .craig

  20. Pingback: Enhancing Your Color Images With Firefox 3 « Lingua Franca

  21. I wonder if the developers of Firefox have realized that this approach of setting “gfx.color_management.display_profile multiple” fails with multiple monitors? (Each monitor has its own profile.)

  22. I wonder if the developers of Firefox have realized that this approach of setting “gfx.color_management.display_profile multiple” fails with multiple monitors? (Each monitor has its own profile.)

  23. It’s pretty weird. After I activated the color profile, the whole window of firefox has became yellow. So all pages which are normally white appear in yellow.
    There is just the contextual menus which are still like before (with the normal color).

  24. Pingback: Firefox 3, tutte le caratteristiche implementate » Macpod.it

  25. Is their a FF group or other resource were I could get these kind of questions answered for the new capability?

    Windows XP SP3,
    I have 2 monitor profiles , the sRGB IEC61966-2.1 and one for my Viewsonic monitor?

    The control panel color applet lets me associate these monitor profiles with printing and scanning devices. In 25 words or less, what happens when you do this?

    If I want to print from Firefox, what happens, when FF is set up for one profile, my printers default is setup with another. Which profile is used?

    What happens if I select printer properties and change it to use a different color profile than either the default set with the XP color applet or the one set in FF?

  26. Is their a FF group or other resource were I could get these kind of questions answered for the new capability?Windows XP SP3, I have 2 monitor profiles , the sRGB IEC61966-2.1 and one for my Viewsonic monitor? The control panel color applet lets me associate these monitor profiles with printing and scanning devices. In 25 words or less, what happens when you do this?If I want to print from Firefox, what happens, when FF is set up for one profile, my printers default is setup with another. Which profile is used?What happens if I select printer properties and change it to use a different color profile than either the default set with the XP color applet or the one set in FF?

  27. Pingback: Mozilla in Asia » Blog Archive » Firefox 3: UTF-8 support in location bar

  28. I’m not convinced that this is the great leap forward that it should be! It’s very good to have embedded colour profiles in photographs recognised, but if it is to be at the expense of changing CSS colours elsewhere on the page, that is not acceptable. As an example, I have a page with a cream background, set in the style sheet as #FFF7E7; in Firefox 3 rc1, the colour picker shows that it’s being rendered as #FFEDE1, an unpleasant pinkish shade. Not good. Has anyone any answers to this?

  29. I don’t like giving up on an issue and seem to have almost resolved the problem of CSS colours being changed in FF3. Using the Options button of the Color Management 0.3 add-on, I had originally left the “Path to color profile” box empty so it defaults to the system profile. Subsequently, I entered the path to the correct monitor profile (C:WindowsSystem32spooldriverscolorHP_LP2065_LCDMonitor.icm), and CSS colors rendered correctly in rc1. Today I installed rc2, which said that Color Management add-on was not compatible and would be disabled. However, it is not disabled. But, the CSS colour is a bit out again, this time my FFF7E7 background renders as FEF7E7. Odd!

  30. Pingback: [译稿]Mozilla Firefox 3 新功能指南 at 忍忍就過了

  31. Turning on colour management in FF3 has most certainly improved colour vibrancy. Even Gmail looks better! Thanks for the FF3 guide and your blogs helping me to enjoy this new feature. So far I really like FF3.

  32. Turning on colour management in FF3 has most certainly improved colour vibrancy. Even Gmail looks better! Thanks for the FF3 guide and your blogs helping me to enjoy this new feature. So far I really like FF3.

  33. While I applaud color management in FF3, I think the all or nothing approach and the default is unfortunate. I understand why full color management on was not desirable for default behavior.

    But, instead of all on, or all off (default), a 3rd option should have been explored and that is to perform color management on images that have ICC profiles embedded in them. There aren’t many such images on the internet, but those people who have embedded profiles have usually done so for a reason and this metadata should be honored. This is how Safari works. PNG and JPEG support ICC profiles, GIF does not. TIFF does as well but rarely used on the internet.

    Case in point, I find it unfortunate that FF3 which has this capability built into it now, completely disregards embedded ICC profiles in images, so they actually display incorrectly. Example: http://www.color.org/version4html.xalter

    The issue of color management on all platforms is an increasing problem. In the past, we could assume average displays had nearly sRGB like behavior, and target images and web content to that color space. Of course this is a slight problem on the Macintosh were its tone reproduction curve is defined by gamma 1.8 instead of gamma 2.2 like on other systems. But a much bigger problem than this, an one that affects all platforms, is that display technologies are diverging from sRGB rather than converging on it. We already have affordable wide-gamut displays, that once were in the $10000 range now in the $1400 range, and this will get even lower.

    So it’s good this functionality is in FF3. Really the primary hold out is Flash. Once that’s color managed, then everything can be, without surprises.

  34. I’ve enabled the enhanced colour settings, and noticed a difference, but I wonder is the perceived difference due more to a ‘placebo’ effect than anything else 😉 .

    Like your Flickr set!

  35. To those trying to install the Color Management plugin – if you don’t want to register with the addons.mozilla.org site, just go to the author’s homepage and download it from there, then open the .xpi file with FF3

  36. I think it’s a good move for Firefox, certainly, but is no the solution to washed-out web photos until EVERYONE is using a color-managed browser, which won’t be for several years at least. What’s more important than your own photos looking good on your own flickr page on your own computer is what they look like to other people on different computers.

    The solution, for now, is to convert your images to sRGB before uploading to flickr. It is a smaller gamut than AdobeRGB or whatever you happen to use in Photoshop, but that should never be noticeable (at least without a wide-gamut display as someone discussed above.)

    This way, your photos should look identical on flickr and in photoshop, and more importantly, that’s what absolutely everyone else will see as well (besides the fact that most won’t have their monitors calibrated equally.)

    If you’re using Lightroom, the Export dialog will convert to sRGB for you without touching your original. It’s a little more annoying in Photoshop (though there could be a better way) but is only a couple of extra clicks.

    Of course, because not everyone does this, it could still be worth using the FF3 color profile option to ensure that you see other photos on flickr they way the photographer sees them.

  37. Shoot me down if you like as I am only a novice in this field, but I have been playing with it for a bit. I noticed, and other people have reported that, although switching this on fixes photographs to better colours, it messes up the rest of the screen – CSS colours etc. Mine went all pinkish. So my first thought was that we needed to set the display_profile in FF to be correct for the monitor but this didn’t do it. The next thing I tried was to set the display_profile to C:WINDOWSsystem32spooldriverscolorsRGB Color Space Profile.icm and that seems to solve all the problems. The photographs are correct as checked with Brad Carlile’s site http://bradcarlile.com/blog/misc/firefox-3-to-be-a-color-managed-browser/ and the greys remain grey on the rest of the screen.

    To my uneducated mind, it looks like FF is applying the screen profile to colours that don’t have their own profile (CSS and GIF) and the windows display driver is doing it again. Setting the display_profile to sRGB stops it doing that.

  38. Shoot me down if you like as I am only a novice in this field, but I have been playing with it for a bit. I noticed, and other people have reported that, although switching this on fixes photographs to better colours, it messes up the rest of the screen – CSS colours etc. Mine went all pinkish. So my first thought was that we needed to set the display_profile in FF to be correct for the monitor but this didn’t do it. The next thing I tried was to set the display_profile to C:WINDOWSsystem32spooldriverscolorsRGB Color Space Profile.icm and that seems to solve all the problems. The photographs are correct as checked with Brad Carlile’s site http://bradcarlile.com/blog/misc/firefox-3-to-b… and the greys remain grey on the rest of the screen.To my uneducated mind, it looks like FF is applying the screen profile to colours that don’t have their own profile (CSS and GIF) and the windows display driver is doing it again. Setting the display_profile to sRGB stops it doing that.

  39. Embedding profiles in jpegs is interesting but hardly significant, at least for Windows users.

    The fact that FF3 with CM enabled reads and uses your monitor’s profile is huge. Until this, FF (like IE etc) would just ignore the monitor profile. Now it renders colours the way their creators intended them to be seen. Forget embedded profiles, enjoy accurate managed colour in Windows.

    I hesitate to mention it, but in Windows Vista at least, Safari does not deliver Colour Managed output – it does take note of embedded profiles, but it does not use the monitor’s profile at all. That was such a shame but there it is.

  40. Embedding profiles in jpegs is interesting but hardly significant, at least for Windows users.The fact that FF3 with CM enabled reads and uses your monitor’s profile is huge. Until this, FF (like IE etc) would just ignore the monitor profile. Now it renders colours the way their creators intended them to be seen. Forget embedded profiles, enjoy accurate managed colour in Windows.I hesitate to mention it, but in Windows Vista at least, Safari does not deliver Colour Managed output – it does take note of embedded profiles, but it does not use the monitor’s profile at all. That was such a shame but there it is.

  41. Maybe I'm missing something here, but in Firefox 2 I can see the screenshot of the enhanced FF3 image perfectly well. It looks like someone's tweaked the levels a bit. Here's my question: why not just export all images for the web in sRGB? Or, load them in FF3 with color profile support enabled, take a screenshot, and save the image again!

  42. Maybe I'm missing something here, but in Firefox 2 I can see the screenshot of the enhanced FF3 image perfectly well. It looks like someone's tweaked the levels a bit. Here's my question: why not just export all images for the web in sRGB? Or, load them in FF3 with color profile support enabled, take a screenshot, and save the image again!

  43. Maybe I'm missing something here, but in Firefox 2 I can see the screenshot of the enhanced FF3 image perfectly well. It looks like someone's tweaked the levels a bit. Here's my question: why not just export all images for the web in sRGB? Or, load them in FF3 with color profile support enabled, take a screenshot, and save the image again!

  44. Hello,

    Thank you for a wonderful article. I link people to it all the time (I made a tinyurl to put in my picture captions on Facebook).

    In Firefox 3.5, the setting changed to gfx.color_management_mode and the plugin is currently incompatible. I would suggest posting an updated version of the instructions or something.

    Thanks

  45. Pingback: Friday (now Monday) freebies | Aggie Webmasters

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s