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:
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.
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:
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.
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.
For more examples of Firefox 2 vs. Firefox 3 (with color profile support enabled) screenshots, check out my Flickr set.
Dave Hyatt:
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.
29 April 2008, 3:49 pmStuart Parmenter:
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.
29 April 2008, 5:12 pmdjp:
I never knew I was missing out on such rich colors
29 April 2008, 6:07 pmArthur:
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?
29 April 2008, 6:09 pmBob:
Will the color correction be applied to chrome (ie, extensions and xul)?
29 April 2008, 7:43 pmRonald Schouten:
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.
29 April 2008, 7:49 pmJohn Resig - Color Profiles in Firefox 3:
[...] 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 [...]
30 April 2008, 12:34 amDamjan Mozetič:
Now let’s hope for better color management support, especially on browsers that still refuse to support it at all… IE comes to mind I guess.
30 April 2008, 4:03 amWeb Browsers:
This is really interesting find. Never thought about that… Wonder if other web browsers supports that as well.
30 April 2008, 5:27 amAlex:
Another problem with colour correction is the Mac theme. For me, the title bar is reddish.
30 April 2008, 8:06 amAxel Hecht:
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.
30 April 2008, 8:09 amColor profile support « b&k m online:
[...] the people behind Firefox have made some great strides and have included color profile support in Firefox 3 (still in beta). This means that when I edit a photo in Photoshop, the photo will have [...]
30 April 2008, 10:54 amfoxiewire.com:
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….
1 May 2008, 12:10 pmBoycott Novell » Links 01/05/2008: Another Large Migration to Debian GNU/Linux; Ubuntu Upgrade Successes:
[...] Firefox 3: Color profile support (oh the pretty, pretty colors) [...]
1 May 2008, 1:19 pmScott Johnson:
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.
1 May 2008, 4:54 pmjarek:
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?
2 May 2008, 3:03 amsporniket:
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 ?
5 May 2008, 9:10 amFlorent V.:
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.
5 May 2008, 12:07 pmAlex:
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)
7 May 2008, 4:27 amFirefox 3’s Color Profile Support « Soray2000’s Weblog:
[...] can check more out about Firefox 3’s color profile support and what to look forward to on Firefox 3: Color profile support (oh the pretty, pretty colors) (a great article by the way) via [...]
9 May 2008, 1:14 amThe Link Farm | .craig:
[...] talked aboutFirefox 3: Colour profile support. It is a brilliant read about the colour usage and how Firefox displays those. Mind you, Safari [...]
9 May 2008, 7:51 pmEnhancing Your Color Images With Firefox 3 « Lingua Franca:
[...] the quality of pictures on the web. One of these photographers recently wrote in his personal blog, “One thing that has always irritated me about looking at pictures on the web is that [...]
11 May 2008, 11:16 amemre:
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.)
11 May 2008, 4:01 pm