As you probably know by now Flash 8 allows us to dynamically load transparent PNGs and GIFs. That's great in theory - in pratice you might run into the same issue as I did: size. Transparent images of photographic content, like people or product-shots can become quite big when saved as PNGs. That's because the PNG compression algorithm is better suited for images with limited color palettes like type or illustrations.

In a project I'm currently working on I have to load lots of transparent product shots into a gallery. The problem is - each of these images is about 500K in size. And even with broadband that's out of the question. So this is where the capabilities of the BitmapData class come to my help: instead of loading one transparent image I split it up into two components: one part is the RGB image which I save as a JPEG and the other part is the alpha mask which I can save as a GIF (I could save it as a JPEG, too, but especially at the hard edges of black and white masks JPEG might give us undesirable artifacts). After I have loaded both parts I use the compositing capabilities of the BitmapData class to create a transparent image again. The gain? The JPEGs are about 55K in size, the GIFs are about 8K which means 63K instead of 500K - not bad. Plus I circumvent the image antialiasing problem that happens when loading images into Flash 8.

I've written a little MaskImage class to automate the image assembly for me. Here's an example how it works. The original transparent PNG (800x600 pixels) has a size of 645K. Split up into the RGB part and the alpha part they look like this:

(800x600 pixels: 44K)

(800x600 pixels: 11K)

You can download the MaskImage class and the example here.