Lossy image compression, plus transparency, for the web?

Question

One advantage of PNG is full alpha transparency, which allows you to have smooth edges and shadows in in web designs. The main disadvantage is that it only supports lossless compression, which for complex images means a very large file size.

JPEG on the other hand offers great compressibility for complex images, but no transparency.

And finally, I've seen Flash elements (example here) with highly compressed images that also have smoothed edges and shadows. I don't know much about Flash and have no idea how this is accomplished. This is basically the effect I would like to be able to do - a large, complex image with transparent and/or shadowed edges.

My questions are:

How does lossy compression with transparency work in Flash?

Are there flash specific layering tricks being used here? Are the shadows generated or rasterized into the image as I would do with a PNG.

Are there any SWFs or SWF generating scripts that could replace a PNG image with a lossily compressed version?

I'm thinking progressive enhancement to improve loading speed of certain design elements. If this doesn't exist, would it be feasible to write it?

Are there any formats that allow lossy compression with transparency

It's been hard for me to find specific info on this. DjVu might be a candidate? Should we be pushing browser makers to support another format?

Are there other solutions to this problem?

Doing everything in Flash or accepting enormous file sizes are the current options. Some other possibilities:

• SVG and canvas may be able to apply edges, but aren't supported by IE.
• You could cut up a PNG along scan lines and compress those with JPEG, leaving the edges as PNG. This would be nasty in source, but it would work in all browsers. Sounds like a fun project, I'll write it by the morning. :)
• You could write a lossy image filter that can decrease color complexity along the PNG algorithm's scan lines to improve compression within the PNG format. I just knew this had to exist, but I couldn't find it. Anyone know of this?

Thanks for your help!

Answer 1

One advantage of PNG is full alpha transparency, which allows you to have smooth edges and shadows in in web designs. The main disadvantage is that it only supports lossless compression, which for complex images means a very large file size.

You are wrong. You can use PNG with lossy compression (8-bit indexed colors) and alpha transparency.