Most images on the web are untagged. If you don’t know the difference between tagged images and untagged images the odds are good are you won’t notice this change. However, we suggest that you read on to learn about what it might mean for you if you want to include them and how future Firefox releases might change the interactions between CSS colors and images.

What’s a color profile?

People who spend a lot of time taking photographs or any kind of high-resolution color printing will understand that many output devices – LCDs, CRTs, paper etc – all have very different interpretations of what various colors mean. For example, uncorrected red will look very different on an LCD vs. a CRT. You can see this if you set up two very different monitors next to each other and the operating system doesn’t do color correction – colors will look more washed out in one of them vs. the other.

JPG and PNG images both have support for color profiles. These color profiles allow Firefox to take colors in the image and translate them into colors that are independent of any particular device.

While images contain color profiles it’s also important to note that output devices like monitors also have color profiles. As an example an output device may be better at displaying reds than blues. When you’re getting ready to show something that’s “red” on that device it might need to be converted from the neutral #ff0000 value to #f40301 in order to show up as red on the screen.

What this means is that there are actually two conversions that take place with color profiles. The first is to take the original color information in the image and, using the color profile, convert it into a device-independent color space. Then once it’s in that independent space you convert it again using the output device’s color profile to get it ready to display on the output device.

So what about CSS colors?

It’s important to understand how color profiles work and how they are converted to properly understand how CSS interacts with these color spaces.

In Firefox 3.5 we consider CSS colors to already be in the device output’s color space. Another way of saying this is that CSS colors are not in the neutral color space and are not converted into the output device like tagged images are.

What this means is that if you have a tagged image where a color is expected to match the CSS that’s right next to it, it won’t. Or at least it’s likely that it won’t on some output device – maybe not the one that you happen to be using for development. Remember that different output devices have different color profiles. Here’s an example of what that looks like:

In Firefox 3, this will look like one contiguous block of purple. In Firefox 3.5 and Safari you will notice that there’s a purple box within a purple box (unless your system profile is sRGB.) This is because the image is color corrected while the surrounding CSS is not.

This is where the statement about the future comes in. In a future release of Firefox we are likely to make it possible for people to turn on color correction for tagged images and CSS. You can test this setting today by changing the pref listed on the page on color correction on the Mozilla Developer Center to “Full color management.” In that case untagged images should continue to work as we will be rendering both CSS and untagged images in the sRGB color space.

Image support and tools

PNG’s can be tagged in three different ways. First they can have an iCCP chunk that contains the associated ICC profile. Second they can be explicitly tagged as sRGB using a sRGB chunk. Finally, they can contain gAMA and cHRM chunks that describe the image’s gamma and chromaticies. Using any of thse methods will cause Firefox to color correct the image.

You can remove all of the color correction chunks resulting in an untagged image using pngcrush:

I, too, have a contiguous purple block. (Mostly. I think I can see the line at certain angles of viewing my monitor. Or I’m imagining it. Can’t be sure.)

However, I’ve had gfx.color_management.mode set to 1 since the Firefox 3.0 betas, so it overrides the 3.5 default of 2. (This is detailed in the MDC article.) I assume that has something to do with it?

@Gordon – If you’ve set the color management mode to 1 then it’s correcting the CSS as well as the image, so it will look contiguous. The setting in Firefox 3 was 0, in 3.5 it’s 2. Eventually we’ll probably switch it to 1.

And on your blog you asked about video editing software using HTML5 video and the answer is yes. There’s some work going on at wikimedia to build something like that. Also check out pad.ma which has a lot of online archives of video but has an excellent HTML5-based scrubber interface that lets you seek around in video and build clips. It’s a start of an editor, I think.

[…] Candidate of Firefox 3.5, and many of us are, it’s worth looking into the posts at the Mozilla Hacks site to get to know how some of the most powerful new features in the browser work. There are over […]

[…] Candidate of Firefox 3.5, and many of us are, it’s worth looking into the posts at the Mozilla Hacks site to get to know how some of the most powerful new features in the browser work. There are more […]

My site had a photo with an added border colored hex 303030 (rgb 48,48,48). Now FF 3.5 renders it as hex 333333 (rgb 51, 51, 51). FF 3 did not have this problem nor does IE7. How do I fix what 3.5 broke? It seems the developers didn’t consider this situation?
Thanks

so in ffox 3.5 i see a contiguous purple rectangle, but when i open this page in safari 4.0.1, i see the darker purple block. so, it’s not my system profile. i set the gfx.colour_management to 2, (i had it on 1) and still no difference.

[…] image is correctly tagged). Basically images will look the same as in Photoshop. Read more here: http://hacks.mozilla.org/2009/06/color-correction/ This means you are more likely to view images here on retouchpro correctly (as people sometimes […]

[…] All browsers with the exception of Safari and Firefox 3 (with modifications) were not color managed. That meant only pictures saved in sRGB color profile will display close to the intended colors. Images tagged with any other color profiles will render incorrectly resulting often in muted colors. In Firefox 3, users could turn on color management at the expense of a performance hit. Firefox 3.5 now has color management turned on by default as they have improved performance 5x faste… […]

You know how Safari has a wonderful little habit of making your PNGs not match their CSS backgrounds? The whole color profile thing? Well, now Firefox 3.5 has it too, so the problem audience just became a whole lot bigger. Time to strip those color …

Wouldn’t this also be an issue if you’re using any wide-gamut monitor, regardless of whether the image is tagged or not? Normal web page, everything is sRGB. But on your monitor, the CSS colors will come out screwed up, because they won’t be converted to your wide-gamut color space as if they were sRGB, but the images will be converted to your monitor’s color space?

Firefox with color management enabled assumes untagged images are sRGB, which is the right thing to do. So Firefox is the only way to browse the web and not have 99% of the your colors F’ed up and super saturated. (Every nice 24 inch is 110% gamut now, which means everything except photoshop and Firefox is completely distorted).

I hate the new Wide Gamut displays. I’ve got two monitors, one normal, and one wide-gamut, and it’s almost unusable. I have to open Firefox on one monitor and an un-managed browser like Chrome on the other to get the colors to match. Progress.

So lets say I am not a techie (not the case, but let’s assume it) and have no clue about gamuts, profiles, etc. But I happened to like FireFox over the rest (not quite true since inception of Chrome, but anyway), happened to do lots of photographs including using PhotoShop and all I know is how to upload photos to the web. Typical scenario for semi-pro photographer (do not assume real photographer knows anything about OS systems, color gamuts, profiles, etc, but they sure do know how to make living out of their main skill).

Now that I got to use FireFox 3.5 in default configuration – all my photos essentially screwed, so all I can do is go back to beloved IE. Like this proposal? This is what happens in reality. Oh, no, do not suggest them to go about:config – this just sounds as scary as hell. Let alone reading technical docs like this very page.

So whoever decided to make this revolution in color profiles, please, do not forget poor professionals who never will know what killed them. People will go crazy seeing their lovely images in FF3.5. Give them, general population, way to get the same images they had before. Leave your revolution to those who like just that.

No, I am not a pity man, I have “corrected” my FF in Fedora 11 to show what I used to see, and I could probably discuss what are advantages of Wide Gamut vs Adobe sRGB or whatever. But the truth is: you have just betrayed majority of your regular FF users.

FF is not for “pros”, it is for all the real people, so keep it for them.

I’m using vista, FF 3.5, IE and I just installed Safari. None of them showed different purple blocks.

In FF CM was turned on, and in Vista aRGB was set, however I did not set FF’s value for gfx.color_management.display_profile, which is a string: the absolute path of the icc profile you wish to use; if left empty it defaults to sRGB

This is a major disaster that 3.5 no longer supports v4 profiles. Most current display calibrators generate v4 profiles and so color management will NOT correctly work in 3.5 whatever you set. Useless! Again, 3.0 did this just fine. Why break this? Very disappointing. This needs to be fixed ASAP.

Seeing only one contiguous block of purple in FF3.5, I took a screenshot and inspected the RGB values of the block just to make sure I wasn’t color blind. However, does anyone know where the screenshot feature of the OS copies the RGB values from? If it’s from the screen buffer, is the content of this buffer in the independent color space or in a device readied color space?

I also agree with Jao, ICC Profile v. 4 is no longer supported. Heck the purple block image on this page used to work but now it doesn’t anymore. PLEASE fix Firefox to suppor ICC v. 4 profiles again. PLEASE

I’m a professional photographer, and shoot in sRGB. Each and every photograph on my site is in sRGB, and the majority sit on a color background (to accommodate irregular edges and shapes of various borders, matching an adjacent CSS color. So most images and graphics show the mismatch caused by your splendid “innovation”.

Your suggestion above to “strip the color profile” is an absolute joke. There are hundreds of hours of work to work through every image on my site, open it in Photoshop, remove the color profile and resave it, optimized for quicker opening on the Web. That’s right, I can’t just strip the color profile, as each image is already optimized. This must all be done through Photoshop, and optimized again once the profile is stripped. And that’s only if there’s enough color information left after the initial optimization to resave and reoptimize without a degraded image resulting.

If I leave it as is, every Firefox 3.5 visitor to my site will see a site with chunks of mis-matched CSS and jpg color, and just simply incorrectly displayed images. This major change in the way images are displayed now negatively affects the primary promotional tool for my business.

Well, everything above is basically gobbledygook. I’m trying to sell art on an art site, and as more people upload FF3.5, they are going to think my work SUCKS. Why couldn’t you make it so techies could turn whatever the hell this feature is ON instead of making all the rest of us try to turn it OFF? I, too, may have to resort to the dreaded IE.

I’d just like to note for the record that part of the problem people have been complaining about may have been fixed in Firefox 3.5.2.

If not, I’m pretty sure it’s listed in the Known Issues section of the release notes (and has been since the beginning)
______________________________________________________

REPLY
Yes, you will indeed find this as an issue–the article above is a response to the original listing of the issue. But 3.5.2 does not set color correction “off” as default and “on” as an option, which is the only way to handle this.

Thanks to Firefox 3.5, I now have cluttered my site with warnings that the mis-matched colors Firefox 3.5 users now see is due to a change in the way CMS and RGB colors relate to each other when viewed with Firefox, and to see the site as intended, visitors should use any browser but Firefox 3.5 and later. Not a desirable workaround from either my nor, I’m sure, Mozilla’s viewpoint, but short of completely re-working my site, it’s the only solution until Mozilla sets color correction “off” as default.

I’m using Firefox 3.5.2 and I see a contiguous block of purple. However, if I go to the following site (suggested by a user):http://www.color.org/version4html.xalter
the result is that with FF3.5.2 I can see ICCv2 profile is supported (while ICCv4 isn’t), while with IE8 no ICC profiles are supported. So, in some way FF3.5.2 colour correction is working, but not on this page, that is supposed to show FF3.5.x capabilities!!

Anyway, how to know if my system profile is sRGB or anything else? I’m on Windows XP x64 Edition and in my Display Properties I have a color profile for my monitor (Color Management tab of Advanced settings), however it is named with my monitor name and I can’t find a way to know what kind of profile it is.

This sucks! I upgraded to FF 3.5.2 last night. As a result I’m seeing nothing but mess all over the internet including some of my own sites where CSS colors and images are clashing.

A few days ago I had a couple of people tell me they were using FF and my site colors looked off. I just told them it must be their monitor or graphics card because I too use FF and everything is fine. Of course before I said that I had friends check and it was ok for them too. Now, after upgrading myself, I see my visitors must have been using 3.5x as well. Thanks FF for making me look like an idiot.

The new color management ‘features’ can have disastrous effects for website owners and can be a major pain in the *ss for less tech-savvy people.

Thanks to Firefox 3.5, I now have cluttered my site with warnings that the mis-matched colors Firefox 3.5 users now see is due to a change in the way CMS and RGB colors relate to each other when viewed with Firefox.

Each and every photograph on my site is in sRGB, and the majority sit on a color background (to accommodate irregular edges and shapes of various borders, matching an adjacent CSS color. So most images and graphics show the mismatch caused by your splendid “innovation”.

I’m trying to sell art on an art site, and as more people upload FF3.5, they are going to think my work SUCKS. Why couldn’t you make it so techies could turn whatever the hell this feature is ON instead of making all the rest of us try to turn it OFF? I, too, may have to resort to the dreaded IE.

—————————————-

I definitely agree with these comments. all people involved with gfx, design, photography and css are going mad with the choice you made. I do believe that killing retrocompatibility is not a fair move. I mean rendering colors should be a decision formed by the artist not the browser.
Correct me if I’m wrong but from what I see, my PNG images created with The Gimp were rendered properly before the 3.5, I mean what I saw in Gimp was what I saw in FireFox.
Now, my PNG are translated with wrong colors (causing a break with css colors and css-design based on png transparency). I’m no real expert in this field, I judge from what I see, and what I see is that FireFox allows itself to translate my PNG colors into something else I didn’t choose.
I have a name for this: corrupted display…

We, website owners, can’t explain to every visitor that a special color feature has been released and you have to enter about:config, change the gfx color management bla bla bla if you want to see intended colors. We just can’t, this is not efficient. Please take this into consideration.

I compared a jpeg in photoshop CS4 side by side with one I had uploaded to SmugMug and see no difference using FF 3.5.2.
___________________________________________________________
REPLY
I’m not sure how this actually tests the issue, Ric. CS4 will display your jpg with any embedded profile, and that’s what the new versions of FF do, too, so you will not see any difference between the images in your comparison, since you are not comparing matched CSS and RGB colors in your test.

Browsers have been “profile blind” up until now, so matching a CSS color in html with the same color in a profiled (probably most often, sRGB) jpg image resulted in an on-screen match to the viewer. Now, with FF recognizing the profile by defualt (instead of supplying FF with profile recognition off by default), CSS and image colors will not match. You have to actually strip the profile from an image now to get a match between the same colors in CSS and RGB. For many web owners, this means either many, many hours of reworking affected images to strip RGB profiles, or having a crappy looking site when viewed with FF.

Implementation of profile recoginition is a good thing. But introducing it with this feature on by default, instead of keeping it as an optional choice made by the user, blindsides site owners who have never had to deal with this issue. Firefox continues, it seems, to think this is no big deal, but to those of us who have spent hundreds of hours on sites that now look like crap thanks to this clumsy inplementation of profile recognition, it is.

I really don’t understand why this happened. I switched to Firefox from IE because it was straightforward and ran a low profile on my system. With the buggy new version releases and especially now with this color profile issue, I really have to wonder as to the direction that it’s developers are going in.

I’m an artist by trade and while I do enjoy an opportunity to learn more about web development, I do not appreciate it when a formerly reliable piece of software has forced me to the issue by rendering my work unacceptable.

Great thinking, Mozilla. As usual the tyrrany of the geek eating his own tail ends in disaster for all. The principle of KISS was long ago lost with Firefox developers who seem to be intent on imploding. Build a great browser to unseat M$ then trash it. Get serious and turn this stupid “feature” off by default. If you must have it on by default at least provide some decent menu item for non-geeks to disable rather than fiddling with about:config.

“Most images on the web are untagged. If you don’t know the difference between tagged images and untagged images the odds are good are you won’t notice this change.”

Lies. I, like most people in this comment thread, knew nothing of color profiles before ff3.5 and now our sites look like garbage. Photoshop adds these tags to PNG and JPG images.

Please PLEASE turn off color correction by default. I really don’t want to have to go through all my images and delete their color profiles (probably to have Photoshop just add them in again). This is such a bad “feature”.

I recently noticed many images were coming up with a green cast. I thought something was wrong with my monitor. Then I noticed that sometimes the thumbnail image looked ok but wen I clicked on the image the enlarged (jpg) image had a green cast. So this must be happening in the browser I say to myself. A google search pointed me to color management in 3.5.2 and now I am embroiled in a maze of acronyms – CSS, ICC, PCS etc – yikes – I just want pictures to display properly! So I turn off color management (set gfx.color_management.mode to 0) and things look ok now. I guess my monitor profile is not set correctly – but who has time to track that down??? Not that I am the sharpest blade in the drawer, but I’m guessing many users will be thinking it is time to buy a new monitor! Geez – Firefox is helping Dell sell monitors…

Re: “In a future release of Firefox we are likely to make it possible for people to turn on color correction for (un)tagged images and CSS.”
—————————————————————-
If you haven’t figured out how to do this yet, you’re obvious not ready to have colour correction by default.
If you think your colour correction is better, when you do figure this out, rather than making it ‘possible for people to turn on’, will you make it the default (as the main problem is the mismatching)? If so how soon can we expect this? In the meantime are you going to revert back until you’re actually ready to have colour correction by default? I’m just wondering if it’s worth wasting time now if you’re going to fix this very serious problem sometime soon.

“I mean rendering colors should be a decision formed by the artist not the browser.”

Then Firefox 3.5 should be a good thing. Now, rendering colors is a decision formed by the artist. Earlier, rendering colors was a decision formed by the browser. Problems result when artists are used to having browsers ignore embedded color profiles and have edited images to get them to look good when the color profile is ignored… but have still maintained the embedded color profiles. The artist is sending mixed messages to any program that attempts to interpret the images. The artist created an image with an embedded color profile telling the program one thing, but the artist didn’t intend for the program to pay attention to that embedded color profile. Can we really blame programmers for not being able to create programs that can accurate interpret the artist’s intent? Earlier browsers didn’t even try!

Mozilla is way over-assuming the technical expertise of someone who may happen to know how to upload an image taken with a digital camera and possibly tweaked with some software. I still, after reading and trying like mad to understand what this is all about, am in the dark. Color profiles? sRGB? CSS? TweakPNG? I know the difference between RGB and CMYK and that’s about it.

I like FF but please try to remember that LAYPEOPLE use this browser!!

FF is displaying everything as it should!
Images with profiles are displayed correctly (as in Photoshop).
Images without profiles are displayed with distorted colors (as they should :) ). Even “sRGB” images are displayed with distorted colors because FF displays them in your monitors gamut and if you have some new wide-gamut LCD (like me) the images will be displayed according to your monitors gamut.

The solution to the problem…

All images SHOULD HAVE proper tags embedded! That’s it.
If your image does not have proper ICC profile embedded, don’t cry to FF because colors don’t match on some monitors!
Most (I think ALL) recent point-and-shoot cameras embed “sRGB” profile with the images so this wouldn’t be a problem. And if you’re a pro than you should have known better.

RGB colors will not match up with CSS colors, as they would if turning profile recognition on or off was an option, with the option set to “off”, for the vast majority of casual Web visitors that know nothing about it. There are many of us that never bothered to strip the color profiles out of photographs, because it was an unnecessary extra step to do so.

I have scads of sRGB images and graphics on my site mixed with CSS “matching” (at least they were matching at one time, Mozilla) backgrounds. Since you can’t have irregular borders where CSS and RGB colors butt together, that has to be done by floating an image over a rectange of CSS color. Now, these don’t match. Take a look at the two examples below. The first shows a photograph with an irregular border dropped into a CSS field that at one time, matched the surrounding CSS background. Now, you see the entire rectangle of the image area, because the CSS color used as a background now is displayed as a managed color, unlike the surrounding CSS page background color:http://www.hildebrandstudio.com/seniors/sen_gal_frame.html

Then, here’s the blog theme I modified with a custom header. Instead of seamlessly blending into the surrounding CSS background, it looks like pure unaldulterated crap:

If Mozilla would just deliver FF with color profiles off, those of us needing hundreds of hours of reworking our sites to accomodate this could simply warn visitors to turn the profiles off to view our sites. Hell, I’d even post a page telling people how to do that! Now, I just tell visitors not to use FF if they want to see the site as intended.

What most people doesn’t seem to realize is that the biggest problem for a lot of people is that their very expensive equipment generates ICC v4 profiles for their hardware.
My Eizo CG241W that has hardware calibration will generate a ICC v4 profile, this means Firefox 3.5 won’t read it, and it doesn’t matter what the rest of the images in the world has or hasn’t, since it’s “broken” from the start.
The only browser that supports ICC v4 today is Safari. The Chrome developers seems as ignorant about the problem as the Mozilla developers. Opera doesn’t even care about colors, it’s kind of annoying to use two browsers for daily browsing (since I visit a lot of photography related sites) but as it stands right now it’s the only way.

I just can’t grasp how the Mozilla team could fail so miserably with this.

[…] PNGs and JPGs converted to GIFs.. you ask why? I’m using Firefox 3.5.1 at work and it’s color correction sucks greatly! The bottom and footer images where actually corrected to brown and didn’t fit […]

Using Photoshop CS4 to create JPEG images that are sRGB tagged means that I’m left with v4 ICC profiles that Firefox 3.5.x doesn’t interpret correctly and THAT is why all my images look like sh+t in Firefox now? (ie: over saturated like crazy, for starters.) Is this right?

I used to LOVE FF. Why’d you go and break it? I can’t even use it anymore.

BTW: That notion of stripping the color profile information out of all of our images is absolutely crazy. Fix the browser! PLEASE.

Same here, except that I can not even get it to work on FF 3.0.15.
Running a Dell C22W (Crystal), calibrated, and pointing to the profile using gfx.color_management.display_profile and gfx.color_management.enabled set to On. From a DNG file in Lightroom, I exported a JPEG in Adobe RGB and the same in sRGB. Both look identical when displayed from Lightroom (i.e. color managed), but both look oversatured in FF. If color management is disabled, only the Adobe RGB will look correct, i.e. pretty much identical to the one in LR, since it’s send straight to the wide gamut monitor.

Yeah, having browsers correctly interpret embedded color profiles is a noble idea, but this should be left “off” by default for two reasons:

1) Not supporting ICC v4. What’s the point of going half-way with this?
2) Many users do not have properly calibrated monitors. Let the power users who want to see the web in its “intended colors” turn it on.
3) A “transitional” mode to match CSS to the color profile of surrounding jpegs seems necessary to avoid breaking nonstandard web pages.

Though this is yet another example of most browsers not being standards compliant and developers getting lazy (ie, not stripping color profiles from images that are intended to match background CSS colors) because it didn’t matter. Switching to a standards-compliant method is going to break web pages, there’s no way around it. But easing the transition is a good idea.

This is bullshit. Other browser don’t have any issues with color distortion, why should firefox have? I can’t imagine, how all images with wrongly embedded color profile on the web will be resaved correctly. Most sites will suck on some monitors, like on my.

I upgraded to windows 7 and in the process upgraded firefox. As a web builder, I noticed color variation between ccs colors and jpg colors in firefox. It looked really crappy. I found your site helpful to fix the problem. Thanks!