11.29.06
PNG Color Gamma Issues in IE7, and a Workaround
IE7 finally has support for PNG transparency without having to use clunky, pain-in-the-butt proprietary filters. Huzzah. However, it’s not entirely smooth sailing with PNGs in that browser.
The latest SitePoint Tech Times newsletter has a worthwhile read about PNG’s native gamma correction trip and how it causes problems in IE7.
“PNG images,” SitePoint explains, “can also contain a gamma correction value, which is meant to represent the relative brightness of the display on which the image was created. In theory, the browser can use this value to display the image at the exact same brightness on another display.”
In practice, tain’t really so. The problem can come when trying to match color(s) in the PNGs to CSS colors, which of course have no gamma correction. Result: total, hopeless mismatch and a gnashing of teeth.
I first ran into this some months back with an older version of Safari. Photoshop’s “Save for Web” doesn’t give you the option of not saving gamma info, and despite spending the better part of a day at the time researching the issue I was not able to find a workaround. (Though Henri Sivonen’s “The Sad Story of PNG Gamma ‘Correction’” was most informative about the background.)
Since then, things have changed a little. Current versions of Safari, Firefox, and Opera all natively ignore any gamma data in PNGs. However, the brand-new IE7 honors the PNG spec strictly and parses the image’s gamma as instructed. Ironic, isn’t it? Also a major drag for web devs, since IE7 will be the majority browser in no time.
Thankfully, SitePoint’s newsletter refers us to a handy utility called TweakPNG that is free and open-source…though Windows-only (sorry). As SitePoint explains, “Simply drag a PNG to the program window and delete the ‘gAMA’ chunk from the list before saving the file. While you’re at it, you might as well delete the ‘tEXt’ chunk as well, to save a few extra bytes of file size by removing Adobe’s stamp on the file.”
For Mac, one has to resort to installing ImageMagick (which can sometimes be a bear to compile depending on the trip with libraries familiar to all Linux nerds) and running commands via the terminal (see the article for details).
Even with all of that you’ll be out of luck with Safari 1.x “which arbitrarily corrects PNG images even when they contain no gamma information.”
sacha said,
January 16, 2009 at 2:50 am
Thank you for posting that Teawk png is great little bit of kit. You post has saved me litteral hours.
Avi said,
July 19, 2009 at 11:28 am
Fantastic! Thanks for posting this, saved me many hours - worked like a charm!
(I was using JPGs with matte colour corrections instead of this prior. Needless to say, a very inefficient method cross-browser.)
dee said,
August 6, 2009 at 6:58 am
Thanks for the hint, mate - I usually sit in front of a mac and faced this problem some minutes ago here on a pc.
For your mac visitors: I’m very happy with Gamma Slamma that once saved my life. Usage is a no-brainer
http://osx.iusethis.com/app/gammaslamma