Alpha Transparency in PNG-8 Images Without Using Fireworks
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
Before We Continue
Before we continue, you’ll need to download your free copy of pngquant and install using the instructions below.
- Download pngquant.
- Drag the .exe file over to your C:\Windows\System32 folder.
Producing and Saving the PNG Image
Open up your image editing program. For the purpose of demonstration, I’m using Photoshop, but you could also achieve the same result by using GIMP.
Create a new document (Ctrl + N).
I am only using the text tool for this demonstration, but you could (and should) do this with your approved design file when you slice up your PSD.
The file I created has 3 text layers. I set the opacity to 60% for the layer containing the text “semitransparent” and gave all the layers an ugly outer glow.
Save the file for web (Alt + Shift + Ctrl + S) and select PNG-24 from the drop-down.
A PNG-24 file, sometimes called PNG-32, actually consists of 8-bit color for each of the red, green, and blue channels plus another 8-bits for the alpha channel which contains the transparency information.
Converting to PNG-8
If you were to implement the image as is, you would see light gray for the transparent pixels when viewed in IE6.
I’m using IETester to test how the image would render in IE6 on the left. The right side is a screenshot of Firefox and shows how modern browsers would display the image.
First, place any PNG-24 files that you would like to covert in a folder and drag it to a convenient location. I placed my folder, called “ui,” in the C drive root.
It is best to put the file in a location that doesn’t contain spaces and is close to the root folder to save some typing in subsequent steps.
Now we need to convert the image to 8-bit by using pngquant which we downloaded earlier. Open up the command prompt on a PC (Start > Run > cmd) or Terminal on a Mac (Applications > Utilities).
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.
Here is the updated screenshot.
IE6 will degrade the image gracefully and only render the fully opaque pixels. It does not have the outer glow or the word “semitransparent” because that layer was set to 60% opacity in Photoshop. Firefox and other modern browsers will render the alpha transparency as it should.
More About Pngquant
Pngquant is capable of optimizing a whole folder full of images at a time. All you have to do is use the wildcard selector (“*”) instead of specifying a file name. If I had wanted to do the entire contents of the “ui” folder in the example above, I would use
pngquant 256 c:\ui\*.png in the command line.
Pngquant has other options for optimizing files. To see an available list of options, simply type in “pngquant” in the command line.
Don’t Like the Command Line?
Windows users can download Manfred, a free pngquant GUI for even easier optimizations.
Make it Even Faster
Once you have converted your PNG-24 images to PNG-8, you can run the images through Smush.it for even greater speed and performance benefits, or a host of other optimizations which I detailed in my website optimization series.
At the time of this writing, npngquant, a new version of pngquant which promises better performance and more intelligent optimizations is available over at SourceForge. In testing for this article, I found it to be buggy and hence did not include instructions for it. I am hopeful the kinks get worked out quickly since it looks to have some noteworthy improvements over the original pngquant detailed in this article.
There are many creative possibilities when using transparency on the web which we are just now starting to explore. The methods shown can put this technique in your design toolbox, even if you don’t use Fireworks and will hopefully assist you with coming up with inspiring designs.