Why GIF is so big — and WebP isn't
The GIF format is from the 1980s: at most 256 colors per frame and a compression that stores each frame almost raw. For animations this adds up to enormous files — a few seconds of motion quickly hits double-digit megabytes. Animated WebP solves both: full color depth (millions instead of 256 colors) and modern compression that only stores the differences between frames. The result: often a fraction of the GIF size at better quality. The full comparison is in GIF vs WebP.
When animated WebP is worth it
| Goal | Best choice |
|---|---|
| Your own, modern website | animated WebP (small, sharp) |
| Chat/messenger (unknown app) | GIF (plays everywhere) |
| Longer clip on your own site | muted auto-play video |
| GIF (broad support) |
In short: on your own, modern website animated WebP wins — anywhere you don't know the playback environment, GIF is safer thanks to its universal compatibility.
How to create animated WebP
Important to know: the browser Canvas API alone cannot encode animated WebP — that needs a specialized tool. The common routes:
- From a video with ffmpeg (command line): ffmpeg can turn video clips directly into animated WebP, with control over frame rate and quality. The route resembles the GIF export described in Create a GIF from a video — just with WebP as the target.
- From an existing GIF: specialized converters turn an animated GIF into animated WebP and shrink it substantially. Check whether the processing runs locally or on a server.
- From single frames: tools like the WebP command-line package (img2webp) assemble an image sequence into a WebP animation.
The three size rules still apply
Animated WebP also benefits from being sensible about length, dimensions, and frame rate:
- Keep it short — 2–6 seconds.
- Scale it down — 480 px wide is enough for most purposes.
- Lower the frame rate — 10–15 fps suffices for gestures and loops.
These rules turn a big animated WebP into a genuinely lean one — and they're the same ones that apply to GIF.
Don't forget the fallback
Because not every environment plays animated WebP, it's worth a fallback on websites: the <picture> element with WebP animation and a GIF or video fallback, so older software still shows something moving. For longer clips a muted auto-play video is the most efficient solution anyway — smaller than any animation and at full quality.
In short
- Animated WebP = a fraction of GIF size, more colors.
- Make it from video (ffmpeg), a GIF, or single frames.
- Keep it short, small, low fps.
- GIF/video fallback where playback support is uncertain.