Comments on: Help me learn to create semi-transparent PNGs for use on the web.

Question: Help me learn to create semi-transparent PNGs for use on the web.

weston — Tue, 20 Sep 2005 17:53:39 -0800

Help me learn to create semi-transparent PNGs for use on the web. Those I'm creating in Macromedia's Fireworks don't seem to work in IE -- even when I use the appropriate IE-specific image filters.

It would seem that I know how to use semi-transparent PNGs as css-specified backgrounds, but not how to create them. I've been succesful when someone else has created them first -- but my own attempts at creating them in Fireworks seem to result in totally transparent failures.

For example, I've tried to copy the fine article on daltonlp.com:

Failed Transparency Example Set 1

Note that both examples on that page work when viewed in Firefox. Note that only the first one works in IE. The same technique is used in both examples in that set. I believe the only difference is the image.

I also tried the IE-only, inline-styled example with fewer moving parts from the canonical ALA article:

Failed Transparency Example Set 2

Note that again, the first example works in IE, and the second doesn't (neither example works in anything but IE).

So: other PNGs work, my Fireworks-spawned PNGs do not. Has anyone else had this kind of problem? In two of the comments after the daltoplp.com article, some individuals mentioned they'd had this same problem using Photoshop, but no one followed up with a solution.

My conclusion is that either (A) there's something I don't know about how to properly export PNGs from Fireworks, or (B) IE struggles with something specific about Fireworks PNGs.

Either way, I could "clearly" use some advice on the semi-transparent PNG creation process.

By: littlegreenlights

littlegreenlights — Tue, 20 Sep 2005 18:06:22 -0800

I'm mostly guessing here, but I think it has something to do with the images being png-24 versus png-8, plus a little IE weirdness. It still seems like there's something weird going on, if you're using the same technique to export and getting different results each time, but . . . read some of these results, especially this one.

By: weston

weston — Tue, 20 Sep 2005 18:21:47 -0800

Hmmm. The article you point to said the 24-bit format is the one that's got the alpha-transparency. I believe I may have done 8-bit in those examples. I'll try adding a 24-bit example to the daltonlp method...

By: Ryvar

Ryvar — Tue, 20 Sep 2005 18:54:06 -0800

Shouldn't RGBA be 32-bit? 0-255 Red, Green, Blue, and Alpha?

By: gsteff

gsteff — Tue, 20 Sep 2005 19:05:15 -0800

Try using Inkscape. Its a vector graphics program, but it lets you import bitmaps and write to PNGs. It handles partial transparency easily, and can all the stuff you linked to. And its free!

By: Ryvar

Ryvar — Tue, 20 Sep 2005 19:09:53 -0800

Ah.

What a horrible and stupid misnomer.

By: stopgap

stopgap — Tue, 20 Sep 2005 19:12:05 -0800

I believe Internet Explorer just flat-out doesn't support alpha transparency. There's a JavaScript work-around, but I'm not sure if works for backgrounds. See more at this A List Apart article.

Supposedly this will be fixed in IE 7, which should have market saturation in, oh, four or five years from now. Gotta love the innovation Microsoft brought to the browser market.

By: Ryvar

Ryvar — Tue, 20 Sep 2005 19:18:06 -0800

Supposedly this will be fixed in IE 7, which should have market saturation in, oh, four or five years from now.

This is offtopic, but: IE7 will be a Windows XP update.

It won't be backported to Win2k, more's the pity.

By: weston

weston — Tue, 20 Sep 2005 19:35:30 -0800

What a horrible and stupid misnomer.

Hmmm. Fireworks does indeed list both PNG32 and PNG24 as output options, along with PNG8.

And, sure enough, PNG 32 works with the transparency hack in IE:

Transparency Example Set 2, with 24, and 32 bit PNGs added

Thank you!