Animated PNG: Simple Animation with an Alpha Channel
Why Is This a Good Thing?

You can do a lot with GIF animation, but the web has long been missing a simple animation format with full 24-bit color and 8-bit transparency (Alpha channel) to take animation to the next level. Say good-bye to loss of color resolution and lack of transparency control.

For example, take a look at the animations below:

Both show the same GIF animation. Against white it looks great (it was hand-tuned to work with white), but it's not so nice against any other background.

That's where Animated PNG comes in. A single animation will work against any background (solid, patterned, whatever) and still look great, shadows and all. To view the following example properly, you will need a browser that supports APNG such as FireFox 3 (or newer) and Opera 9.5 (or newer):

If all you see is two static images, your browser does not yet support APNG. Too bad. With the right browser, you would be seeing an animation that looks good (well, for a cheesy animation) against any background.

Technical History

APNG stands for "Animated PNG" and is a new extension to the PNG file format that promises to allow the simple creation of gorgeous frame-based animations with 24-bit color and full Alpha-channel support. The big limitation of the GIF format has always been a lack of bits. Each frame is limited to only 256 colors, and even worse, transparency is limited to only 1 bit (opaque or transparent and nothing in between). APNG promises to fix this limitation. You can learn a lot more about the development of this PNG extension at the APNG spec homepage.

GIF Movie Gear (GMG) could already read and write several static image formats with 24-bit color and an Alpha channel, but until now there was no file format that supported animation with such richness.

Big Important Note

The PNG Committee rejected the APNG proposal, making this implementaiton not "official". Two browsers currently have support for APNG 0.10, FireFox 3 (or newer) and Opera 9.5 (or newer), so you can start experimenting with APNG on a web page today. Whether or not this support will continue is uncertain.

Getting Started

1.  Download GIF Movie Gear (APNG support was added in v4.2)
2.  Run the self-installing executable to install the software.
3.  Choose either "Windows XP Icons" or "Other" on the opening dialog. Confirm that Edit>Preferences>Export has the "Maintain 24-bit Data" option checked.
4.  (Optional but recommended) Select View>Transparency As>Custom Color from the menu and choose a good background color. Lime green and hot pink are lovely choices. This will let you see the transparency better.
5.  To save an Animated PNG: From the menu, select File>Save As, select PNG from the file type dropdown, and select Animation from the style dropdown. The animation option will only appear if you have more than one frame.

What Works and What's Not Quite Done

Version 4.2 of GIF Movie Gear supports just about the full APNG 0.10 functionality: frames with 24-bit color and full 8-bit transparency (Alpha channel), option to skip the first frame (Animation>Properties), control of disposal methods (much like in GIF), and control of image blending (APNG-only feature seting in Frame>Properties). Delays are still limited to GIF's 1/100th second granularity (vs. APNG's numerator/denominator capabilities).

A Quick and Dirty Example

Remember the not-so-professional animation at the top of the page? It was made by a non-artist with only a passing knowledge of Photoshop. When opened in GMG, you can see what the individual frames look like:


And the same screenshot with a different background color so that the full Alpha channel transparency is more visible:

The frames were built in Photoshop (it's a Gaussian Blur filter of increasing magnitude), saved out to a layered PSD file (get file), and opened by GMG. The timing was tweaked and disposal method set to Background. The final step was saving it out to PNG as an animation.

Tell Us About It

Well? What do you think? Tell us about it. Email us at apng@gamani.com to rant, rave, whatever. We'd also love to see any cool PNG animations you've built!