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!

Onder

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.

Syrian

With PNG8, you get binary alpha, like GIFs. With PNG24, you can keep full alpha and lower the color depth just for the opaque layer. However, it doesn't improve compression much. In my experiment: 200k PNG24 -> 150k PNG24 w/256 color opaque layer -> 50k PNG8 – Onder

You can have PNG with indexed colours and 8-bit alpha. Maybe your image editor doesn't offer you that option for export, but it exists. – Leonerd

Please see my demo page. I am not a graphics expert -- please correct me if this is not what you want! – Syrian

Thanks, Ferdinand and bobince - I didn't know that. I'm using the GIMP and in fact it converts your image's alpha layer to 1-bit. I assume you created it in Photoshop or Fireworks? Here's a link I found explaining how: sitepoint.com/blogs/2007/09/18/png8-the-clear-winner – Onder

Awesome, here are a few command line options pngquant: libpng.org/pub/png/apps/pngquant.html pngnq: pngnq.sourceforge.net – Onder

@Jerph: Yeah, I'm using Fireworks for the rare occasions I have to manipulate graphics :-) – Syrian

Just wanted to add that we've created an online lossy PNG compression tool for this specific purpose. – Benefactor

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.

Nathannathanael

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!

Leonerd

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

Holocaine

Thanks for the link, I never would have found this. – Onder

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

Allonym

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!

Lockard

Answer 7

Also, there is this research

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

and

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

Soloist

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.

Collincolline

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.

Irrelevancy