|
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.
|