GIF vs MP4 vs WebP: Which Format for a Short Animation

The three formats side by side

	GIF	Animated WebP	Video (MP4, WebM)
Colors	Up to 256 per frame, from a palette	24-bit color	Lossy video frames, no palette
Transparency	One color index, on or off per pixel	8-bit alpha, smooth edges	Only VP8 or VP9 in WebM, not in Safari
Sound	No	No	Yes, muted for autoplay
HTML tag	<img>	<img> or <picture>	<video>
Browser support	All browsers	All major browsers	H.264: all major browsers
Size of the same clip	Largest	Smaller than GIF	Smallest in the web.dev test

The short version: use a muted video for anything longer than a couple of seconds or with photographic content, animated WebP when it must behave like an image, and GIF only where nothing else is accepted. The image formats guide covers the still-image side of the same choice.

Why GIF files are so big

The GIF89a specification stores the colors of each frame in a table whose size field has 3 bits, which caps the table at 2⁸ = 256 colors. Every pixel is an index into that table, and the image data is compressed with LZW, a general-purpose method that looks for repeated runs of pixels within the frame. An encoder can save space by storing only the rectangle that changed since the last frame, but the pixels inside it are still stored in full.

Some arithmetic shows the scale. A 480 × 270 clip at 15 frames per second for 4 seconds is 60 frames. At one byte per pixel that is 7.8 MB of raw frame data before LZW; the same frames in 24-bit color would be 23.3 MB. LZW shrinks that, but every new frame still costs its own bytes, so a GIF grows almost in step with its length and its pixel count. The palette also hurts quality: a sky or a face has far more than 256 shades, so the encoder rounds them and often adds dithering.

Timing has a quirk too. GIF stores the delay between frames in hundredths of a second, so only some frame rates come out exactly:

Delay value	Seconds per frame	Frames per second
2	0.02	50
3	0.03	33.3
4	0.04	25
5	0.05	20
6	0.06	16.7
7	0.07	14.3
10	0.10	10

30 frames per second would need a delay of 3.33, which the format cannot store; a GIF from a 30 fps video ends up at 33.3 or 25. The video to GIF converter lets you choose the frame rate, and a lower one is the quickest way to a smaller GIF.

How much smaller video and WebP are

web.dev's example shows one animation in three formats, and Google publishes average savings for WebP. The WebP rows below apply those averages to the same GIF, so they are estimates, not measurements:

Format	Size	Smaller than GIF	Basis
GIF	3.7 MB	-	web.dev test
WebP, lossless	about 3.0 MB	19%	Google average
WebP, lossy	about 1.3 MB	64%	Google average
MP4 (H.264)	551 KB	85%	web.dev test
WebM (VP9)	341 KB	91%	web.dev test

Google's WebP FAQ adds two details. WebP supports 24-bit color with an 8-bit alpha channel, against GIF's 8-bit color and 1-bit alpha, so semi-transparent edges and shadows look right. And decoding costs more: lossy WebP takes 2.2 times as much decode time as GIF when played straight through, lossless 1.5 times. For a few small loops on a page that rarely matters. Newer still, AVIF also supports animation; MDN lists animated AVIF in Firefox from version 113 and recommends a fallback because support is not yet complete.

The video file size guide explains why video stays so small: size is bitrate times length, and a short muted loop needs very few bits per second.

How to embed a video that behaves like a GIF

web.dev's recommendation is a video element with four attributes: autoplay, loop, muted and playsinline. Together they make the video play automatically, loop endlessly, play no audio and play inline instead of opening full screen on a phone.

<video autoplay loop muted playsinline width="480" height="270">
  <source src="animation.webm" type="video/webm">
  <source src="animation.mp4" type="video/mp4">
</video>

The browser plays the first source it supports. Set width and height so the page does not jump when the video loads, and add a short text description nearby if the animation carries information. The GIF to MP4 converter turns an existing GIF into the MP4 for the second line, and the video compressor shrinks a longer clip further. For the WebM, web.dev gives this ffmpeg command:

ffmpeg -i animation.gif -c vp9 -b:v 0 -crf 41 animation.webm

If the animation has to stay an image, for example inside a content system that only takes images, use the picture element so browsers that support a smaller format get it and the rest fall back to GIF:

<picture>
  <source srcset="animation.avif" type="image/avif">
  <source srcset="animation.webp" type="image/webp">
  <img src="animation.gif" width="480" height="270" alt="What the animation shows">
</picture>

When GIF is still the right choice

Places that accept only images. Many email newsletters, forums and upload fields take an image file but not a video. A GIF is then the only way to show motion.
Very short, flat graphics. A spinner or a two-frame blink with a handful of solid colors fits the 256-color palette without loss and stays small.
Maximum compatibility. MDN lists GIF support in every version of Chrome, Edge, Firefox, Opera and Safari.

The raw arithmetic shows where the savings are. The 480 × 270 clip at 15 frames per second came to 7.8 MB of frame data before compression. At half the width and half the height it has a quarter of the pixels per frame, and at half the frame rate half as many frames, so the same 4 seconds come to 0.97 MB, one eighth. Trimming works the same way: at 15 frames per second every second you cut removes 15 frames, a quarter of a 4-second clip.

When you do make one, keep it short and narrow, drop the frame rate, and cut the colors. The GIF maker builds a GIF from separate images with your own delay and loop settings, and the video to GIF converter does the same from a clip.

Frequently asked questions

Is MP4 smaller than GIF?

Almost always, and by a lot. In the web.dev example a 3.7 MB GIF became a 551 KB MP4 and a 341 KB WebM, about 85 and 91 percent smaller. GIF compresses the pixels of each frame with LZW, while video codecs are built to compress the differences between frames.

Why do GIFs look grainy or banded?

Each GIF frame can use at most 256 colors, because the color table size field in the GIF89a format is only 3 bits. A photo or a gradient has far more shades than that, so the encoder picks the nearest of 256 colors and often adds a dot pattern (dithering) to hide the steps.

Can animated WebP replace GIF?

For web pages, yes. Google reports that animated GIFs converted to lossy WebP are 64 percent smaller on average and 19 percent smaller as lossless WebP, and MDN lists WebP support in all current major browsers. It goes in an img tag like a GIF, so no code changes beyond the file name.

Will a muted looping video autoplay like a GIF?

That is what web.dev recommends: a video element with autoplay, loop, muted and playsinline plays automatically, loops, has no sound and plays inline.

When should I still use GIF?

When the place you are posting accepts only an image file, not a video. That includes many email newsletters, older forums and upload fields that list GIF as the only animated type. Keep the GIF short and small in pixels, because size grows with every frame.

Sources

Written by Tobias. Updated October 26, 2026.