Combining animation frames to save space

Question

I'm working on a project that uses a lot of graphics files. We've got about 500 60x60 PNG files making up several different animations (about 80), and taking up about 2MB of space. In the code, I just draw each frame one by one to render an animation. As an example, one of the animations is made up of 3 frames, each about 4 KB in size. My question is whether there is anything we can do to decrease the size of these images.

We're relying pretty heavily on the transparency in the images, so converting to JPG is out. Converting to GIF was an option, but the quality of the rendered images was too low, so I don't think we can use that.

PNGCrush saved us about 20 KB across all images, so didn't help that much.

Between each frame of an animation there isn't a lot of change in the data.

Answer 1

You can turn all the images to JPG and create another B&W image for each image that acts as the alpha channel that can also be a JPG (These should be very compressible), just manage the transparency yourself.

You can also convert all the images to one big byte array and apply a LZ variation (LZO/ZLIB should work just fine) on the array, this should save you, at least, 15%.

Answer 2

You could use JPEG2000 to store the images. It has a very good compression and supports alpha just like PNG (and it has both lossy and lossless modes), but it uses wavelets which demand floating-point processors (in case that is a problem).

Another possibility is to:

• Convert the first image to JPEG and the alpha channel to B/W JPEG.
• Calculate the delta (difference) from first to second image.
• Compress the delta (again as JPEG).
• If it's big at high quality, lower the quality.