8 min read
Lottie vs GIF vs Video vs WebP: Choosing the Right Format
"Just use Lottie" isn't always the right answer, and neither is "just use a GIF." Each format stores animation data in a fundamentally different way, and that difference drives file size, quality, and how much control you have at runtime. Here's how they actually compare, with a concrete example: a simple 3-second, 500×500 looping loading spinner.
How each format actually stores the animation
- Lottie (JSON): stores vector shapes and keyframes as text/numbers, not pixels. A shape rotating from 0° to 360° is a handful of numbers, regardless of how large it's displayed.
- GIF: stores a sequence of full raster frames with a shared 256-color palette. Every frame is pixels, so smoother motion or more colors both directly increase file size.
- MP4 / WebM (video): raster frames compressed with real video codecs (H.264/VP9), which are far more efficient than GIF's palette-based compression but still scale with resolution and frame count, not motion complexity.
- Animated WebP: a modern raster format, essentially a more efficient GIF replacement with full color and alpha transparency support, but still frame-based like GIF and video.
Rough size comparison for the same 3-second vector-friendly spinner
| Format | Typical size | Why |
|---|---|---|
| Lottie JSON | 3–15 KB | Just keyframes and shape math, no pixels at all |
| Animated WebP | 40–90 KB | Full frames, but efficient modern compression |
| MP4/WebM | 50–150 KB | Efficient codec, but still encodes every frame |
| GIF | 200–600 KB | 256-color palette forces dithering; poor compression |
These numbers flip for photographic or heavily textured content — a Lottie file that embeds a photo as a raster asset can easily end up larger than the same clip as an MP4, because Lottie has to carry the raw image data plus JSON overhead on top of it.
Other differences that matter beyond file size
- Scaling: Lottie is vector-based and stays crisp at any size or DPI; GIF, WebP, and video are raster and will blur or pixelate if scaled beyond their source resolution.
- Runtime control: Lottie players (e.g.
lottie-web,dotlottie-web) let you change speed, direction, colors, and play specific segments in code. GIF and video give you play/pause/seek at best, and dynamic recoloring isn't possible without re-encoding. - Autoplay behavior: video needs
mutedandplaysinlineattributes to autoplay on mobile Safari; GIF, WebP, and Lottie don't have this restriction since they aren't treated as video elements by the browser. - Transparency: Lottie, GIF (1-bit), and WebP (full alpha) all support transparent backgrounds; standard MP4/WebM do not (WebM with VP9 can, but support is inconsistent).
Quick decision guide
Use Lottie for UI animations, icons, illustrations, and motion graphics made of shapes and text — onboarding flows, loading states, success/error micro-interactions, animated icons.
Use video (MP4/WebM) for anything photographic or filmed — product demos, real footage, complex particle or lighting effects that can't be represented as vector shapes.
Use animated WebP as a middle ground when you need raster content (screenshots, photos) but want smaller files than GIF with better color and transparency support, and don't need Lottie's runtime scripting capabilities.