Mozilla

color correction for images in Firefox 3.5

Back in Firefox 3, we introduced support for color profiles in tagged images, but it was disabled by default. In Firefox 3.5 we were able to make the color correction process about 5x faster than it was in Firefox 3 so we’ve enabled support for color correction for tagged images.

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:

pngcrush -rem gAMA -rem cHRM -rem iCCP -rem sRGB infile.png outfile.png

Alternatively, you can use TweakPNG and delete the gAMA, cHRM, iCCP and sRGB chunks by hand.

156 comments

Comments are now closed.

  1. Dave wrote on August 26th, 2010 at 06:24:

    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!

  2. zeola wrote on January 26th, 2011 at 01:02:

    i was searching for some small beautiful pics. and found the beautiful purple flower

  3. Pingback from Firefox 3.5 JETZT verfügbar | Marcus' Blog on January 26th, 2011 at 16:06:

    […] lokale und Offline-Speicherung für Anwendungen nach HTML5, <canvas>-Text, ICC-Farbprofile und […]

  4. MULTIATOM wrote on February 10th, 2011 at 17:21:

    Thank you. :) The TweakPNG very nice software. :)

  5. Pingback from Rendere compatibili plugin per il nuovo Firefox | Hat Tips Db on June 26th, 2011 at 09:29:

    […] e supporto alla memorizzazione dei dati in modalità non in linea, testo con i <canvas>, profili ICC e trasformazioni […]

  6. Pingback from Farbverwirrung mit PNG in Firefox | [ eBrnds weblog ] on July 6th, 2011 at 07:43:

    […] Ein Windows-Tool war nicht ganz das, was ich gesucht hatte, und so landete ich schließlich auf dieser Seite. Dort wird ein Programm namens pngcrush erwähnt, zusammen mit einer Kommandozeile dafür, […]

1 2 3 4

Comments are closed for this article.