APNG: Browser Support, Features, Use Cases

What is APNG?

APNG extends the W3C Portable Network Graphics (PNG) standard with multi-frame animation. Mozilla engineers Stuart Parmenter and Vladimir Vukićević created the format to add animated UI graphics to the web. APNG adds three chunks to a base PNG and falls back to the first frame in any decoder without animation support.

Which browsers does APNG support?

APNG works in every modern browser, including Chrome, Edge, Firefox, Safari on macOS and iOS, Opera, and Samsung Internet. Internet Explorer and the legacy EdgeHTML browser never added native APNG support and only display the first frame.

What are the key features of APNG?

APNG offers six features that set it apart from regular PNG and animated GIF: multi-frame animation, full color depth, alpha transparency, lossless compression, backward compatibility, and a stable MIME type. Together, they let teams ship sharp animated graphics without the color banding or jagged edges that GIF produces.

• Multi-frame animation: APNG stores multiple frames in a single .apng or .png file using three chunks (acTL, fcTL, and fdAT). Each frame can have its own delay, position, and disposal mode.
• 24-bit color: APNG supports the full RGB color space with 16.7 million colors, while GIF caps out at 256 colors per frame. The wider palette removes the need for dithering.
• 8-bit alpha transparency: APNG encodes per-pixel opacity for smooth, anti-aliased edges and partial transparency. GIF only supports binary on or off transparency.
• Lossless compression: APNG uses the same DEFLATE compression as PNG, so re-saving an APNG never degrades quality. Optimizers like Zopfli squeeze APNG further with no quality loss.
• Backward compatibility: Any PNG decoder that does not understand the APNG chunks renders the first frame as a static PNG, so the file never breaks the page on older browsers.
• Standard MIME type and extension: The MIME type is image/apng and the file extension is .apng or .png. Browsers detect APNG by reading the acTL chunk in the file header.

What are the use cases of APNG?

APNG fits any animation that needs sharp, lossless detail and full alpha transparency on a transparent background. The format pairs well with UI graphics, animated stickers, and short looping animations where image quality matters more than the smallest possible file size.

• Apple iMessage animated stickers: Apple uses APNG inside iOS for sticker packs in iMessage, since APNG keeps alpha edges clean against any chat background.
• Discord and Slack custom emoji: Discord and Slack accept APNG as a custom emoji upload format. The lossless quality keeps tiny 32x32 emojis sharp at native size.
• Browser UI animations: Mozilla originally built APNG for throbbers and progress indicators inside the Firefox interface, and the same use case still applies for in-page UI animations and loading spinners.
• Animated logos and badges: APNG handles animated logos and product badges where the brand color and alpha edge quality must stay pixel-perfect, with no GIF-style halo around the artwork.
• Short looping animations: Any short loop that needs more than 256 colors or anti-aliased edges (a particle effect, a glow, a soft fade) fits APNG better than GIF.
• Animated favicons: Modern browsers use APNG-aware decoders to render animated favicons in browser tabs, so a single APNG file replaces a JavaScript canvas animation.

What are the known issues with APNG?

APNG has the broadest reach of any animated image format after GIF, but a few real edge cases still trip up production sites. The biggest hits are missing IE support, larger files than WebP, and gaps in popular image-editing tools.

• Internet Explorer never supported it: Every IE version (5.5 through 11) treats APNG as a static PNG and shows only the first frame. Sites that target IE need a separate animated GIF or static PNG fallback.
• Larger files than WebP: APNG's lossless DEFLATE compression produces files about 2 to 3 times larger than the same animation in lossy WebP. For long animations, the file size gap matters on mobile networks.
• Limited authoring tool support: Photoshop, GIMP, and most desktop image editors do not export APNG by default. Authors usually need APNG Assembler, ezgif, or a Node.js library like apngasm to encode APNG.
• Older Safari only displays the first frame: Safari 3 to 7 on macOS and iOS 3 to 7 show only the first frame. iPhones still on legacy iOS need a fallback GIF or static PNG.
• No native HDR or wide-gamut profile: APNG inherits PNG's sRGB-only color profile, so wide-gamut and HDR animations are out of scope. Use AVIF or HEIC for HDR animation work.
• Frame rate cap: APNG frame delay uses a 1/100 second granularity per the spec, so smooth high-frame-rate animation above 100 fps is not possible inside one APNG file.
• Larger than equivalent SVG for vector content: For purely vector-style animations, an SVG with SMIL or CSS keyframes ships fewer bytes than APNG. Use APNG only when the source art is raster.

In my experience, the most surprising failure happens with Photoshop's Save for Web. It accepts a multi-frame timeline but exports as a static PNG with no warning, leaving the developer to discover the missing animation only in QA. Always confirm the output file with a tool that reads the acTL chunk before shipping.

Citations

All APNG version numbers and platform notes in this guide come from these primary sources:

• MDN Web Docs - Image file type and format guide: developer.mozilla.org/en-US/docs/Web/Media/Guides/Formats/Image_types
• MDN Web Docs - Animated PNG graphics (APNG): developer.mozilla.org/en-US/docs/Mozilla/Tech/APNG
• Wikipedia - APNG: en.wikipedia.org/wiki/APNG
• W3C - PNG (Portable Network Graphics) Specification: w3.org/TR/png
• W3C PNG Working Draft (with APNG section): w3c.github.io/png
• MozillaWiki - APNG Specification: wiki.mozilla.org/APNG_Specification
• Microsoft Edge Developer Platform - APNG Support issue: developer.microsoft.com/en-us/microsoft-edge/platform/issues/105825
• Chrome for Developers - New in Chrome 59: developer.chrome.com/blog/new-in-chrome-59
• Apple Developer - Creating a Sticker Pack: developer.apple.com/documentation/messages/creating_a_sticker_pack
• W3C PNG home page: w3.org/Graphics/PNG