IE6 – “The PNG Killer”
Let me first start off by explaining some basics on PNG’s and the GIF. In GIF’s every pixel in the image is a solid color. When you create a transparent GIF you are actually just telling it to make some pixels transparent and to leave the others a single color, which is why it usually looks like crap. With PNG’s there is actually another factor at play called an alpha channel, which adds a transparency level to each pixel. So, essentially the pixels closer to the transparent background in a PNG will have a higher transparency level, which is why PNG’s look so much better than GIF’s.
Enter Internet Explorer 6, the 2nd most popular browser with IE 7 in the lead. One of many problems with IE6 is that it does not support PNG’s. So, what are you to do? Here are some options below….
AlphaImageLoader
This is an activeX solution introduced by Microsoft that you can use to have your PNG’s render in IE6. This works fairly well if you have a single image and are not trying to repeat a background image thats a PNG. I’ve used a couple javascript libraries that wrapped this functionaly very nicely, which i’ve listed below.
http://24ways.org/2007/supersleight-transparent-png-in-ie6
http://www.campbellsdigitalsoup.co.uk/2007/11/27/a-new-png-fix-with-jquerys-helping-hand/
Matted Gifs
This is another option that uses a Matte with a GIF. What this does is makes that crappy looking white border on your Transparent GIF’s match the background color of its container. Instructions for created a Matted GIF in Photoshop are below…
- Go to File -> Save for Web & Devices
- Change your Eyedropper color to whatever color you want
- In the Matte dropdown (right-hand side) select eyedropper color.
- Save it.
Note that you can play with the colors that are actually displayed in the Color Table by turning them on/off if you need to further refine your image, but usually the default works fairly well.
I hope these help you out a bit if you are struggling with transparent images and IE 6.
.matti
