Sean A Sullivan

In the web world, it is common knowledge that using the .png image format can cause grief with concern to compatibility across different browsers. With the release of Internet Explorer 7, issues with transparency were resolved; however, a new issue exists that I encountered today and felt would be appropriate to address—.png gamma correction.

The Problem. Gamma correction is a feature of .png files that is supposed to benefit the user in that when the image file is rendered, the application handling the render is to interpret data stored in the .png file and adjust its display accordingly. This is also inherently the issue. With the latest round of browsers, this gamma information is discarded, except in Internet Explorer. Because of this, what you end up with is the scenario in which CSS colors do not correctly match those colors in the image. This is due to the fact that the gamma is being corrected on the image but not on the CSS.

The Solution. After doing some searching, I found an application, called PNGGauntlet, that actually optimizes .png files and strips the gamma information out of the file, causing each browser to render the image the same.

Here’s my example in which I was working with a gradient background PNG that ends in a green color that is to be picked up and continued by the CSS background-color attribute. Note the darkness of the background image in the Internet Explorer example before using PNGGauntlet. Once I optimized the background graphic with my new tool, the colors matched up great in all my test browsers.

Further Exploration: Browser Gamma-Consistency Test, The Sad Story of PNG Gamma “Correction”