Why you would use animated PNG instead of GIFIf you are reading this post, it is likely you may already know the virtues of APNG, but in case you've found this an aren't sure let me give a quick explanation. While animated PNGs are not as widely supported as animated GIFs, they are technically superior. GIF files support only 256 colors, while PNG supports 16,777,216. PNG files support alpha transparency, which means that parts of the image can be semi-transparent. With GIF files, a pixel is either completely transparent or completely opaque, which results in jagged outlines on images with transparency when the background is unknown. You can see the differences for yourself with this demonstration.
Unfortunately, as previously mentioned, support for APNG is somewhat limited. It was developed by Mozilla and has been supported by Firefox since 3.0. Opera supported it from 9.5-12.1, but unfortunately they gave up support for APNG when they moved from their own Presto engine to the Blink (formerly WebKit) engine used by Chrome. It is not natively supported by Chrome, currently the most popular browser in use, but there is an extension that will add support for APNG.
So, if you want the widest support, you may still want to use an animated GIF. But if you want quality, you need APNG and you can suggest your users try Firefox or the APNG extension for Chrome.
Installing APNG Assembler on DebianAPNG Assembler, or apngasm on the command-line, is a simple tool for creating APNGs from a series of PNG files. However, you might notice that it is not available in the official Debian repositories for Wheezy. The project has a Linux binary, but it didn't work for me on Debian Wheezy. However, building it from source is incredibly simple. Go to the project files on sourceforge, select the latest version, and download apngasm-x.x-src.zip. Then use the following commands (these work for 2.7, adjust accordingly if using a newer version):
sudo cp apngasm /usr/local/bin
Now apngasm is installed and ready for use. (Note that you must be in the sudo group to use the last command.)
UsageAPNG Assembler doesn't come with a man page, but the command is documented in the readme.txt that comes with the source. Nevertheless, here is a quick overview.
In order to make an animated PNG, you need a series of PNG images whose names end with sequential numbers, like this:
and so forth.
Basic usage is:
apngasm animation.png frame*.png
This produces an animated PNG that loops at 10 frames per second forever. If you want to change the delay between frames, you add two number to the command that represent a fraction of a second delay time. So, to produce an animated PNG that loops at 25fps (1/25 second delay) you would use:
apngasm animation.png frame*.png 1 25
If you what the animation to loop a limited number of times and then stop, you can use the /l options like this:
apngasm animation.png frame*.png /l2
This will cause the animation to play through twice, and then stop.
For backwards compatibility, animated PNGs can be displayed as a regular, non-animated PNG, but only the first frame will be shown. However, animated PNG also has a feature that allows you to skip the first frame. This way, you can use the first frame to display a thumbnail to non-supporting applications while omitting it from the animation. This thumbnail could be a single frame from the middle or end of the animation, possibly with a message informing the viewer that the image contains an animation their browser or viewer is not able to display. Once you have created this thumbnail as your first frame, simply add the /f option:
apngasm animation.png frame*.png /f
Now the first frame will be displayed for viewers that don't support APNG, but omitted from the animation.
Now you are ready go and fill the internet with much better animated images!