JPEG transparency in Flash

5 Comments 5 August 2009

Some people may read this and think it’s pretty obvious, but for others there will be a light bulb pinging in their heads. This is a very simple trick, but it could really help people to optimize their online Flash sites.

When working on the Lipton Infusions site recently, many images were loaded into the site that had to have transparent backgrounds so were compressed as PNGs, but they would have been a far smaller file size compressed as JPEGs (if you are unsure of which compression format to use this article will help explain). Most of the images contained lots of colours, and therefore compressing them as PNGs was really starting to push the weight of the site up, and it was taking quite some time to load. Then a light bulb went off in my head and I realized a clever (or obvious, you decide) way of compressing the images as JPEGs, but keeping them on a transparent background.

When you publish a movie in flash that contains PNGs, if you haven’t specified in the image properties for it to be lossless, the image will be compressed as a JPEG, but will keep it’s transparency. It took a bit of time to place all the images into individual SWFs and publish them, but it massively reduced the size of the site, as can be seen in the examples below:

Original PNG – 108KB

Compiled in SWF – 28KB

The above shows just how much you can save using this technique, a massive 75%. Imagine loading 50 images and you will see that this technique dramatically reduces the size of your Flash site, and the loading speed will be much quicker.

A little tip to help save time – you do not have to re-size the stage so it’s the same size as your images, once you load the SWF into the parent movie it won’t matter.

Posted in Tip

5 Responses to JPEG transparency in Flash

  1. 8 August 2009

    Interesting technique! So you’re essentially taking every PNG asset, placing it into an individual FLA, choosing the “compress as a JPEG” option, then exporting as a SWF which is loaded into your main SWF? This seems like a smart alternative to just loading in PNGs.

    I wonder if there’s a way to automate that process if you are dealing with 100 pngs?

    Thanks for sharing!

  2. 9 August 2009

    Thanks for the comment. Maybe write some JSFL, with all the images in the library, that puts each one on the stage, and exports the SWF with the relevant name, that way you could batch process all the images. I will definitely look into this next time I get some downtime, and share my findings here.

  3. 15 August 2009

    I’m going to use this technique on my next development project. I’ll let you know how it worked out. Thanks again.

  4. 15 August 2009

    I’ll be interested to hear how much you save on file size – let me know! :)

  5. acleveraddress - chris o’byrne » Blog Archive » Automating Image Creation With JSFL

    [...] while ago Steve wrote a post about converting images to SWFs to minimise loading times.  In the right circumstances it can be a very nice tactic, as it makes [...]

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>