The Animated Portable Network Graphics (APNG) is an unofficial extension to the Portable Network Graphics (PNG) file format that supports animation. PNG does not support animation natively, but APNG brings animation to PNG files that work similarly to animated GIF files. APNG supports 24-bit images while retaining 8-bit transparency which is not available in GIFs. It also retains backward compatibility with non-animated PNG files. APNG is a new technology which is still not adopted by most browsers; Firefox 3 and Opera 9.5 are the only browsers that support APNG.
Example animated PNG.
Why APNG is better than GIF?
From Mozilla Labs:
The two most apparent problems are that GIF images can only contain 256 colors, and lack support for partially-transparent pixels. This results in images which often look grainy or rough, and which do not smoothly blend into their background.
Let’s take the following example:
Both show the same GIF animation. Against white it looks great but it’s not so nice against the colored background.
But with animated PNGs, a single animation works against any background because APNG supports transparency that provides better resolution and color. See how the following animated PNG looks equally good against both backgrounds. You will require Firefox 3 and Opera 9.5 or higher to view it. (Animated images credit: GIF Movie Gear)
APNG is still not ready for the web due to it’s limited support. But within a few years as browsers start embracing the new format, APNG will start getting wider acceptance among web designers and web users.
How to create animated PNG?
Even though APNG is still some way off, we can get ourselves acquainted with some of the tools required to create them. So here are 4 free tools to create animated PNGs.
1. APNG Editor is a simple Firefox addon for creating animated PNGs inside Firefox. It can create animation by assembling individual images, or by running a user-created script to render each frame in a Canvas tag. It’s still beta but functional and includes several features such as:
- Load each frame from any PNG file
- Set loop control (play forever, once, X times)
- Optionally set the first frame (displayed in older browsers) to be hidden in newer browsers.
- Set the offset of each frame from the top-left corner of the animation
- Set the time to display each frame
- Set disposal options (clear image, keep image, revert frame)
2. APNG Anime Maker is a standalone animated PNG maker. It too enables you to load individual frames, set delay and frame offset. It includes a number of disposal methods (keep background, keep previous image, clear image) and blending methods (overwrite the current contents of the frame’s output buffer region; compose frame onto the output buffer based on its alpha). Additionally it allows optimization of the images and adjusting of compression levels.
3. JapngEditor is a Java based APNG editor that requires Java 6. Features includes frame delays, disposal methods, blending methods and frame offsets.
4. APNG Assembler is an online application that allows you to create an
Animated PNG from a set of static PNG files. The sequence of PNG files should have the same size, color depth, transparency, color pallete etc and ordered alphabetically or numerically. This set of PNGs should then be archived in the ZIP format and upload online. The online tool then creates an animated PNG from the uploaded files with a time delay set by the user.