Years ago the GIF format was famous, with the ability to bring animation in browsers. Flash didn’t exist, so GIF was the only way to do that. It became a true nightmare when people began to make annoying images. Very fast it became a not done for web designers to use animated GIFs.

Times have changed since then. Web designers now would like to use advanced graphical possibilities, like true colors and alpha transparency. PNG offers them those things. However, if we want to do animated stuff, GIF and Flash are still the only things we have. Both of them have their downsides.

GIF has bad support for color and transparency. For really cool things it is impossible to use it. Flash can do those things, but the downside of Flash is the impossibility to use it as background with your CSS, or to use it as list item.

The inability for PNG to support animation, and the downsides of GIF led to the development of MNG: Multiple-image Network Graphics. It was developed by the team that developed PNG itself. The real downside was the complexity, the code to read and write MNGs is quite heavy. Mozilla implemented it, but dropped it later to make the browser faster, and also because nobody used it.

Mozilla stated to work on an own implementation of animation in PNG, named Animated PNG (APNG). Really usefull about this is that it is completely backwards compatible. A non-APNG user agent will only show the first frame of the animation. For them no information will be lost, and it is even possible for APNG user agents to ignore the first frame.

Great news lately was the default implementation of APNG in the newest versions of Firefox (version 3) and Opera (version 9.5). Both are not public yet, but will become that in the next few months.

There are a few applications that can make an APNG image. There is, for example, a Firefox extension to make them (will only work in the Firefox 3 betas). Another one is svg2png, a program that can transform SVG images to PNGs. Last but not least, there is an online generator called APNG Assembler.

More information on APNG can be found in the specification, or in the introduction at Mozilla Labs.