home :: technology :: software :: pnggamma

PNG Color Mismatch in IE7

Internet Explorer never fails to impress me in its ability to frustrate and complicate my web designs. The screenshot below shows a png image with a #3D6B99 background color over a div with the same #3D6B99 background color (specified in CSS).

PNG Color Mismatch

The background colors don’t match! Of course everything looks fine in Mozilla Firefox. So what’s the problem?

It turns out that Photoshop adds a gamma correction factor that is embedded directly in the png image file. The gamma correction is supposed to make the image look exactly the same on PCs and Macs, but since no other colors in the browser are adjusted, it causes more problems than it fixes!

The easiest fix I could find is to use TweakPNG, an open-source Windows program, to remove the gamma correction. TweakPNG doesn’t need to be installed. Simply select the “file gamma” entry, right-click, delete, and save.

TweakPNG
Click to enlarge

Ironically, Internet Explorer is doing the “right” thing with the file. Too bad that in this case, the right thing is almost never what anyone would want!

Last Updated: Wed, 18 Feb 2009

Feedback

billy gates wrote at 2009-03-02 20:47:

does this mean that firefox is adjusting the colors in the same manner photoshop did? "but since no other colors in the browser are adjusted, it causes more problems than it fixes!"

Personally I think you should replace the word "fine" with "find" but that may be a matter of dialectical personal preference.

Keith Carangelo wrote at 2009-03-05 11:40:

Hi Billy, Yes, the colors look the same in Photoshop or in Firefox. It's only Internet Explorer that has the mismatch.

And thanks for catching the typo.

Keith

Austin Web Design wrote at 2009-04-28 12:23:

Hey Keith, Thanks for your article. I had noticed that I was having this problem on some sites, and not others.

I realized that PNG Monster will remove this problem -while- compressing the image. The UI is not the best, but it's a pretty happening program if it can kill two birds with one stone.

http://www.vbgore.com/PNG_Monster

Name:

Email or URL:

Comments: