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.