Creating semi-transparent web images using PNG8

I recently read an article in [link http://www.sitepoint.com/newsletter/viewissue.php?id=5&issue=37#5]SitePoint's Design View newsletter by Alex Walker[/link] which was of great interest to me and I'm sure will be to you too, so I thought I would share it here. It is a technique for achieving semi-transparency for web images using the PNG8 file format and Fireworks. Apparently, this technique only works in Fireworks.

Here's an abridged and emphasised version of the article:

"This is nothing amazingly new, In fact it's a method that's been around for years, but I'm constantly surprised by how many people don't know about it.

As you probably already know, PNG comes in two flavors -- 8-bit and 32-bit. It's the 32-bit version that gets most of the fanfare.

PNG32's major characteristics are:

* It uses a flexible "JPEG-like" RGB color model, rather than a limited palette as GIF does.
* It employs a completely lossless compression method, allowing you to save and resave your image with no loss of quality.
* Lossless compression does come at some cost -- PNG images are always much fatter than their JPEG equivalents.
* It can reproduce complex, graded transparency settings, similar to a PSD or TIF file.

Of course, Microsoft's scant regard for the PNG spec (authored way back in 1996) meant that the announcement of the glorious PNG format fell on deaf ears. And rightly so -- in that year, Internet Explorer had roughly 95% of the market, so naturally an image format that rendered transparency as a solid, dishwater grey in most people's browsers qualified as a total non-event for the majority of developers.

PNG8's major characteristics are:

* It employs a palette-based color model (sometimes called an indexed palette), like the one that GIF uses.
* It can't animate like GIF.
* It offers GIF-like 1-bit transparency. Pixels are either solid or completely transparent, but never partially see-through.

Although this last point is generally accepted as fact, it isn't strictly true, and this is the topic we'll be examining today.

Transparency information for all PNGs is contained in a section of the file called a chunk, and [link http://en.wikipedia.org/wiki/Portable_Network_Graphics#Ancillary_chunks]according to the spec, for indexed images, it stores alpha channel values for one or more palette entries[/link].

In other words, the chunk is allowed to have more than one transparency color.

Let's try an example.

We'll begin in Fireworks with a simple illustration that I've given a yellow translucent glow. As you can see in the screenshot below, the background is visible through the glow.

[img http://aycu08.webshots.com/image/29047/2001565548956968601_rs.jpg]

If we set our file format to PNG8 - indexed transparency, we get a result very much like any transparent GIF you might see. One color chip in our palette is set aside for the alpha channel, and all semi-transparent colors are flattened into the background color and rendered opaque.

[img http://aycu08.webshots.com/image/26367/2001538520810857199_rs.jpg]

However, if we switch from index to alpha transparency, things get interesting.

[img http://aycu21.webshots.com/image/30180/2001503027263853296_rs.jpg]

While our default alpha chip is still there, our PNG8 palette preview now shows a new type of color chip with a transparent chiplet cut out of the top-left corner. These are our semi-transparent colors.

Let's export the graphic and see what our web browsers make of it. If you want to try your own quick tests, [link http://www.sitepoint.com/examples/8bit/]the page is here[/link].

[img http://aycu09.webshots.com/image/27648/2001515731051553846_rs.jpg]

As you can see in the diagram above, all four modern browsers render the yellow glow effect beautifully, with subtly varying levels of transparency. No issues there.

But what about those cranky older IEs? Are they going to suck the life out of the party again?

The answer is: not necessarily.

[img http://aycu28.webshots.com/image/29627/2001548446625159880_rs.jpg]

Although older browsers won't render the gentle glow effect, they'll happily ignore it while continuing to render the 100% transparent parts in glorious, GIF-like, 1-bit alpha. Not perfect, but not tragic either -- particularly when compared to the ugly grey boxes that accompany unhacked PNG32s on older versions of IE.

Amazingly, Fireworks seems to be the only graphics app that supports this semi-transparent PNG8 export feature -- and it has done so since at least version 3.

I can certainly confirm that none of Photoshop, Gimp, Paintshop Pro, or Xara has this functionality built-in. Perhaps there are plugins out there that can inject super PNG powers into these apps, but I haven't seen them. So if you have even an older version of Fireworks hanging around, it's probably worth holding onto just for this feature!

Summary

It seems there are very few reasons for not using more 8-bit Fireworks PNGs in our work. In many typical situations, between 60% and 80% of users will be using a browser that fully supports these files.

[img http://aycu02.webshots.com/image/27481/2001583431150172343_rs.jpg]

The remaining IE5-6 users will see a slightly jaggier but often very acceptable version of the same image. The example to the right is used on the sitepoint.com home page, and I doubt IE6 users are aware that they're missing anything.

The generated files are small -- the light globe image used in the examples above was less than 6k. I generated a PNG32 version of the same image and it was 3 times the size.

And as they have no reliance on browser hacks, JavaScript, Flash, DirectX, or any other third-party technology, it's difficult for them to fail.

While there will still be times when full transparency control in all browsers will demand the PNG32 hacks, personally I think PNG8 should become the default choice for web transparency effects."