vsMP4Lottie vs MP4 (video)
Lottie vs MP4: vector animation vs video for the web
MP4 video handles photographic, complex motion. Lottie handles crisp, lightweight vector UI animation. Picking the wrong one means bloat or blur.
Updated June 2026 · Written by Shaheer Malik, who ships in both
Quick answer
Lottie is a tiny vector (JSON) format for crisp, scalable, transparent UI animation that can be interactive. MP4 is a video format for footage and complex photographic motion that vector can't express. Use Lottie for icons, loaders and UI motion; use MP4/WebM for demos, footage and rich video. They suit different kinds of content.
MP4 (and WebM) is how you ship real video — footage, complex effects, photographic motion. It's efficient for that and plays everywhere. But for vector UI animation it's the wrong tool: it can't scale without re-encoding, transparency is awkward, and even short clips are heavy compared with a vector alternative.
Lottie is purpose-built for crisp, lightweight UI animation: small vector JSON, sharp at any size, full alpha transparency, and optional interactivity. The two aren't really rivals — they're for different kinds of motion.
| Dimension |  Lottie | MP4 |
|---|---|---|
| Content type | Vector UI animation | Photographic / complex video |
| File size (UI motion) | Tiny | Heavy |
| Scaling / resolution | Crisp at any size | Fixed, re-encode to scale |
| Transparency | Full alpha | Awkward / limited |
| Complex/real footage | Not suitable | Exactly what it's for |
| Interactivity | Possible via player | None |
| Best for | Icons, loaders, UI motion | Demos, footage, rich video |
Choose Lottie if…
- It's vector UI motion — icons, loaders, illustrations
- You need transparency over a UI background
- Small file size and retina sharpness matter
- You may want light interactivity
Choose MP4 / video if…
- The content is footage or photographic motion
- There are complex effects vector can't express
- It's a product demo or background video
- You need a single self-contained media file
The honest verdict
For vector UI animation, Lottie is the clear pick — a fraction of the weight, sharp at every resolution, and transparent over your interface. Shipping a UI loader as an MP4 is overkill that costs bandwidth and quality.
MP4 (or WebM) is right when the content is genuinely video: footage, demos, rich photographic motion that vector can't represent. Match the format to the content — vector motion to Lottie, real video to MP4.
Common questions
Lottie vs MP4, answered
For vector UI animation, dramatically — Lottie stores vector instructions, so a simple animation is kilobytes versus a multi-megabyte video. For real footage, though, MP4 is the efficient choice.
More comparisons