About

Animated PNG (APNG) enjoys broad browser support but near-zero compatibility with video players, editors, and social platforms. Attempting to share an APNG on most messaging apps yields a static first frame. This converter parses the raw APNG binary structure - reading acTL (animation control), fcTL (frame control), and fdAT (frame data) chunks - then reconstructs each frame onto a canvas, respecting per-frame dispose_op and blend_op flags defined in the APNG specification. The canvas stream is captured via the MediaRecorder API and encoded into a playable video container. All processing runs locally in your browser. No file ever leaves your machine. Note: output uses WebM/VP9 encoding internally (the most broadly supported codec for MediaRecorder). Actual MP4 (H.264) container output depends on browser codec availability. Chrome on desktop typically produces VP9 WebM; Safari may produce MP4 natively. The tool approximates original frame timing but cannot reproduce sub-millisecond precision due to browser event loop constraints.

Formulas

Each APNG frame specifies its display duration via two fields in the fcTL chunk:

delay = delay_numdelay_den

When delay_den = 0, the spec mandates treating it as 100, yielding units of 1/100 second. The effective frame rate across the animation is:

FPS_eff = NN∑i=1 delay_i

where N = total number of frames. For the MediaRecorder bitrate, the tool computes:

bitrate = width × height × FPS × Q

where Q is a quality multiplier: 2 for low, 5 for medium, 10 for high, and 20 for maximum quality. The dispose_op controls canvas state between frames: 0 leaves pixels unchanged, 1 clears the sub-frame region to rgba(0,0,0,0), and 2 restores the canvas to its state before the current frame was drawn. The blend_op controls compositing: 0 replaces the region entirely, 1 uses standard alpha blending (C_out = α_src ⋅ C_src + (1 − α_src) ⋅ C_dst).

Reference Data

APNG Chunk	Length (bytes)	Purpose	Key Fields
PNG Signature	8	File identity	89 50 4E 47 0D 0A 1A 0A
IHDR	13	Image header	Width, Height, Bit depth, Color type
acTL	8	Animation control	num_frames, num_plays
fcTL	26	Frame control	width, height, x_offset, y_offset, delay_num, delay_den, dispose_op, blend_op
IDAT	Variable	Default image data	Compressed pixel data (may be first frame)
fdAT	Variable	Frame data	sequence_number + compressed pixel data
IEND	0	Image end marker	Terminator chunk
dispose_op Values
0	APNG_DISPOSE_OP_NONE - no disposal, frame persists
1	APNG_DISPOSE_OP_BACKGROUND - region cleared to transparent black
2	APNG_DISPOSE_OP_PREVIOUS - region reverted to previous content
blend_op Values
0	APNG_BLEND_OP_SOURCE - overwrite region (all channels including alpha)
1	APNG_BLEND_OP_OVER - alpha-composite over existing content
Common Frame Rates
10 fps	Typical low-quality GIF/APNG animations
24 fps	Film standard, smooth motion
30 fps	Web video standard (NTSC)
60 fps	High frame rate, gaming captures
MediaRecorder Codec Support
Chrome	video/webm;codecs=vp9, video/webm;codecs=vp8
Firefox	video/webm;codecs=vp8
Safari 14.6+	video/mp4 (H.264 via MediaRecorder)
Edge	video/webm;codecs=vp9, video/webm;codecs=vp8

Frequently Asked Questions

The MediaRecorder API in most Chromium-based browsers only supports WebM containers with VP8/VP9 codecs. True H.264/MP4 encoding requires native codec access, which Safari provides but Chrome and Firefox do not. The output WebM file plays in all modern browsers, VLC, and most video editors. If you need a strict .mp4, re-mux the WebM through FFmpeg: ffmpeg -i output.webm -c copy output.mp4.

The converter respects each frame's individual delay_num/delay_den ratio from the fcTL chunk. During recording, each frame is held on the canvas for its exact specified duration before advancing. If you override the FPS, all per-frame timing is discarded and replaced with a uniform interval of 1/FPS seconds. Variable-delay animations (common in APNG sticker packs) should be converted without an FPS override to preserve timing fidelity.

dispose_op is critical for animations where frames are smaller than the canvas (sub-frame rendering). APNG_DISPOSE_OP_NONE (0) leaves pixels from the current frame visible for the next. APNG_DISPOSE_OP_BACKGROUND (1) clears the frame's sub-region to fully transparent, which can cause flicker if the next frame doesn't cover the same area. APNG_DISPOSE_OP_PREVIOUS (2) requires the converter to snapshot the canvas before drawing each frame, then restore that snapshot after recording. This tool implements all three modes faithfully.

The tool imposes a 50 MB file size limit to prevent browser memory exhaustion. Frame count is theoretically unlimited, but animations exceeding 500 frames may cause noticeable processing delays. The APNG binary parser runs in a Web Worker, so the UI remains responsive during parsing. However, frame-by-frame canvas rendering occurs on the main thread due to Canvas API constraints. For very large animations (1000+ frames at high resolution), expect conversion times proportional to the total animation duration.

ICC profiles stored in iCCP chunks are read during parsing but are not explicitly applied during canvas rendering. The browser's Image element handles color management implicitly when decoding each reconstructed frame PNG. In practice, sRGB content (the vast majority of APNG files) renders correctly. Wide-gamut or CMYK profiles may experience slight color shifts because Canvas 2D defaults to sRGB color space. The canvas.getContext('2d', {colorSpace: 'display-p3'}) option can be enabled in supported browsers for Display P3 content.

Screen recordings with hard edges and text benefit from High or Maximum quality to avoid compression artifacts around sharp contrasts. Illustrations, gradients, and photographic APNG content look acceptable at Medium quality because VP8/VP9 codecs handle smooth gradients efficiently. The quality multiplier directly scales the bitrate: Medium uses width × height × FPS × 5 bits per second. Maximum uses × 20. A 500×500 animation at 24 FPS yields approximately 1.2 Mbps at Medium and 4.8 Mbps at Maximum.