How to Make an APNG: From PNG Frames to Smooth Animation

How assembly actually works

At the heart of APNG is a simple idea: an animation is just a stack of frames shown one after another. Each frame is a separate PNG image. The converter takes that stack, writes the order and timing into the file's service blocks, and packs everything into one .apng. No video codec, no audio — just a sequence of still images.

From that comes the main rule of preparation: all frames must be the same size. If frame one is 400×400 and frame two is 380×420, the animation will "jump." So the whole process boils down to three steps: prepare even frames, choose a speed, hit "assemble."

Step 1. Prepare the frames

You can get frames from anywhere: draw them in a graphics editor, export from After Effects or Figma, render from a 3D app. The key is to save each frame as a separate PNG. A few practical tips:

• Same size for every frame. This is the single most important condition. Check the canvas before exporting.
• Clear numbering: frame_01.png, frame_02.png… — that's how the converter puts frames in the right order.
• Keep transparency. If the background should be transparent, export the PNG with an alpha channel (PNG-32), not flattened onto white.
• Fewer frames, smaller file. 12–24 frames per second is usually plenty for smoothness; there's no need to chase 60.

Step 2. Delay and looping

Two settings control how the animation looks in the end: delay and looping.

Delay is how long each frame stays on screen, in milliseconds. That's the "speed" of the animation. A quick cheat sheet:

Looping sets how many times to play the animation. A value of 0 means "loop forever" — the default for loaders and stickers. Any other number plays that many times and freezes on the last frame (handy for short greetings or reveal effects).

Step 3. Assemble the APNG online

The fastest way with no software to install is to assemble the APNG right in your browser. You upload the frames, set the delay and looping — the converter hands you a finished file.

Other tools: Assembler and ffmpeg

An online converter covers 90% of cases, but sometimes you need dedicated tools:

• APNG Assembler — a desktop program built specifically for assembling APNGs. Its standout feature is automatic inter-frame optimization: repeating areas of neighboring frames aren't duplicated, so the file comes out noticeably lighter. Useful for long animations.
• ffmpeg — if you need to build the animation from a video. One form of the command:

ffmpeg -i clip.mp4 -plays 0 -f apng output.apng

Here -plays 0 sets an infinite loop. ffmpeg is handy when your source is a video clip rather than a set of separate images.

Common beginner mistakes

To get your first APNG right on the first try, keep these traps in mind:

• Different frame sizes. The most common cause of "jittery" or sliding animation. Double-check the canvas.
• Lost transparency. If you export frames on a white background, transparency disappears — and with it the whole point of choosing APNG over GIF.
• Too many frames. A long photo-realistic clip in APNG can weigh a lot (the format only compresses losslessly). For those cases, look at animated WebP.
• Too short a delay. A delay under ~20 ms per frame won't actually play faster — browsers clamp very small values.

Pulling a frame back to PNG

Sometimes you need the reverse — to pull one static frame out of a finished animation (for a preview or a cover, say). That's what APNG → PNG conversion does: it extracts a frame and saves it as an ordinary PNG with transparency.

Drop the .apng into the APNG to PNG converter and you get a clean static frame. And if you want to understand how the format works inside, start with the overview article what is APNG. All available conversions live on the all formats page.