Why PNG's look different in Internet Explorer

PNG's is a fantastic image format that allows transparency and many other formatting techniques. One of those techniques is gamma correction. Browsers implement this functionality differently and is the reason why PNG's can look different in Internet Explorer:

/* all browers except IE */ PNG image showing colours without gamma correction /* IE */ PNG image showing colours with gamma correction

For once Internet Explorer actually does the right thing and correctly implements gamma correction which slightly changes the appearance of our images. All other browsers do not implement the gamma correction and therefore look different. This has been a problem for a while and comes up when you mix JPEG images with PNG images. Doing this causes problems as some images will have gamma correction and others will not resulting in slightly different shades.

You may be thinking why not just create all PNG images which will result in consistency. But doing this will also breaks your design as you won't be able to match background colours used in your CSS files against colours from images.

A solution to the problem is to download a program that can eliminate gamma correction attributes from an image, therefore resulting in the images looking the same within all browsers. One such program is Tweak PNG

Bart Simpson as a baby with his evil twinThere are two solutions to our problem. The first is to stick with JPEG images as much as possible and only use PNG's when you require transparency. The second is to output all PNG images from out image manipulation programs such as photoshop without gamma correction. This can be a problem as most versions of photoshop do not let you do this so you need to find one that does.