DEV Community

Michael Lip
Michael Lip

Posted on • Originally published at zovo.one

GIF vs WebP vs APNG: The Animated Image Format War Nobody Won

The GIF format was created in 1987 by Steve Wilhite at CompuServe. It supports a maximum of 256 colors per frame. It uses LZW compression, which has been patent-free since 2004. And despite being nearly four decades old, despite every technical limitation that makes engineers cringe, it refuses to die. Not because it is good, but because nothing has managed to fully replace it.

GIF's 256-color limitation is its defining constraint. Each frame in a GIF animation is an indexed-color image, meaning every pixel references one of at most 256 entries in a color palette. The palette can be different for each frame, a trick that some advanced encoders use to squeeze out better quality, but no individual frame can display more than 256 simultaneous colors. For photographic content, this means aggressive color quantization: reducing millions of colors to 256, inevitably losing detail and creating visible banding in gradients.

This is where dithering comes in, and it is genuinely clever. Dithering is the technique of arranging differently-colored pixels in patterns that trick the human eye into perceiving colors that are not actually present in the palette. Floyd-Steinberg dithering distributes the quantization error of each pixel to its neighbors, creating a noise pattern that perceptually approximates the original colors. A solid blue-to-green gradient with 256 colors would show obvious banding. The same gradient with Floyd-Steinberg dithering looks remarkably smooth, even though it still uses only 256 colors. The trade-off is that dithering introduces noise patterns that compress poorly, increasing file size. This is the eternal GIF tension: better visual quality through dithering versus smaller files through clean color boundaries.

WebP animated entered the picture in 2014 when Google extended the WebP image format to support animation. The improvements over GIF are substantial. WebP uses VP8 video compression, which supports 24-bit color (16.7 million colors) and both lossy and lossless compression. For animated content, WebP files are typically 50-80% smaller than equivalent GIFs at the same visual quality. Or, at the same file size, WebP looks dramatically better because it is not fighting the 256-color limitation.

WebP also supports alpha transparency with lossy compression, something GIF cannot do. GIF transparency is binary: each pixel is either fully opaque or fully transparent. WebP supports variable transparency, allowing smooth anti-aliased edges against any background.

The problem with WebP has always been adoption. Safari did not support it until 2020, which meant iOS did not support it, which meant a huge percentage of mobile users could not see WebP images. Browser support is now effectively universal, but the years of incomplete support trained web developers to avoid it or always provide GIF fallbacks, and old habits persist.

APNG (Animated Portable Network Graphics) takes a different approach entirely. Where GIF is limited to 256 colors and WebP uses video-style compression, APNG is literally a sequence of full PNG frames. PNG supports 24-bit color with 8-bit alpha transparency and uses lossless deflate compression. The result is animations with full photographic quality, smooth gradients, and pixel-perfect transparency.

The cost is file size. APNG files are enormous compared to both GIF and WebP. APNG can encode only the changed region per frame and supports blending modes, but the fundamental math of lossless full-color compression means APNG will always be the largest option. It found its niche where quality is non-negotiable: animated stickers in messaging apps (Apple's iMessage uses APNG for sticker packs), high-quality UI animations, and any context where sharp edges or text would be degraded by lossy compression.

Then there is the elephant in the room: video.

An MP4 file using H.264 or H.265 encoding is typically 10 to 20 times smaller than an equivalent GIF while displaying full-color, full-resolution content. Twitter, Reddit, Imgur, and most platforms that appear to serve GIFs are actually converting them to MP4 or WebM video on upload. When you share a "GIF" on these platforms, what viewers receive is a short looping video with no audio track.

The drawback is that video requires different handling. You cannot drop an MP4 into an img tag. It needs a video element with autoplay, loop, muted, and playsinline attributes. And not every platform that accepts image uploads accepts video. Email clients, many forum platforms, and messaging apps support GIF but not inline video.

So when should you use each format?

Use GIF when you need maximum compatibility across every platform and email client, or when the animation is simple with limited colors like diagrams or logo animations.

Use WebP animated when you control the platform, file size matters, and the content has complex colors or needs semi-transparent animation.

Use APNG when quality is paramount and file size is secondary, or when the target platform specifically supports it (like iOS sticker packs).

Use MP4/WebM when the source is screen recording or camera footage, when file size is critical, or when the animation runs longer than a few seconds.

The relationship between frame rate and file size follows a roughly linear pattern for all formats. A 30fps animation has roughly twice as many frames as a 15fps animation and produces roughly twice the file size. For most use cases, 10-15fps is sufficient for smooth-looking animation. The human eye starts perceiving smooth motion around 12fps. Going above 15fps for a short looping animation produces diminishing returns in perceived quality while linearly increasing file size.

If you need to create a GIF from images or video frames, I built a GIF maker that handles the conversion with palette optimization and dithering controls.

The animated image format war has no winner because the formats do not compete on the same axis. GIF wins compatibility. WebP wins efficiency. APNG wins quality. Video wins everything except being an image. Pick the right tool for the specific problem, not the one that sounds newest.


I'm Michael Lip. I build free tools at zovo.one. 350+ tools, all private, all free.

Top comments (0)