I'm sure many have experienced the frustration of getting png images to coexist within a solid background colour when viewing a page in IE, or maybe even a pattern background for a transparent effect. In most scenarios, designers, both experienced and inexperienced will be using some form of graphics application - perhaps the most common being Photoshop.

So how to deal with the different tones of colours you get when viewing png's within Internet Explorer?

Internet Explorer is not a Compliant Browser - Shocking I know!

Internet Explorer is getting better and finally with IE9 (coming later), there is compatibility with HTML 5 and other nifty things that "compliant" browsers have. Ever wonder why everything seems to display correctly and always seems to work in browsers other than IE? Or how about designers and developers in frustration trying to get things to cooperate in IE browswers? Microsoft's IE browsers are proprietary and they refuse to comply with standards of the web and I guess they were hoping everyone would keep to IE...hence the browser wars. Now you know why.

The Nitty Gritty of PNG's

PNG's are becoming the standard image format when designing web sites because there are many advantages. I won't go into these specifically, but the idea here is to give you a nice mini-application called tweakpng that I have been using for a year now and I have to say that this is ultimately one of my favorite applications to have when designing.

What Happens to png images in ie?

Here is an example with an image (the darker part on the left) without png gamma correction when viewed in Internet Explorer on an equal colour background, which you see on the right side:

Here is an example with an image "with" png gamma correction (deleted) when viewed in Internet Explorer:

Using TweakPNG to get a correct image

When you are creating your sliced images within Photoshop (or any other graphics software of your choice) and saving them as png's, you open the Tweakpng program up and simply drag your png saved images (one at a time though) and delete the "gamma" line of code. Don't start exploring the other elements you may find in the window but the one you want to focus on at this time is Gamma - the culprit  of not matching up with solid background colours of the same colour of your graphic is related to this when viewing in IE.

Basically you drag your png image into the blank window of TweakPNG and highlight that gamma line of code and delete it...save it....then drag another image into the window and do the same thing over. You don't have to clear the window because when you drag the next image into the window, it replaces the old one with the new one. Just don't forget to save it.

Downloading TweakPNG

I will leave the decision to everyone here if they want to try this out. You can download it from here: TweakPNG