Animated PNG demos

A number of demos to show off some of the things that can be done with APNGs.

Demo 1: APNG support

APNG is designed to be backwards-compatible with image viewers which only support PNG. Older image viewers will simply disply the first frame of the animation, like a normal image. A flag can be set to make APNG-aware viewers ignore the first frame, so that it can be used as a staic representation of the animation.

The image below has 2 frames. The first has "APNG not supported" text, and the second has "APNG is supported" text. A program the does not support APNG will display only the first frame, while an APNG-aware program will display only the second frame.

Demo 2: Blending modes

Each APNG frame has a disposal method specified, which controls how the buffer is handled before drawing the next frame. The buffer can be reset to an empty frame, left unmodified, or restored to the beginning of the previous frame.

Demo 3: Animated Alpha

One of the primate goals of APNG was to introduce an animated image format that supported 24-bit color with an 8-bit alpha channels. Pixels in an animated GIF are either completely opaque or completely transparent. This demo has uses an APNG over a HTML <div> to hide or reveal the content. The image is swapped, using Javascript, when you click the button.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Demo 4: Chompy!

"Chompy" is the fun little animated GIF you may have seen on Bugzilla while doing a search. It was made by Klowner ( /, who graciously provided PNGs from the original rendering so I could assemble an APNG version. You can see that the APNG animation, on the bottom, doesn't have a halo effect on non-white backgrounds. To achieve smooth edges with the GIF, you must pre-blend with a fixed background color.

(The APNG version needs cropped a bit to match the size of the GIF, and I think it also has an extra frame or two compared to the GIF version.)

Demo 5: SpinFox

Like Demo 4, this shows how much better animations can look on alternate backgrounds, compared to a pre-blended GIF. Also note that the drop-shadow at the bottom works everywhere.

(The APNG version looks smoother because it includes more frames, and is also slightly larger in size.)

Demo 6: Throbber

The "throbber" displayed in the Firefox OS X theme is a pre-blended GIF. This was easy to notice with my Chromatabs extension, which changed the tab color. Aronnax created an APNG version for the GrApple theme, which looks much better.