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).
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.
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