APNG is an extension to the PNG specification to add animation features with full alpha-transparency [1] whilst maintaining backwards compatibility — which means that if the application doesn’t support the animation features (or they are turned off) the user sees the first frame of the image.
In spite of failing to be granted official acceptation, support has been added to a number of browsers and applications, the primary aim being to solve background blending issues for the graphics files used in application interfaces, etc. and not to annoy the hell out of website visitors. Support in Opera was added in version 9.50 and whilst Internet Explorer does not support at this time and I can’t see it being added for the sake of the web side of things, I don’t think it unfeasible to expect it to be supported at operating system level — after all, Vista icons can use PNG files.
Although there is an official animated form of PNG in the form of MNG, it has failed to gain widespread application support.
It’s still relatively early days, but there are a number of applications available [2] but as Firefox 3 possesses the ability to both encode and decode APNG files and there is the APNG Edit extension available I installed it. After opening the application via the Tools menu you are presented with a simple and straightforward layout similar [3] to the screenshot. Although there shouldn’t be any real need for copious documentation, adding multiple files via “New Frame” option isn’t necessary as you can drag and drop a selection onto the frames area from a file manager window.
I have placed the test file(s) on a separate page as they can be very distracting.
Note: To stop the animation in Firefox or Opera press the ESC key — to restart them reload the page.
First up for my little play was the image used on my error page as it seems like an tolerable/acceptable use of such files.
I did plan on making a clock for the second test, but as I wanted to generate a reasonably big (width × height) image I thought the file size may be unacceptable, so I turned it into a rev-counter.
Next up was smilies and a folder image. Some time ago I ran was heavily involved with forum theme/image development and had to discount PNG as a replacement due to its lack of animation. Obviously there are limits [1], but APNG actually makes it possible/viable to have one set of smilies for a wide range of themes. As the smilie examples clearly show, the overhead of APNG (the filesizes aren’t large, especially so in this day and age) is more than compensated for, especially as theme support down to smilies level isn’t a common forum feature and lack of animation support in any given browser would be no great loss. I did notice some Frame Rate Discrepancies with these.
And then also a Pool Ball with which, due to my poor planning, I noted an issue with setting the “Skip first frame” option.
As my first test animation only consisted of 2 frames the lack of globally setting the frame delay wasn’t an issue, but as the second was 18 frames it became tedious as there isn’t yet an option to edit the generated animation or save/import the details. I considered editing the default setting in the relevant XML file, but writing a simple/crude script gave me a solution [4];
One of the example scripts is called “croptimize.js” and is a definite must-have feature, especially considering the size of some alpha-transparency PNG files. It does as the name indicates in optimizing the animation by removing duplicated areas in frames and therefore saving only the minimum amount of data required to display the image. Applying it to my test images resulted in considerable savings;
See the examples page for other filesize comparisons.
As I am using a release candidate of Firefox, I haven’t done much repeat testing, but;
before;
then changing;
to;
I noticed that setting low frame delays results in speed discrepancies between Firefox and Opera/XnView, differences which were even more pronounced when generating smilies — they looked like they were on steroids in the latter! This may be a as noted in a Microsoft KB article in emulation of the practice of slowing GIF animations down, but consistency is needed for APNG to be a viable replacement.
See Nonsense disclaimer ;)
[1] Alpha-transparency isn’t a magic cure-all ; it can be likened to how well an image “fits” ; no matter how well a carpet fits in a room, it it’s the wrong colour it ain’t going to look right.
[2] Samples, an online assembler and other valuable information can be found at the Animated PNG website.
[3] On Windows anyway. I can live with the “accept” and “cancel” icons being the wrong way round (for Windows), but they weren’t appealing to me, so I replaced them and also “copy fitted” the screenshot.
[4] Obviously this would be something better implemented by adding it to the interface — I have enough distractions already…
See also ;