GIF vs APNG: which animated format should you use?

GIF and APNG both store a sequence of frames, but they were designed in different eras and it shows. GIF is limited to a 256-colour palette per frame, so photographic frames, soft gradients and long colour fades band badly. APNG is a PNG-based format: each frame can use 24-bit colour with a full alpha channel. That means smooth shading, exact brand colours, and transparency that fades instead of turning into a hard 1-bit cutout.

Why APNG files stay small

The obvious worry with a richer format is size — a naive APNG is much heavier than a GIF of the same animation. Good encoders avoid that. Because APNG is assembled from independent frames, an encoder can compare each frame with the previous one and store only the rectangle of pixels that actually changed. Unchanged areas are declared transparent and simply keep the previous frame’s content, a technique called inter-frame optimisation, subframe rendering, or dirty-rectangle assembly. For screen recordings, UI demos and simple motion graphics, most of the canvas is static, so the savings are large and the result often lands at or below the original GIF.

When GIF is still the better choice

GIF’s advantage is ubiquity in odd places: some older chat clients, email builders, and legacy content systems still refuse APNG. If a platform only accepts a .gif file extension, converting to APNG will not help there. Similarly, a tiny sticker with a handful of flat colours is already near the floor of what any format can do, so the visual upgrade is small.

Browser support and delivery

APNG is supported natively by every current major browser, and it is treated as a drop-in image: you point an <img> tag at the .png file and it animates, no script required. It also respects prefers-reduced-motion only if you handle that yourself with a static poster image, which is a good practice for autoplaying loops. Because it is a PNG, it still benefits from lossless compression, and tools such as 7-Zip or Zopfli can shave another few percent off the file at the cost of encoding time.

A practical workflow

Decode the GIF, trim or drop frames you do not need, resize to the dimensions the page actually renders, then assemble the APNG with subframes and dirty transparency enabled. Resizing before assembly matters: downscaling a finished APNG leaves leftover changed regions from the original resolution, while resizing each frame first lets the encoder merge more pixels into a single subframe. Keep a copy of the original GIF until you have checked the result, since frame timing and loop settings occasionally differ between encoders.

apngmorph does all of this in your browser — decoding, resizing, timing and assembly — so you can run a whole batch and compare sizes without uploading anything.