GIF vs MP4 vs WebP (and AVIF): which format for a short looping animation?
A short loop for a website, a bug report, a README or a chat: which format should it be? It depends on where it's going more than on the picture.
Side by side
| GIF | Animated WebP | MP4 (H.264) | Animated AVIF | |
|---|---|---|---|---|
| Typical size for the same clip | Largest (baseline) | ~25 to 50% of the GIF | ~3 to 10% of the GIF | Smallest, often below MP4 |
| Colours | 256 per frame | Full colour | Full colour | Full colour, HDR possible |
| Transparency | On/off only (hard edges) | Smooth | No (in H.264 MP4) | Smooth |
| Sound | No | No | Yes (mute it for a loop) | No |
Works as an <img> | Everywhere | All current browsers | No, needs <video> | Current browsers |
| Accepted by upload forms | Almost always | Often | Where video is allowed | Sometimes |
Sizes vary with content: flat screen recordings narrow the gap, camera footage widens it.
Why the gap is so big
GIF compresses each frame on its own, a bit like zipping a stack of bitmaps. Video formats predict each frame from the previous one and only store the difference, and they throw away detail your eye won't miss (see lossless vs lossy compression). WebP and AVIF borrow those video tricks but package the result as an image, which is why they sit in between.
Which to use where
- Your own website: a muted MP4 loop, with a WebP or GIF fallback only if you need one. Use
<video autoplay muted loop playsinline>; browsers only autoplay video that's muted, andplaysinlinestops phones going full screen. - Bug reports, READMEs, wikis: if they accept video, attach an MP4. If only images are allowed, a GIF of a screen recording at 10 fps is usually small enough.
- Chat apps and forums: many convert uploaded GIFs to video anyway, so either works; check the size limit.
- Email: GIF. Most email apps don't play video or animated WebP inline.
- Transparency on a coloured page: animated WebP or AVIF (smooth edges), or a GIF with a matte that matches the background.
Converting between them with ffmpeg
GIF to MP4 (the scale keeps the dimensions even, which H.264 needs):
ffmpeg -i input.gif -movflags +faststart -pix_fmt yuv420p -vf "scale=trunc(iw/2)*2:trunc(ih/2)*2" output.mp4
Video to animated WebP:
ffmpeg -i input.mp4 -vf "fps=12,scale=480:-2" -c:v libwebp -lossless 0 -q:v 70 -loop 0 -an output.webp
Video to a good GIF uses a two-step palette; the GIF size calculator writes those commands for your width, frame rate and colours, and why is my GIF so big explains each setting.
Questions
Is MP4 smaller than GIF?
Almost always, often 10 to 30 times smaller for the same clip, because video only stores what changes between frames. Flat screen recordings narrow the gap.
Is animated WebP better than GIF?
For size and colour, yes: it's full colour with smooth transparency and usually a quarter to half the size. GIF still wins on compatibility, especially in email and some upload forms.
Can I use an MP4 instead of a GIF on a web page?
Yes. Use a video tag with autoplay, muted, loop and playsinline. It behaves like a GIF but loads far faster.
Does GIF support more than 256 colours?
Not in practice. Each frame has a palette of at most 256 colours, which is why photos and gradients look blotchy or dotted in GIFs.
How do I convert a GIF to MP4?
With ffmpeg: ffmpeg -i input.gif -movflags +faststart -pix_fmt yuv420p -vf "scale=trunc(iw/2)*2:trunc(ih/2)*2" output.mp4. It runs on your own computer.
Published .