APNG explained: the animated PNG, and where it shows one frame

An APNG is a PNG that moves. It is an ordinary PNG file with extra frames added inside it, and a program that knows about the extension plays them in a loop with full colour and soft transparency. A program that does not know about it shows the first frame and nothing else, and no error appears, which is the whole story of why an animated PNG seems to work on one screen and sit still on the next.

getPNG makes still pictures, not animations, so it does not build or edit APNGs. What it can do is the part that comes before: cut the background out of each frame so every one is a clean transparent PNG. This guide is for knowing what an APNG is, what it is good for, how it compares with a GIF and an animated WebP, and how to find out in a minute whether the file you have is really animated.

What an APNG is, in plain terms

PNG, the format, is built from labelled blocks called chunks: one for the picture’s dimensions, one for the pixels, one for the end of the file. A program that meets a chunk it does not recognise is told by the specification to skip it. The APNG extension, which came out of Mozilla in the 2000s, uses that rule on purpose.

An APNG stores its first frame exactly as a normal PNG would, in the normal place. Beside it go extra chunks: one that says how many frames there are and how many times to loop, and, for each frame, one that says how long to show it and how to place it, followed by the frame’s pixel data. A decoder that understands the extension reads those and plays the animation. A decoder that does not understand them skips the extra chunks and draws the picture it always draws, the first frame.

That design choice is what makes the format both gentle and confusing. Gentle, because a file never fails to open: the worst case is a still picture, so an old viewer shows something rather than a broken icon. Confusing, because the file’s name gives nothing away. An APNG normally keeps the .png ending (there is also an .apng one, which some tools write), and the only way to know whether it moves is to look at it in something that plays it.

What it keeps that a GIF cannot

The reason anybody uses an APNG is that it is a PNG. Everything PNG is good at survives into the animation:

• Millions of colours. A GIF is limited to a palette of 256 colours per frame, which is why a photographic GIF looks speckled. An APNG frame can use the full range, so a gradient stays smooth.
• Soft transparency. A GIF’s transparency is on or off for each pixel. An APNG has the same 256 levels of opacity as any PNG, so an edge can fade, and a shadow can be a shadow. What a transparent background actually is explains the alpha channel behind this.
• Lossless frames. Nothing is rounded off. What you drew or exported is what plays.

The cost is size. A GIF’s colour limit is also what keeps it small, and an APNG with a full-colour, soft-edged frame repeated thirty times is a heavy file. Frames that only change a little can be stored as the small region that changed, which helps a good deal on simple animations such as a blinking eye, and does little for a full-frame video clip.

APNG, GIF and animated WebP side by side

The browser row is the easy one: every current browser plays all three. Outside the browser the picture changes, and the details move with each release, so treat the table as a guide to which way each format fails rather than a list of versions. Whether a particular app, upload form or chat service plays an APNG has to be tested on the day.

What the table does not show is how each one behaves when it is not understood, and that is the one that matters:

• A GIF nearly always plays, because the format is so old that almost everything has had time to learn it.
• An APNG shows its first frame. You still get a picture, but not the movement.
• An animated WebP is the one most likely to arrive as nothing, in a program or a form that does not read WebP at all. PNG vs WebP for websites goes through where WebP is and is not accepted.

If you choose between them for a web page, the animated WebP is usually the smallest, the APNG is the one with exact pixels, and the GIF is the one that is least likely to surprise you. What is AVIF covers a fourth option, which can also hold an animation, for sites that serve more than one format.

Where an APNG shows one frame

The silent single frame is the thing people write in to complain about, and it comes from four places.

An app that reads it as a PNG. Many image editors, previewers, document programs and older viewers open an APNG as the PNG it also is. You see the first frame, and if you save it you get the first frame, because the animation was never read. Opening the file in a current web browser (drag it onto a tab) is the quickest test of whether it moves at all.

A service that re-saves what you upload. Many sites and apps resize or re-encode a picture on upload, to make thumbnails or to strip data. If the encoder they use writes a still PNG, JPG or WebP, the animation is gone before anybody sees it, and the first frame is what is left. The upload form accepting the file says nothing about whether it will play afterwards.

A frame size that does not match. The extension lets frames be smaller than the canvas and placed at an offset. A tool that draws them naively, ignoring the placement, can show a broken or smeared animation. This is rarer, and it shows as a mess rather than a still.

A file that was never animated. Sometimes the answer is dull: the file was saved from a program that wrote one frame, or someone renamed a still. A multi-frame PNG is larger than a single frame of the same size, so a file that is suspiciously small is a clue.

In each case the file itself is usually fine. The format was designed so that being unsupported costs the movement and not the picture, so a still is what you are shown when something upstream did not understand it.

APNG for avatars and overlays

The place the format shows up most is the streaming and creator world, where a transparent, soft-edged animation is exactly what is wanted: a blinking character, a small animated badge, an overlay laid over a camera feed. Some pngtuber apps accept APNG for a character’s states, so an expression can move rather than hold still; what is a PNGtuber shows how they are put together, and says which apps read which formats.

If you are making a character for an app like that, the useful split of work is this. The art is a sequence of frames, each with the same canvas size and the same position of the subject, or the animation will jump. getPNG can cut each frame’s background out at its full resolution and give you a transparent PNG for every one. A separate tool joins them into one APNG, and the app you are making it for decides whether it plays. Check the app’s own documentation for what it accepts before you build thirty frames.

How to tell whether a file is animated

You do not need special software for a first check.

1. Drag the file onto a current browser tab. The browser plays an APNG, so if it moves there, the animation is in the file.
2. Compare the file’s size with a still of the same dimensions. A few frames of simple graphics add little; a long animation adds a lot. A single-frame PNG of the same size is the comparison.
3. Try the app you actually need it in. The browser tells you the file is good; only the destination tells you the destination can play it.

Which to choose

• A web page, small file, transparency, a modern audience: animated WebP, with a fallback if your audience is unusual.
• Exact pixels and soft edges, in a place you have tested: APNG.
• It has to play everywhere, and a limited palette and hard edges are acceptable: GIF.
• A single picture that happens to be in a moving format: export the one frame you want as a PNG, and keep the animation as a separate master.

Whichever you pick, keep the frames. A set of numbered transparent PNGs is the master that can be turned into any of the three later, and it is the one thing that cannot be rebuilt from the finished animation without losing something. The photo file formats guide places all of these formats alongside the stills you meet more often.

Questions

What is an APNG file?

An APNG is a PNG with extra frames inside it. The file still opens as a normal PNG, but a program that understands the animation extension plays the frames in order, for a set number of loops or forever. It usually keeps the .png ending, which is why you cannot tell from the name.

Is an APNG better than a GIF?

For quality, yes. A GIF is limited to 256 colours per frame and its transparency is on or off, so soft edges turn jagged. An APNG keeps millions of colours and a full 8-bit alpha channel. GIF still wins on being accepted nearly everywhere, which is the reason it has not gone away.

Why does my APNG only show one frame?

The program or website opening it reads it as a plain PNG and ignores the animation data, which was designed to be ignored. Another common cause is a service that re-saves uploads, which keeps the first frame and drops the rest. Try the file in a current web browser to see whether the animation is still inside it.

Can I make an APNG from my photo with getPNG?

No. getPNG removes the background from a still picture and saves it as a transparent PNG, WebP or JPG. It can prepare the frames, one cutout each, but it does not assemble them into an animation.

How is an APNG different from an animated WebP?

Both carry soft transparency and many colours. An animated WebP is usually the smaller file and can use lossy compression, but fewer programs outside the browser open it. An APNG is lossless, always, and more programs treat it as a PNG at least.

Does a PNG with several frames look different to a normal PNG?

Not in a program that ignores the extra frames: it shows the default image, which is the first frame in nearly every case. The only sign is the file size, which is larger than a single frame of that size would be.