Gamma, Color Profiles, and mismatched image colors

I wanted to visually illustrate a point I had made on Ben’s blog:

GIF gradient with metadata
PNG gradient with metadata
JPG gradient with metadata

That gradient is made of 3 horizontal slices: one GIF, one PNG, and one JPEG. The colors should be the exact same in each, as the RGB values are exactly the same. They were sliced from the same image! However, in some web browsers, they may look different. Like so:

Gradient in some web browsers

Why? Color profiles and Gamma.

PNG images have a concept of gamma, the brightness of your monitor at the time you created the image. That way, if you live in a cave and have your monitor turned down to a very dim level, some applications will know to show the image a little differently on a monitor that is set to be much brighter. JPEG images have color profiles that work similarly, but with a bit more fine tuning.

The problem comes from the fact that in both formats, gammas and color profiles are optional. This problem is compounded by the fact that not all applications, such as web browsers, have a concept of gamma or color profiles. Firefox doesn’t, and while Internet Explorer does, it’s quirky at best. Many applications on Macs support both, while most applications on Windows are ignorant of gamma and color profiles. (The gamma you set in your video games generally doesn’t count, as that gamma is probably only applicable to that one game.)

Most people won’t ever notice the problem because most web designers are strongly biased towards their one favorite type of image it’s rare to see a page with heavy use of all three. And, in a layout where JPEGs are used only for photos and not as part of the design chrome, you are unlikely to notice that the color profiles embedded in the JPEGs are different than your own.

So how do we fix the problem? Easy: remove the gamma and color profile information from the images. I use TweakPNG to get rid of all the extraneous chunks in my images, which includes the gamma chunk. I believe pngcrush performs a similar function. There are settings in Photoshop and ImageReady to turn off color profile generation for JPEGs, and I’m sure there are probably utilities to help you do this.

GIF gradient with metadata
PNG gradient with metadata
JPG gradient with metadata

Now, if I may quote myself:

I’m sure some iPod-toting, beret-wearing, goatee-sporting graphic designer will tell you that removing the gamma from a PNG is like scooping a baby’s eyes out with a spork … but if every other image format is okay without a gamma, then I’m okay with it.

What I’m saying is that I believe removing gamma and color profiles are a temporary fix until the rest of the world catches up and starts using them. This includes gamma and RGBA support for CSS colors … or else how will you match your HTML colors with your image colors? I imagine this will take a few years, after which people can stop worrying about it and just leave them in. But for now … take them out. Or, be okay with the fact that people are going to occasionally wonder why your colors don’t match up.

By Rick Osborne

I am a web geek who has been doing this sort of thing entirely too long. I rant, I muse, I whine. That is, I am not at all atypical for my breed.