Home    Blog

PNG Transparency in IE 6

There are many articles how to handle this issue. The most prevelant is to convert the PNG from 24 bit to 8 bit
using adobe Fireworks

Snippet from ethangardner:
Web designers are starting to discover that 8-bit PNG files can be used to achieve semi-transparency (alpha transparency) that will gracefully degrade in IE6. Most of the posts around the web focus on using Adobe Fireworks to achieve semi-transparency, but what about the rest of us that don’t use Fireworks?

Today, I’ll demonstrate an alternative technique to show you how to achieve alpha transparency in PNG-8 images without having to shell out the cash for Adobe Fireworks.

Why Use PNG Instead of GIF?
GIF files only support binary transparency meaning that either a pixel is either fully opaque or fully transparent. On the other hand, PNG (pronounced "ping”) files support semi-transparent pixels and also offer a reduction in size over GIF files when using the 8-bit variety. The benefit of this can be summed up by this simple equation:

Smaller Images = Less Time Downloading = Faster Site

Both PNG-8 and GIF files are limited to 256-colors. Aside from the speed benefit, PNG-8 files can contain semi-transparency in modern browsers (Firefox, Opera, IE7+, Chrome, and Safari) and do not require CSS hacks or Javascript to implement.

Before We Continue
Before we continue, you’ll need to download your free copy of pngquant and install using the instructions below.

Windows Users
Download pngquant.

At the prompt type in pngquant (number of colors) pathtofile\filename.png. In my case, I am optimizing a file called semitransparent.png inside of the ui folder and am optimizing to 8-bit which equates to 256-colors, so I’d type pngquant 256 c:\ui\semitransparent.png and press enter.

Pngquant creates a copy of the file and will append -fs8 to the end of the file name. This file is ready to use.

The PNGQUANT conversion worked so-so for me.  Some image files worked fine in IE6 but others after conversion failed to display at all.
This was not a 100% win for me.

Supposedly online converters which did not work for me
(106.75 KB)