PNG images have been the long-term answer to all graphical woes in the web design world for years. But problem after problem arises in the use of PNGs, which is why most designers are still resorting to GIFs or JPEGs for their web graphics. For many years the problem wasn’t the PNG format itself, but the lack of browser support towards it. However all that has changed now and all major browsers including Internet Explorer, Firefox, Netscape, Opera, and Safari have PNG support.

There has, however, been deep-seated problem in that few people could ever figure out why PNGs appear darker in IE and don't match CSS colors (and this problem still exists even with the beta release of IE7). This has discouraged many people from using PNGs at all.

But there’s a fix to this problem, though it sacrifices one of PNGs greatest capabilities! What you will need is a program like TweakPNG (yes, it's free), which allows you to edit PNG chunks and compress PNG file sizes much better then Photoshop.

Using TweakPNG, simply open up your PNG image and remove the gAMA chunk. This will totally fix your problem of PNG images not matching CSS colors in IE. Also remove the pHYs and iCCP if you’re concerned about file size (and remove cHRM if you’re not using any transparency), as those chunks aren’t needed to get a PNG to display correctly in the different browsers.

So what’s going on? Well, I advise you take a look at the following link. It will explain what we just removed: PNG (Portable Network Graphics) and Gamma

Q: “That’s so cool! I wish GIFs or JPEGs could do that! But why did I have to remove gAMA in order to make PNGs look right in IE?” Now I can’t take advantage of it!!!
A: Good question and simple answer. IE doesn’t have a proper gamut setting, so it misuses the gAMA information that the PNG provides and displays something darker then it’s supposed to be. So if you remove the gAMA chunk you'll fix the IE problem, but once again your images will act like GIFs or JPEGs when it comes to how they act across systems with different gamma settings. A shame really, as it’s a really cool feature!

- Tutorial written by Heri

Automatic Translations: