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.
I’ll be interested to hear how much you save on file size – let me know! 🙂
15 Aug 2009I’m going to use this technique on my next development project. I’ll let you know how it worked out. Thanks again.
15 Aug 2009Thanks 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.
9 Aug 2009Interesting 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!
8 Aug 2009