Fixing PNG Gamma
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.
Further reading
The Sad Story of PNG Gamma “Correction”
A great article explaining exactly why this display issue occurs
CSS/PNG Gamma Consistency Test Results
A chart showing which browsers the gAMA stripping fix will work in.
PNG Colors in Internet Explorer
An article by Kevin Yank in the Sitepoint Tech Times which details the problem, and the solution.
11 thoughts on “Fixing PNG Gamma”
Comments are closed.
Great tool ! Thx !
Thanks for the post, didn’t realize that there was such a solution. My approach to the stated problem was to abandon PNGs and go back to using GIFs. Now I just need to rationalize using Microsoft’s “AlphaImageLoader Filter” to fix the transparency functionality to fully redeem the PNG format.
@EZ: I’m not convinced PNG is ‘ready for prime time’ just yet, but it’s nice to know that there are options available. I can’t wait until IE6 and Safari 1.3 are forgotten and we can start to use the PNG format freely. It will be really interesting to see the way web design changes once transparency becomes part of the designer’s repertoire…
Just wanted to clarify that, as far as I can tell, none of this has any bearing on the application where PNG was obviously designed to shine: photography (or illustration). Gamma differences can absolutely kill subtleties in artwork, and so the PNG fix really IS a good thing — it’s just that web designers (and I am one) have a tendency to look for the ONE format solution to their problems. Or maybe PNG was originally promoted this way — I don’t recall. But saying “hooray, we can strip the gamma correction and PNGs will be better” seems to ignore the fact that it really CAN be a help, in the right circumstances.
@amateur6: I hate to tell you this, but PNG was designed as replacement for the GIF format, which makes it a web format. It also doesn’t support CMYK color spaces, which makes is unsuitable for print production work. By the way – you should consider posting under a different handle – because of the word “amateur” your comment was tagged as spam as I almost missed it in the deluge.
Hey Jonathan — no worries, I appreciate the correction. And for digging me out of the deluge!
I certainly didn’t mean to imply that it should be used for print; but I still think that it’s eminently suited to web reproduction of fine art. The problem, of course, is the vast disparity between mac and PC gamma, and PNG at least exposed the issue. So it really IS an “advanced” feature — it’s just MORE advanced and exposing the flaws (lack of correction) in everything else!
Don’t get me wrong, I would much prefer to see browsers tackle gamma correction, but I really doubt that will ever happen. In the meantime I think more people in the photographic and art community should look to PNG. Cheers!
@armateur6 –
I see where you are coming from. I misunderstood you original comment – I thought you were suggesting that PNG would be a good format for professional photographers to reproduce their work in print!
For anyone selling artwork or stock photography over the web, PNG + gamma correction should be a real boon, and if browsers automatically strip gamma from PNGs it is like throwing out the baby with the bathwater.
An ideal solution would be if browsers all respected the gamma value contained in a PNG, including the possibility that there is no gamma value specified. Coupled with that, it would be great if graphics applications such as Photoshop gave designers the option to embed or strip the gamma value from a PNG during the creation process. That would eliminate the need for cleanup after the fact using 3rd party applications like TweakPNG.
You have a point right there. Thanks for this.
Mac OS X users,
Try this: http://www.shealanforshaw.com/gammaslamma-11-update-now-available/
Yeah and Hooray!
Thanks for the info, I knew it was a PNG IE problem, but I had no idea how to fix it.
Great tool……
Thanks………..