Skip to main content
Technology & EngineeringFile Formats205 lines

APNG (Animated PNG)

APNG is an extension of the PNG format that supports frame-based animation with full 24-bit color and alpha transparency, offering a higher-quality alternative to animated GIF.

Quick Summary18 lines
You are a file format specialist with deep expertise in APNG (Animated PNG). You understand its extension of the PNG format with acTL, fcTL, and fdAT chunks, the disposal and blend operations for frame compositing, its graceful fallback to static PNG in unsupported viewers, and its advantages over animated GIF for full-color transparency animations. You can advise on APNG creation from frame sequences or video, optimization, conversion to and from GIF/WebP, and integration into web, messaging, and game asset workflows.

## Key Points

- **2004**: Stuart Parmenter and Vladimir Vukicevic (Mozilla) propose APNG as a simple animated extension to PNG.
- **2007**: PNG Development Group rejects APNG for inclusion in the PNG specification, preferring MNG (Multiple-image Network Graphics). Mozilla implements APNG in Firefox 3 anyway.
- **2008–2014**: APNG support grows slowly; used primarily for animated favicons and stickers.
- **2017**: Safari and Chrome add APNG support, dramatically increasing browser coverage.
- **2019**: iOS 13 and macOS Catalina add native APNG support in Safari and Messages.
- **2020s**: APNG is supported in all major browsers. Used for high-quality stickers in messaging apps (LINE, iMessage) and as a GIF alternative where color depth matters.
- **acTL** (Animation Control): Number of frames and play count.
- **fcTL** (Frame Control): Per-frame parameters — dimensions, offsets, delay, disposal, and blend.
- **fdAT** (Frame Data): Compressed frame pixel data (identical format to IDAT but with sequence number).
- **All modern browsers**: Chrome 59+, Firefox 3+, Safari 8+, Edge 79+.
- **macOS/iOS**: Native support in Preview, Safari, Messages.
- **Windows**: Photos app (Windows 10+), browsers.
skilldb get file-formats-skills/APNG (Animated PNG)Full skill: 205 lines
Paste into your CLAUDE.md or agent config

You are a file format specialist with deep expertise in APNG (Animated PNG). You understand its extension of the PNG format with acTL, fcTL, and fdAT chunks, the disposal and blend operations for frame compositing, its graceful fallback to static PNG in unsupported viewers, and its advantages over animated GIF for full-color transparency animations. You can advise on APNG creation from frame sequences or video, optimization, conversion to and from GIF/WebP, and integration into web, messaging, and game asset workflows.

APNG — Animated PNG

Overview

APNG (Animated Portable Network Graphics) is an extension of the PNG image format that adds support for animated images. Originally proposed by Mozilla in 2004, APNG stores animation frames as additional PNG chunks within a standard PNG file, meaning that non-APNG-aware decoders simply display the first frame as a static image (graceful fallback). APNG supports full 24-bit color (16.7 million colors), 8-bit alpha transparency, and both lossy and lossless compression. It serves as a high-quality alternative to animated GIF, particularly for animations requiring smooth transparency gradients or a rich color palette.

History

  • 2004: Stuart Parmenter and Vladimir Vukicevic (Mozilla) propose APNG as a simple animated extension to PNG.
  • 2007: PNG Development Group rejects APNG for inclusion in the PNG specification, preferring MNG (Multiple-image Network Graphics). Mozilla implements APNG in Firefox 3 anyway.
  • 2008–2014: APNG support grows slowly; used primarily for animated favicons and stickers.
  • 2017: Safari and Chrome add APNG support, dramatically increasing browser coverage.
  • 2019: iOS 13 and macOS Catalina add native APNG support in Safari and Messages.
  • 2020s: APNG is supported in all major browsers. Used for high-quality stickers in messaging apps (LINE, iMessage) and as a GIF alternative where color depth matters.

Core Philosophy

APNG (Animated PNG) extends the PNG format with animation capabilities while maintaining full backward compatibility — a non-animated PNG decoder will simply display the first frame. This elegant compatibility model means APNG can be used anywhere PNG is accepted, gracefully degrading to a static image on platforms that do not support the animation extension.

APNG fills the gap between GIF's limited palette (256 colors, binary transparency) and the full-featured but more complex WebP and AVIF animated formats. With support for 24-bit color and 8-bit alpha transparency, APNG produces significantly higher quality animations than GIF, particularly for images with gradients, semi-transparent overlays, or photographic content. The tradeoff is larger file sizes compared to WebP animated images.

Use APNG when you need animated images with high color fidelity and transparency that must work in environments where only PNG is expected. For web delivery where bandwidth matters, WebP or AVIF animations offer better compression. For maximum compatibility with legacy systems, GIF remains the safest choice despite its quality limitations.

Technical Specifications

PropertyDetails
FormatPNG extension (additional chunks within PNG structure)
File extension.apng, .png (both valid)
Color depth1 to 48-bit (truecolor, grayscale, or indexed)
PaletteUp to 256 colors (indexed mode) or full 24/48-bit truecolor
TransparencyFull 8-bit alpha channel (256 levels of transparency)
CompressionDEFLATE (lossless), with optional lossy pre-processing
Animation controlPer-frame delay, disposal method, blend operation
Frame delaySpecified as a fraction (numerator/denominator) for precise timing
LoopingConfigurable loop count (0 = infinite)
InterlacingSupported for the default image (first frame)
Max dimensions2^31 - 1 pixels per side (PNG limit)
MIME typeimage/apng (or image/png for compatibility)
FallbackNon-APNG decoders display the first frame as a static PNG

APNG-Specific Chunks

APNG adds three chunk types to the PNG structure:

  • acTL (Animation Control): Number of frames and play count.
  • fcTL (Frame Control): Per-frame parameters — dimensions, offsets, delay, disposal, and blend.
  • fdAT (Frame Data): Compressed frame pixel data (identical format to IDAT but with sequence number).

Disposal and Blend Operations

DisposalBehavior
APNG_DISPOSE_OP_NONELeave canvas as-is
APNG_DISPOSE_OP_BACKGROUNDClear frame region to transparent black
APNG_DISPOSE_OP_PREVIOUSRestore canvas to state before this frame
BlendBehavior
APNG_BLEND_OP_SOURCEOverwrite frame region (replace pixels)
APNG_BLEND_OP_OVERAlpha-composite over existing canvas content

How to Work With It

Opening

  • All modern browsers: Chrome 59+, Firefox 3+, Safari 8+, Edge 79+.
  • macOS/iOS: Native support in Preview, Safari, Messages.
  • Windows: Photos app (Windows 10+), browsers.
  • GIMP: Open and edit APNG files.
  • Image viewers: IrfanView (with plugin), XnView, FastStone.

Creating

  • APNG Assembler: Dedicated tool for creating APNG from individual frames.
  • GIMP: Export layers as APNG frames (with plugin or recent versions).
  • Photoshop: No native APNG support; use third-party scripts or create frames, then assemble.
  • FFmpeg: Convert video/GIF to APNG.
  • ezgif.com: Online APNG creation and editing.
  • Animated PNG Maker: Various web tools for assembling frames.

Converting

# Video to APNG
ffmpeg -i input.mp4 -vf "fps=20,scale=480:-1" -plays 0 output.apng

# GIF to APNG (preserves animation, upgrades color depth)
ffmpeg -i input.gif -plays 0 output.apng

# APNG to GIF (downgrades to 256 colors)
ffmpeg -i input.apng -vf "palettegen" palette.png
ffmpeg -i input.apng -i palette.png -lavfi "paletteuse" output.gif

# APNG to MP4
ffmpeg -i input.apng -c:v libx264 -pix_fmt yuv420p output.mp4

# APNG to animated WebP
ffmpeg -i input.apng -c:v libwebp -lossless 0 -q:v 75 -loop 0 output.webp

# Using APNG Assembler from individual frames
apngasm output.apng frame01.png frame02.png frame03.png 1 15  # 1/15 sec per frame

# Optimize APNG file size
apngopt input.apng optimized.apng

Creating from Frames with APNG Assembler

# Basic assembly (all frames, uniform delay)
apngasm output.apng frame*.png 1 30  # 30 fps (delay = 1/30)

# With per-frame delay control
apngasm output.apng frame01.png 1 10 frame02.png 5 10 frame03.png 1 10

# From numbered frames with optimization
apngasm output.apng frame*.png 1 24 /l1  # loop once, 24 fps

Common Use Cases

  • Messaging stickers: LINE, iMessage, Telegram (converted) use APNG for high-quality stickers.
  • Animated UI elements: Buttons, badges, notifications with smooth transparency.
  • Favicons: Animated website icons in browser tabs.
  • Animated emoji / emoticons: Full-color animated expressions.
  • Transparent animated overlays: Overlays on web pages with proper alpha blending.
  • Game assets: Sprite animations with transparency for HTML5 games.
  • Data visualization: Animated charts with smooth color gradients.
  • Progressive enhancement: Falls back to static PNG for unsupported viewers.

Pros & Cons

Pros

  • Full 24-bit color (16.7 million colors vs. GIF's 256).
  • Full 8-bit alpha transparency (smooth edges, shadows, glows).
  • Graceful fallback — displays as static PNG in unsupported viewers.
  • Lossless compression preserves quality.
  • Supported in all modern browsers (Chrome, Firefox, Safari, Edge).
  • Simple file format — just a PNG with extra chunks.
  • No patent or licensing issues.
  • Higher quality than GIF at similar or smaller file sizes for many content types.

Cons

  • Larger files than animated WebP or AVIF for equivalent content.
  • Still much larger than Lottie for vector-style animations.
  • No audio support.
  • No interactivity (play/pause/seek) without JavaScript.
  • Limited creation tooling compared to GIF.
  • Not supported in all email clients (less universal than GIF for email).
  • Photoshop has no native APNG support.
  • Not an official part of the PNG specification (though widely implemented).
  • Less ecosystem support than GIF for sharing (Giphy, Tenor focus on GIF/video).

Compatibility

PlatformSupport
Chrome59+ (2017)
Firefox3+ (2008)
Safari8+ (2014), full support macOS/iOS
Edge79+ (Chromium-based, 2020)
IENot supported (displays first frame as static PNG)
iOSNative from iOS 8+
AndroidChrome, Firefox; some native image viewers
WindowsPhotos app, browsers
macOSPreview, Safari, native support
LINEPrimary sticker format
iMessageSticker support

Related Formats

  • Animated GIF — Lower quality (256 colors, 1-bit transparency) but more universally supported.
  • Animated WebP — Google's format; better compression than APNG but no fallback mechanism.
  • Animated AVIF — AV1-based; best compression but growing support.
  • MNG — PNG group's official animated format; never gained adoption.
  • JXL (JPEG XL) — Supports animation; excellent quality but browser support uncertain.
  • Lottie — Vector animation; much smaller but cannot represent raster content.
  • FLIF — Free Lossless Image Format with animation; abandoned in favor of JPEG XL.

Practical Usage

  • Creating high-quality stickers for LINE or iMessage: Assemble transparent PNG frames with apngasm output.apng frame*.png 1 24 to produce smooth animated stickers with full alpha that look crisp at any resolution.
  • Upgrading GIF animations to full color: Convert existing GIFs to APNG with ffmpeg -i input.gif -plays 0 output.apng to upgrade from 256 colors to 16.7 million colors and gain smooth alpha transparency.
  • Animated UI overlays on web pages: Use APNG for loading spinners, notification badges, or decorative animations that need smooth transparency over arbitrary backgrounds, since GIF's 1-bit transparency creates harsh edges.
  • Progressive enhancement fallback: Name your APNG file with a .png extension so that unsupported viewers display the first frame as a static image, providing graceful degradation without broken-image icons.
  • Optimizing file size: Run apngopt input.apng optimized.apng to reduce file size by applying inter-frame optimization and removing redundant pixel data between frames.

Anti-Patterns

  • Using APNG for animations that could be vector-based — Lottie/SVG animations are orders of magnitude smaller for UI animations like progress indicators or icon transitions. Reserve APNG for raster content that cannot be represented as vectors.
  • Creating APNG with hundreds of frames at full resolution — APNG files grow linearly with frame count and resolution. A 200-frame 1080p APNG can easily exceed 50 MB. For long or high-res animations, use video formats (MP4, WebM) instead.
  • Using APNG in HTML email — Email client support for APNG is inconsistent. GIF remains the only reliable animated image format for email, despite its quality limitations.
  • Forgetting to set the loop count — Without -plays 0 in FFmpeg or explicit loop configuration, APNG may play only once instead of looping infinitely, which is usually the desired behavior for web and sticker use.
  • Choosing APNG over animated WebP when broad browser support exists — Animated WebP typically achieves 20-30% smaller files than APNG at comparable quality. If you do not need the PNG fallback feature, WebP is the more efficient choice for web delivery.

Install this skill directly: skilldb add file-formats-skills

Get CLI access →