Geek Answers Handbook

Lossy image compression and transparency for the web?

One of the benefits of PNG is its 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, provides greater compressibility for complex images, but without transparency.

Finally, I saw Flash elements ( example here ) with highly compressed images that also have smooth edges and shadows. I know little about Flash and have no idea how to do this. Basically this is the effect that I would like to do - a large, complex image with transparent and / or shaded edges.

My questions:

How is lossy compression performed with transparency in Flash?

Are any falsified background tricks used? Are the shadows generated or rasterized into an image, as I would have done with PNG.

Are there any scenarios for creating a SWF or SWF that could replace a PNG image with a lost compressed version?

I am thinking of a gradual improvement to increase the loading speed of certain design elements. If this does not exist, would it be possible to record it?

Are there any formats that allow lossy compression with transparency

It was hard for me to find specific information about this. DjVu can be a candidate? Should we encourage browser developers to support a different format?

Are there other solutions to this problem?

Doing everything in Flash or accepting huge file sizes are current options. Some other features:

  • SVG and canvas can use edges, but IE is not supported.
  • You can cut PNG along scan lines and compress them using JPEG, leaving the edges in PNG. This would be unpleasant in the source, but it would work in all browsers. Sounds like a fun project, I'll write it by morning. :)
  • You can write a lossy image filter that can reduce the color complexity along the scan lines of the PNG algorithm to improve PNG compression. I just knew that this was supposed to exist, but I could not find it. Does anyone know about this?

Thank you for your help!

+6
flash transparency png
source share
8 answers

One of the benefits of PNG is its 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.

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

+6
source share

Are there any background flash tricks used?

May be. You can manipulate bitmaps in ActionScript, so you can take the Alpha layer from a simple transparent PNG without color data and combine it with pixel data from JPEG.

Are there any lossy compression formats with transparency?

Yes, JPEG 2000 and Microsoft HD Photo . Do not hold your breath to support the browser!

+2
source share

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

+1
source share

If you link to students who appear on the site that are disguised. To create a complex mask, you will have to either 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 also has a trace bitmap feature, but the Illustrator version is much more powerful.

Flash CS4 allows you to apply filter effects such as shadow and blur in MovieClips and text displayed at runtime.

So basically:

  • Get image
  • Get vector outline image
  • Place the vector outline on the layer above the image and apply a mask. Now you should leave only your image with the space removed.
  • If you want a drop of shadow to copy a vector outline onto a layer under JPEG, align it with a mask and apply a shadow on this bottom layer in Properties> Filters. Make sure it is MovieClip, or you cannot place a shadow on it.

If you need more clarification or want to get a sample file, write me an email at jcullinan (at) pinnaclegfx (dot) com

+1
source share

I see some interesting answers. Maybe I can add to this because I ran into the same problem.

How is lossy compression performed with transparency in Flash?

It works well, it is like transparent jpg :)

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

Yes there is:

Check out Durej Images 2 SWF and Mr.dodo png2swf

Hope this helps. Good luck

+1
source share

I am developing pngquant that generates packaged PNGs with full alpha.

Converting to a palette is quite close to lossy compression and gives similar good results - you can often reduce image sizes by 60-70% with a slight loss in quality.

I also created a Mac GUI for it , which includes a lossy filter for PNG (posterization with an appropriately selected level). This technology reduces images by about 30%, but works with 24-bit images.

+1
source share

You can use jpeg and mask. The mask can be raster (you need to compress without loss, since PNG or GIF is good enough) or a vector.

For most web applications, pack them together as an SVG - http://peterhrynkow.com/how-to-compress-a-png-like-a-jpeg/

For some applications, you can use them separately. This allows you to reuse masks when you have the same shape, but with a different texture. It may also be better for your workflow or framework of choice.

0
source share

More articles:


All Articles