A recent article by Kevin Yank in the Sitepoint Tech Times newsletter drew my attention to TweakPNG, a handy tool that can correct the age old problem of PNG color shift in Internet Explorer.
One supposedly ‘advanced’ feature of the PNG format is gamma correction. Gamma correction is the ability to correct for color differences between computer systems, allowing consistent color display across platforms. Embedded in every PNG file is a piece of metadata that specifies the gamma setting of the computer on which the image was created. The idea is that when the PNG is displayed on another computer, this gamma value can be extracted and used to compensate for color differences between the two systems, thereby displaying the PNG as the author intended. Which sounds all fine and good, except that when it comes to displaying PNGs on web pages – their intended viewing environment – things go horribly wrong.
Neither of the other two image formats used on the web, GIF and JPEG, contain color space information, and neither is gamma correction applied to HTML colors set via CSS. The result is that when a PNG is placed on a web page next to a GIF, JPEG, or HTML color of exactly the same RGB value, its colors appear to be different. This display quirk, along with Internet Explorer’s famous problems handling transparency in PNG images have ensured that the image format has been all but ignored by web designers.
Modern web browsers (Firefox 1+, Safari 2+, Opera 7+) sidestep the color shift issue by disregarding the gamma chunk embedded in PNG files, thereby treating their colors in an identical manner to GIF and JPEG images. As usual, it is Internet Explorer that throws a spanner in the works: for some reason Microsoft didn’t see fit to implement a solution in Internet Explorer 7, even though competing browsers already had the problem licked.
Fortunately, the fix for Internet Explorer is simple: strip out (or set to zero) the gamma information in your PNG image, and resave the file. If no gamma correction information is present in your PNG, IE will treat the image just like it treats any other image that contains no color space information.
TweakPNG makes this data stripping task extremely simple for windows users – just open your PNG file, right-click on the gAMA chunk, and choose ‘delete’. Mac users might try Pngcrush – OSX installation instructions can be found on xdeb.org.
There is only one drawback to this method, which is that it won’t have any effect in Safari 1.x or Opera 6 or lower. Even if a PNG contains no gamma information, those browsers will attempt to arbitrarily apply color correction. So until Safari 1.3 and 1.2 disappear off the radar it is advisable to think carefully before placing a PNG image side by side with a GIF, JPEG or CSS color when color consistency is a high priority.
A great article explaining exactly why this display issue occurs
A chart showing which browsers the gAMA stripping fix will work in.
An article by Kevin Yank in the Sitepoint Tech Times which details the problem, and the solution.Tweet