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

You can use ming and create the flash on the fly at your backend, here is a sample in PHP that shows masking jpgs

Answer 2

Are there flash specific layering tricks being used here?

Could be. It's possible to manipulate bitmaps in ActionScript, so you could take the Alpha layer from a simple transparent PNG with no colour data, and combine it with the pixel data from a JPEG.

Are there any formats that allow lossy compression with transparency

Yes, JPEG 2000 and Microsoft's HD Photo. Don't hold your breath for browser support though!

Answer 3

If you're refering to the students popping up on the site that's done by masking. To make a complex mask you'll either have to draw it yourself in Flash, or if you have Illustrator you can Live Trace your image to get a pretty good vector approximation of the outline. Flash has a trace bitmap function as well, but the Illustrator version is much more powerful.

Flash CS4 allows you to apply filter effects like drop shadow and blur to MovieClips and text that are rendered at runtime.

So basically:

1. Get image
2. Get vector outline of image
3. Place the vector outline on the layer above the image and apply the mask. You should now be left with just your image with all the white space removed.
4. If you want a drop shadow copy the vector outline onto a layer below the JPEG, line it up with the mask and apply the drop shadow on that bottom layer in Properties>Filters. Make sure it's a MovieClip or you wont be able to place a shadow on it.

If you need more clarification or you want an sample file then drop me an email at jcullinan (at) pinnaclegfx (dot) com

Answer 4

I see some interesting answers. Maybe I can add to that because I ran into the same issue.

How does lossy compression with transparency work in Flash?

It works well, it's like a transparent jpg :)

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

Yes there are:

Check out Durej's Images 2 SWFs and mr.doob's png2swf

Hope it helps. Good luck!

Answer 5

Also, there is this research

http://membled.com/work/apps/lossy_png/

and

http://www.theopavlidis.com/software/pack4png/expages/exindex.htm