PNG to APNG (Animated PNG)
Stitch a sequence of PNGs into one animated PNG. Unlike GIF, an APNG keeps all 16.7 million colours and a full 8-bit alpha channel, so gradients don't band and semi-transparent edges don't get a hard fringe. The file is still a .png — browsers that support APNG animate it, and anything that doesn't shows the first frame.
Drop your frames here
Drag the rows to reorder — the list order is the play order
How to make an animated PNG
- Drop the frames. Name them
frame-001.pngupward and they land in order; otherwise drag the rows to rearrange. - Set the frame rate. 12 fps is smooth enough for UI motion; 24–30 for video-like playback; 2–6 for a slideshow.
- Choose the loop count. 0 loops forever, which is what most web use wants. A finite count stops on the last frame.
- Set an output width if the frames are larger than you need — every frame is scaled to match, and APNG files get large quickly.
- Build and download. The result is a
.pngyou can use anywhere a PNG goes.
APNG versus GIF
Colour. A GIF frame is limited to 256 colours from a palette. APNG frames are full truecolour, so photographic content, gradients and soft shadows survive intact — the single biggest visible difference.
Transparency. GIF alpha is one bit: a pixel is either fully opaque or fully transparent, which is why GIFs with soft edges have that jagged halo against a coloured background. APNG carries the same 8-bit alpha as a normal PNG, so anti-aliased edges composite correctly on any background.
Size. Neither wins outright. For flat-colour animation — line art, UI motion, pixel art — a well-quantised GIF is often smaller. For photographic or gradient-heavy content, APNG is usually smaller and better looking, because GIF has to spend bits dithering. For anything long or large, a video codec (WebM, MP4) beats both by an order of magnitude.
Support. Every current browser animates APNG. Outside the browser it is patchier: many image viewers, editors and chat clients show only the first frame. That fallback is graceful, but check your target before choosing APNG over GIF, which plays essentially everywhere.
How it is built
Each frame is encoded to an ordinary PNG by your browser, its compressed image data is extracted, and the
stream is reassembled with the APNG control chunks — acTL declaring the frame and loop counts,
one fcTL per frame carrying its delay, and fdAT holding every frame after the first.
Frames are written full-size with dispose none and blend source, so each one replaces the
previous completely and there is no way for artefacts to accumulate.
That full-frame approach is simple and correct, and it is also why the file is bigger than an optimiser would
produce: a dedicated tool such as apngasm stores only the changed rectangle per frame. If size
matters more than convenience, use this to get the animation right and then re-pack it.
FAQ
Why does my APNG only show one frame?
Whatever is displaying it does not support APNG and is falling back to the first frame — that fallback is built into the format on purpose. Try it in a browser to confirm the animation itself is fine.
Can frames have different sizes?
They are all scaled to the first frame's dimensions (or the output width you set). APNG allows per-frame offsets and sizes, but mixing them is what causes most playback glitches, so this always writes full frames.
What does ping-pong do to the frame count?
It appends the middle frames in reverse, so ten frames become eighteen — the first and last are not repeated at the turn. The file grows accordingly, but you get seamless back-and-forth motion from half the source frames.
Is the delay exact?
It is written as a fraction with a 1/1000-second denominator, so the requested rate is precise to the millisecond. Actual playback is up to the renderer, and browsers do clamp very short delays — below about 10 ms per frame you will not get what you asked for.