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.

Answer 2

I'm developing pngquant , which generates paletted PNGs with full alpha .

The conversion to palette is pretty close to being lossy compression and gives similarly good results — you can often reduce image sizes by 60-70% with little quality loss.

I've also created Mac GUI for it which includes lossy filter for PNGs (posterization with appropriately selected levels). That technique reduces images by about 30%, but works with 24-bit images.

Answer 3

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 4

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 5

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 6

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 7

Also, there is this research

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

and

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

Answer 8

You can use a JPEG and a mask. The mask could be bitmap (should compress losslessly as PNG or GIF quite well), or a vector.

For most web use, package these together as an SVG - http://peterhrynkow.com/how-to-compress-a-png-like-a-jpeg/

For some applications, you might use them separately. It allows you to re-use masks, when you have the same shape but a different texture. It also might just be better for your workflow or framework of choice.

Answer 9

PNG does support lossy compression, but it's terrible compared to JPEG. For example, here's a section of an image that has been compressed to 100kb with both PNG and JPEG:

So you can see that PNG files don't handle subtle gradients well. They're not designed to do that.

It looks like the best bet in the near-term is to wait for WebP support , which is actually available in all major browsers already, but only in recent versions of Safari (as of writing).

The new AVIF is also a contender in the lossy-transparency space, but it is only supported in Chrome, Opera and Firefox as of writing (Firefox 86 and later). Hopefully other browsers add support for this soon, because it has very good perceptual characteristics for high compression ratios.