APNG vs GIF: The Better Animated Image Format

Updated July 27, 2026

GIF has been the default animated-image format since the early web, mostly by inertia rather than technical merit. APNG (Animated PNG) fixes GIF’s biggest limitations while every major browser now supports it — but GIF still has a couple of reasons to stick around.

GIF’s real limitation: 256 colours

The core problem with GIF is its palette: every frame is limited to 256 colours total, chosen from a palette computed for that image. For flat, simple graphics that’s rarely noticeable. For anything with photographic detail, smooth gradients, or transparency, it shows immediately — visible banding, dithering, and a “1990s web” look that has nothing to do with the source quality.

GIF’s transparency is also binary: a pixel is either fully opaque or fully transparent, with no partial values. Any anti-aliased edge — text, a soft drop shadow, a circular avatar — gets a visible hard fringe, and it’s usually fringed with whatever background colour the GIF was created against.

What APNG fixes

APNG is a straightforward extension of ordinary PNG: true 24-bit colour (16.7 million colours, same as JPG) plus full 8-bit alpha transparency, meaning smooth semi-transparent edges render correctly. Per-frame timing works much as GIF’s does, so anything you could animate in GIF you can animate in APNG — without the colour and transparency compromises.

It also degrades gracefully. An APNG’s first frame is a valid ordinary PNG, so software that doesn’t understand the animation chunks shows a still image rather than failing outright.

The tradeoff is file size: because APNG doesn’t do GIF’s aggressive palette reduction, an APNG of the same animation is often larger, especially for simple flat-colour content where GIF’s palette approach is genuinely efficient.

The comparison

GIF APNG
Colours 256 per frame 16.7 million
Transparency Binary on/off Full 8-bit alpha
Browser support Universal Universal since 2019
File size, flat graphics Smaller Larger
File size, photographic Much larger Smaller
Social platform support Everywhere Poor
Fallback if unsupported Shows first frame

When GIF still makes sense

For anything with real colour depth or transparency — a screen recording, a product demo, a photo-based animation — APNG is the better technical choice today, provided you control where it’s displayed.

The option that beats both

For anything longer than a couple of seconds, the honest answer is often neither: use a video.

An MP4 (H.264) or WebM of a 10-second screen recording is routinely 5–20× smaller than the GIF equivalent, at visibly better quality. GIF was never designed for video-length content; it has no interframe compression worth the name, no audio, and no seeking.

The markup is barely longer than an <img>:

<video autoplay loop muted playsinline>
  <source src="demo.webm" type="video/webm">
  <source src="demo.mp4" type="video/mp4">
</video>

muted and playsinline are both required for reliable autoplay on mobile browsers. Leave either out and iOS will refuse to play it inline.

This is why GitHub, Twitter, and most platforms silently transcode uploaded GIFs to video behind the scenes — the format users ask for is not the format that gets served.

Where GIF and APNG still win: very short loops, anything needing genuine per-pixel transparency over an arbitrary background, and any context that only accepts an image (an email, a Markdown file, an <img> tag you don’t control).

A note on WebP

Animated WebP is worth knowing about as a middle path. It supports true colour and alpha like APNG, compresses substantially better than both GIF and APNG, and enjoys good browser support. Its weak spot is the same as APNG’s — patchy support in non-browser software and on social platforms.

Roughly: WebP for the web when you control the surface, APNG when you need PNG’s graceful fallback, GIF when something else demands it, video for anything long.

Converting between them

GIF to APNG re-encodes an existing GIF animation into true-colour APNG, fixing banding and hard transparency edges without needing the original source file. It can’t invent detail the GIF already discarded — a heavily dithered GIF stays dithered — so start from the original source when you have it.

If you just need a single frame rather than the full animation, GIF to PNG extracts one. For displaying every frame at once — documentation, or a CSS sprite animation where you want frame-by-frame control — GIF to Sprite Sheet tiles them into a single image. And if your source is actually a video, MP4 to GIF is the more direct starting point; keep the clip short and the dimensions modest, since both drive GIF file size far more than anything else.

Share