What is APNG?

APNG is an extension to PNG that adds animation to the format. It's designed to be backwards compatible with PNG, so any conforming PNG decoder can decode an PNG file, though it will appear as a static image. It was designed by the Mozilla organization, and implemented in the Firefox 3.0 betas and the Opera 9.5 beta.

What can APNG do for me?

• It supports an alpha channel (better transparency). This can be used to make animations that work on multiple backgrounds.
• It supports true color (24/32bit). So you can avoid the dithering and color banding that GIF often runs into.
• It uses a better compression format (DEFLATE) than GIF (LZW), so your animations can be smaller.

Of course, you have to weigh this against the browser portability issues. At the time of writing (2008/01/25), APNG is only supported by two pre-release versions of browsers. It'll be a while before APNG is supported in any released browsers, and even longer before there is a significant percentage of web users using APNG supporting browsers (not everyone upgrades right away, in other words).

Is APNG related to MNG?

No. MNG was supported in early Firefox builds, but support was dropped, as it was not widely used and the codebase was rather large. When Firefox needed MNG-like functionality, rather than return to MNG they decided to design a new format, APNG. APNG differs from MNG in several ways:

• APNG is backwards compatible with PNG. MNGs have a different signature/magic number, extension, and mimetype from PNG, and can't be decoded with a standard PNG viewer, while APNGs can be rendered (as a static image) by standard PNG viewers.
• APNG is a significantly simpler format. It's essentially PNG plus some animation code borrowed from the GIF implementation, so it can be cheaply implemented in Firefox.
• APNG lacks many of the advanced features MNG provides, like JNG (Lossy JPEG images instead of lossless PNG), seeking, scripting support, and smart frame dropping (frame priority).

So if I'm a web developer, why should I care about APNG?

Because APNG is "sneaky".
Unlike dedicated movie formats (which have mimetypes and extensions users know are animated) and GIF (which people have had plenty of time to get used to), APNG is brand spanking new and pretends to be a regular PNG (which it almost is). How does it "pretend"?

• It usually has the same extension as standard PNGs.
• It has the same signature/magic bytes. Which means...
• It has the same mime-type. image/png is the suggested mimetype, and mod_mime_magic detects APNGs as image/png (because of the above).

So, all this means that users aren't going to know that PNGs can be animated. If they're not using Firefox 3.0 or Opera 9.5, they won't even see them animate.

If you control all the images on your site:

For your own images, this is not a problem, and you don't need to worry about this. If you use APNG, you can simply put up a notice ("Some images on this site use the new APNG format, please use Firefox 3+ or Opera 9.5+ to view") or use browser detection to swap them with GIFs or some other format.

If you run a site where users upload images:

However, if you run a site such as an imageboard/image sharing site, a forum with user-supplied avatars/signatures, etc, this can be a problem. If you don't use one of the new browsers that support APNG, you won't see the animations. Users can abuse this by uploading APNGs with disallowed content in the second frame, and everyone with non-APNG supporting browsers will only see the first, acceptable frame.
In addition, Your software will almost certainly start accepting them right away (unlike a new format, where extension/mime whitelisting might block it). If you disallow animated GIFs, you probably want to disallow APNGs as well, but APNGs will be accepted as long as you have allowed PNG.

What should I do with APNGs uploaded to my site?

There's a few options:

1. Ignore them, and treat them like plain PNGs. This is the easiest option
2. Disallow them completely. This is a good option if your site already disallows animated GIFs, or you don't want to deal with the content moderation issues.
3. Mark them. If your site supports animated/not-animated metadata (for GIFs), you can extend that to support APNGs.
4. Name them properly. Give them an .apng extension when uploaded.

Naturally, which option you take depends on the details of your site.

How can I detect APNGs?

Valid APNGs have an "acTL" chunk somewhere before their first "IDAT" chunk.

Methods:

The options, from simplest/slowest/buggiest to fastest/most complex/most correct:

1. Check all PNG files for the string "acTL", or the more correct "\0\0\0\x08acTL" (hex: 000000086163544C).
2. Find the IDAT chunk (first occurrence of "IDAT"), and see if there is a match for "acTL" before it. (The PHP code does this).
3. "Walk" the chunks, checking each type. If you find an acTL before an IDAT, it's an APNG.

Method 1 can very easily have false positives, Method 2 somewhat less (but still possible)
Method 3 should not have false positives, except possibly in the case of a corrupted PNG.

Generic detection functions:

All functions are in the public domain, and can be used in any program without licensing issues or having to credit the creator(s).

• PHP: identify_apng.php by coda. (Method 2)
• Perl: identify_png.pl by Foone and WAHa. (Method 3)
• Python: identify_png.py by Foone. (Method 3)

Imageboard software:

• Wakaba: patch thread

References

• APNG Specification
• Wikipedia article on APNG
• PNG Specification
• MNG homepage (and specification)
• Bugzilla entry on APNG support
• A post on the png-mng mailing list about the problems with APNG
• APNG project
• Can I use... APNG

About

This document was written by Foone, and was last updated on 2015/03/20. Please send any comments/suggestions to foone@foone.org.