One advantage of PNG is full alpha transparency, which allows you to have smooth edges and shadows 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 coul