Firefox 3: Color profile support (oh the pretty, pretty colors)
April 29th, 2008Browsers, Firefox, Mozilla, Photography, Work[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.
Add New Comment
Viewing 33 Comments
Thanks. Your comment is awaiting approval by a moderator.
Do you already have an account? Log in and claim this comment.
Do you already have an account? Log in and claim this comment.
Do you already have an account? Log in and claim this comment.
Do you already have an account? Log in and claim this comment.
Do you already have an account? Log in and claim this comment.
Do you already have an account? Log in and claim this comment.
Do you already have an account? Log in and claim this comment.
Do you already have an account? Log in and claim this comment.
Do you already have an account? Log in and claim this comment.
Do you already have an account? Log in and claim this comment.
Do you already have an account? Log in and claim this comment.
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.
Do you already have an account? Log in and claim this comment.
Do you already have an account? Log in and claim this comment.
Do you already have an account? Log in and claim this comment.
Do you already have an account? Log in and claim this comment.
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.
Do you already have an account? Log in and claim this comment.
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)
Do you already have an account? Log in and claim this comment.
Do you already have an account? Log in and claim this comment.
There is just the contextual menus which are still like before (with the normal color).
Do you already have an account? Log in and claim this comment.
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?
Do you already have an account? Log in and claim this comment.
Do you already have an account? Log in and claim this comment.
Do you already have an account? Log in and claim this comment.
Do you already have an account? Log in and claim this comment.
Do you already have an account? Log in and claim this comment.
http://bradcarlile.com/blog/misc/firefox-3-to-b...