Animated Images Explained: Choosing GIF, APNG, Animated WebP and AVIF

GIF is the 1987 original and still the only format with zero-friction playback everywhere: email clients (some), forums, chat apps, every browser since Netscape. Its price: a 256-colour palette per frame and one-bit transparency, which is why photographic animations get dithered and soft-edged overlays get haloed.

APNG is the quiet 2008 answer — a full-colour, full-alpha animation inside a .png file, with the neat property that old PNG decoders display its first frame as a perfectly good still. Safari has supported it since 2020 and Chrome/Firefox long before; it is the safe modern default when you want animated-PNG semantics without WebP's format politics.

Animated WebP adds real compression between frames (the video-codec trick) — typically 30-60% lighter than the GIF of the same animation — with full alpha and 24-bit colour, and is supported by every current browser. It is the practical workhorse for website animation today.

Animated AVIF is newest and smallest again (AV1's inter-frame prediction), with HDR-capable frames; support is the usual early-adopter curve — current Chrome and Firefox yes, Safari's animated support is the laggard to verify. Use where you control the audience and the byte savings are the point.

The engineering answer to 'animated image on my site' is almost always a muted, looping, autoplaying <video> — and the size difference is not marginal: a 2 MB animation is a 200-400 KB MP4 of the same clip, because the video codecs have ten more years of motion-compression research behind them than any image format. The cost is that a video tag is a media pipeline, not an image resource — it cannot sit in a markdown badge, an email, a CSS background, or a forum signature.

The decision is therefore about control of the destination: your own website, video first, animated WebP second; anywhere you do not control the consumer, GIF, because a format that autoplays everywhere beats a format five times smaller that does not play at all. The paste-ability property is worth more than bytes in exactly the contexts you cannot audit.

Downgrading (anything to GIF) costs colour depth and alpha fidelity — the export dialog's dithering choice is then your main quality lever, and for photographic content, no dither with the full 256-colour palette often beats heavy dither.

Upgrading GIF to WebP or APNG is honest: the decoder reads every frame's pixels and the new encoder stores them at full depth — the extra colour precision does not invent quality but it does stop the further loss, and the file shrinks because WebP and APNG encode those pixels better. The one trap: GIF timing quirks (per-frame delays, the 2-centisecond rounding, disposal-method glitches) need to survive the decode or the converted animation's rhythm changes; good converters read frame delays, and comparing playback at 1x after conversion is the whole QA step.

From video, the conversion path is the frame-extraction pipeline — pick the window, the rate and the canvas size before encoding, because those three knobs decide whether the animation is 300 KB or 8 MB (the GIF-making guide covers the settings; they apply to every output format, with the frame-rate advice slightly relaxed for WebP and AVIF, which tolerate 15-20 fps better than GIF does).

For critical animation on a site, the <picture>-equivalent for motion is progressive: a static first frame that works in any case (APNG's first-frame property is exactly this), an animated WebP or AVIF layer where supported, and the GIF where neither — a decision most sites never need because animated WebP's coverage is effectively universal on current browsers.

One accessibility note that real audits check: looping animation is a vestibular and attention hazard, and the WCAG bar is a pause/stop control for anything that moves for more than five seconds. The autoplay-video pattern dodges nothing — respect prefers-reduced-motion with a media query and serve the static frame; it is two lines of CSS and the difference between polished and hostile.