Creating 8-bit Alpha Transparent PNG Files

By: Jim Babbage

Page 1 of 1

Set for printing

Alpha Transparency is not limited to 32-bit PNG files.

If you're using Fireworks, that is. And if you export an 8-bit PNG file.

An 8-bit PNG file supports up to 256 colours and can support index (1 colour) transparency, just like a standard GIF file. However, the differences are more notable. While the format does not support animation, it tends to compress better than GIF and allows for alpha (variable) transparency.

A PNG file stores not only image information in the form of data chunks. One of these chunks represents transparency:

"(The) tRNS (Ancillary chunk) contains transparency information. For indexed images, it stores alpha channel values for one or more palette entries. For truecolor and grayscale images, it stores a single pixel value that is to be regarded as fully transparent."

While the capability is there, Photoshop, Gimp and Paintshop Pro do not support this 8-bit alpha transparency. Fireworks does.

Here's an example:

Open or create an image and apply a drop shadow, or glow, to the object, like you see in Figure 1 below. Set the canvas colour to transparent using the Property inspector.

Go to the Optimize panel and choose PNG-8 as your export format. Set your palette to web adaptive, colours to 256 and dithering to 0%. Under transparency, choose Alpha Transparency.

See all those colour swatches with a small box cut out of them? Those colours represent the drop shadow and glow in my sample image. The very first transparent colour block represents the standard transparent colour you would get if you chose index transparency. My sample file exports out at just over 8kb.

If I chose GIF, in this case I would get a smaller file, but I would lose my subtle glow and shadow in the process.

Fireworks can export this 8-bit alpha transparent image, which displays just as we would want in current browsers (great for glows or drop shadows).

Here's an example, placed within a div with a repeating background image:

Another example, on a solid colour:

Pretty cool, eh?

In IE 6 and earlier, you don't get the variable transparency; nor do you get the infamous grey box, but you do get your gif-like one-color transparency, without having to employ a javascript hack like you do with 32-bit PNG's.

I.E. 5.01 I.E 5.5 I.E. 6

If you have a photo-quality image, this might not be an option due to the limited colour range in an 8-bit PNG file, but for solid colour images, or simple gradients, it can work nicely.

This also works for grayscale images. If I take the same file and convert it to grayscale in FW, look what happens to the palette:

Hopefully this opens up some new options for you in working with graphics for your designs.

 

Page 1 of 1 1


download
Download Support Files


Downloads are disabled during your trial period.


Keywords
Fireworks, alpha transparency, export, optimize, png