As most of us know IE6 does not support PNGs with alpha transparency. We recently updated DTS’s site with some popups that have a drop shadow using PNG-24 images with alpha transparency. Here’s how it looks in IE6 compared to any modern browser (FF, IE7, Opera, Safari, Chrome, etc.). Notice the nasty blue border.
PNG-32 (problems in IE6)
To summarize the article on PNG-8 and PNG-32.
|16.7 million colors (like a JPEG)||256 colors (like a GIF)|
|alpha transparency, not just indexed (like GIF)||alpha transparency (just like PNG-32)|
|doesn’t work in IE6||works in IE6 like a GIF (indexed transparency)|
PNG-8 with alpha transparency (IE6 works, pretty much)
Here’s what the PNG8 looks like in IE6 on our site. Notice that the drop shadow is missing, but the transparency still remains.
How to make Alpha PNG-8 Images
The problem with all of this is that there is only one program that can make this specific kind of PNG-8 – Adobe Fireworks. Photoshop can’t do it, and I’m not sure if any other graphics programs can either. Here’s a step by step for making the PNG-8
1. Open the PNG-32 (or photoshop file)
2. Change the Image Type to “PNG 8”
3. Change to “Alpha Transparency”, then click the “Rebuild” button
Now you will see the new color palette with alpha colors. IE6 will only display the solid colors, not the fully transparent (upper left) or semi-transparent (the three with inset clear boxes).
4. Chose File-Export to save the PNG-8
And that’s it. It takes a little more time but has made our development easier and provides a more stable experience for users.