GIF vs APNG vs WebM: which animation format should you use?
Once an animation leaves its Lottie runtime it has to become pixels, and the format you pick decides how it looks, how big it is, and where it plays. Here's the practical decision, without the spec-sheet noise.
GIF: plays everywhere, looks its age
GIF's superpower is universality: email clients, chat apps, READMEs, docs — if it renders images, it animates GIFs. The cost is a 256-color palette (visible banding on gradients) and 1-bit transparency (each pixel is fully opaque or fully invisible, so anti-aliased edges get hard fringes).
Use GIF when compatibility beats fidelity: email, Slack, GitHub READMEs, and anywhere you can't control the viewer.
APNG: the quality upgrade nobody talks about
Animated PNG keeps full 24-bit color and smooth 8-bit alpha — no banding, no fringed edges — and every modern browser plays it. Because an APNG is a valid PNG, non-supporting viewers still show the first frame instead of breaking.
Use APNG for icons, logos, and flat-color animations where edge quality matters, especially over varied backgrounds. Files can run larger than lossy video for long clips.
WebM: real video, real alpha, small files
WebM (VP9) is proper video: dramatically smaller than GIF at similar quality, full color, and — unlike MP4 — it can carry an alpha channel for transparent overlays. It's the right choice for web embeds, hero animations, and anything longer than a few seconds.
The trade-off is reach: it's a web format, not an email or chat format, and alpha playback in Safari is inconsistent — keep an APNG fallback if transparency is critical there.
The 10-second decision
Email/chat/README → GIF. Crisp transparent icon or logo → APNG. Web page, overlay, or anything long → WebM (MP4 if a platform demands H.264). Poster or thumbnail → a still PNG/WebP. All of them are one click from the same Lottie in the converter.
