GIF vs WebP vs APNG vs MP4: which format for a short animation?

GIF is nearly 40 years old and, by modern standards, very inefficient. Yet it's still the format people reach for when they want "a short moving picture". To put numbers on the trade-off, we took one clip (24 frames of a camera pan across a portrait photo, 480 × 270 px, 10 frames per second, 2.4 seconds) and saved the exact same frames in five formats.

The measurements

The video formats aren't a little smaller; they're an order of magnitude smaller. The quality isn't identical across rows (lossy formats throw different information away), but at these common settings all of them look clean at normal viewing size, and the video files don't have GIF's 256-color limit, so gradients stay smooth.

Why the gap is so large

GIF compresses each frame on its own, losslessly, after reducing it to at most 256 colors. A panning camera changes nearly every pixel between frames, so each frame costs almost as much as a still image.

H.264 and AV1 are built for video: most frames are stored as predictions from the previous ones ("this block moved three pixels left"), plus a small correction. Animated WebP's lossy mode borrows VP8's intra-frame compression, which is far more efficient than GIF's LZW even without much help from earlier frames. APNG is lossless and keeps full color, which is why it's the largest of all for photographic content; it shines for flat graphics with transparency instead.

Where each format actually plays

Size is only half the decision. The other half is whether the format works where your animation is going.

Browser support for animated WebP and APNG is now broad (see Can I use for WebP and APNG), but outside the browser, in email clients, chat apps, design tools, and older software, GIF is still the format that's guaranteed to move.

When to use which

Use GIF when the animation has to behave like an image. That means email, places where you can only insert an image (Markdown, many CMS image fields, issue trackers, slide decks), chats where you want it to loop automatically, and anywhere you can't be sure what will display it. Keep it short and small: under about 5 seconds, 480 px or narrower, with the techniques in our file size guide.

Use MP4 (or WebM) on your own web pages. If you control the HTML, a muted, looping, autoplaying video element gives you GIF behavior at a fraction of the size. Google's web.dev recommends exactly this for page speed in Replace animated GIFs with video. The key attributes are autoplay, loop, muted, and playsinline; browsers only reliably autoplay videos that are muted. Our measurements suggest AV1 can halve the size again, with H.264 as the fallback for older devices.

Use animated WebP when it must be an image but GIF is too heavy, and you know the viewers use current browsers: a site's own image slots, for example. It keeps soft transparent edges, which GIF can't.

Use APNG for small flat animations that need smooth transparency, such as icons, stickers, or loading indicators, where its lossless quality matters more than size.

Converting between them

If you have an MP4 and need a GIF, the MP4 to GIF converter trims the clip and sets the frame rate and size in the browser. An animated WebP can be turned into a GIF with the WebP to GIF converter. Going the other way (GIF to MP4) needs a video encoder; desktop tools like ffmpeg do it in one command, and since a GIF is already limited to 256 colors, the MP4 will look nearly the same and usually be many times smaller.

Bottom line

GIF is the most compatible animation format, not the most efficient one. Use it when compatibility is the point, make it as small as the content allows, and switch to video on pages you control.