Alpha Transparency in PNG-8 Images Without Using Fireworks

Written by Ethan Gardner Web Design

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.
• Drag the .exe file over to your C:\Windows\System32 folder.

Mac Users

Download a pre-made executable.

OR

• Download pngquant.
• Follow the instructions to compile and install from the source.

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.

Step 1

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.

Step 2

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.

Step 3

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.

Step 1

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.

Step 2

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

Step 3

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 Result

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

Have a Lot of Images to Optimize?

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.

Other Options

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.

More Developments

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.

Conclusion

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.