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 and be much more compact than the same image saved as a PNG-24. 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 Adobe Fireworks.

Why Use a PNG Instead of a 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. This basically equates to smaller images, less time downloading, and faster sites.

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

Mac Users

Download a pre-made executable. OR

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

New document properties dialog in photoshop

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.

One of the layers is set to 60% opacity

Step 3

Save the file for web (Alt + Shift + Ctrl + S) and select PNG-24 from the drop-down.

Save for web 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.

Screenshot of IE6 and Firefox rendering a PNG-24 image

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.

Windows explorer before pngquant is run

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

Windows Vista Start Menu

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.

Command prompt showing a pngquant command in Windows Vista

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

Pngquant makes a copy of the file and appends -fs8 to the file name.

The Result

Here is the updated screenshot.

Screenshot of PNG-8 images in IE6 and Firefox

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

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.