The Decision Table
| Format | Typical size (5s animation) | Transparency | Best for |
|---|---|---|---|
| Lottie (JSON) | 10 – 150KB | Yes | UI motion, icons, illustrated animation, anything needing code control |
| Animated SVG / CSS | 2 – 50KB | Yes | Simple shape and path animation, loaders, hover states |
| WebM (VP9 / AV1) | 150 – 800KB | Yes | Filmed or rendered content, background video |
| MP4 (H.264) | 200KB – 1.5MB | No | Universal video fallback, social platforms |
| Animated WebP | 200KB – 2MB | Yes | Direct GIF replacement where video is impractical |
| GIF | 2 – 15MB | Binary only | Email, and platforms that accept nothing else |
The size column is the whole argument. The same five-second loop can be 40KB as Lottie, 300KB as WebM, or 9MB as GIF. On a product page with four animations, that is the difference between an imperceptible addition and a page nobody waits for.
Lottie: Vector Animation as Data
Lottie exports animation from After Effects as a JSON description of shapes and keyframes, rendered by the browser at runtime. Nothing is rasterised, so it stays sharp at any size and any pixel density.
Use it for
- Interface animation — toggles, loaders, success states, empty states
- Animated icons and illustrated brand motion
- Scroll-linked or hover-triggered animation, since playback can be driven by code
- Anything needing runtime colour changes, such as adapting to a dark theme
Avoid it for
- Photographic or filmed content — it will embed images and lose the size advantage entirely
- Heavy particle systems, complex masks, and effects that do not export cleanly
- Long-duration animation, where the JSON grows large and CPU cost rises
Watch out for
Lottie renders on the CPU by default, so ten simultaneous complex animations will make a page feel sluggish on mid-range phones even though the files are tiny. Size is not the only cost — render cost matters too. Keep concurrent animations few, and test on a real budget Android device.
SVG and CSS: The Lightest Option
For simple shape, path, and transform animation, you frequently do not need a library at all. CSS transitions and keyframes, or SVG path animation, cost kilobytes and run on the compositor thread when you animate the right properties.
The rule that matters: animating transform and opacity is cheap because it avoids layout and paint. Animating width, height, top, or left forces the browser to recalculate layout on every frame, which is the usual cause of janky CSS animation. This is one of the mechanics behind the responsiveness metric discussed in our Interaction to Next Paint guide.
Video: WebM and MP4
For anything filmed, rendered, or too visually complex for vector, video is the correct answer — and it is dramatically more efficient than GIF for the same content.
Which codec
- WebM with VP9 — excellent compression, transparency support, works in all modern browsers including current Safari.
- MP4 with H.264 — universally supported, larger files, no transparency. Serve as a fallback source.
- AV1 — best compression available, with encoding time and older-device decode as the trade-offs.
Provide both WebM and MP4 sources in the same video element and let the browser choose. The cost is a few lines of markup and it removes an entire class of compatibility problem.
Making autoplay work
Autoplay is blocked for anything with audio. A background video must be muted and marked to play inline, or mobile browsers will show a play button instead. Add a poster image so something appears instantly, and preload only metadata rather than the whole file.
Keeping it light
- Keep loops under six seconds — a well-chosen loop point matters more than duration
- Encode at the display size, not at 1080p for a 600-pixel container
- Drop to 24 or 30fps unless the motion genuinely needs 60
- Strip the audio track from silent background video
- Serve a smaller encode to mobile
GIF: Why It Persists and Why To Avoid It
GIF is limited to 256 colours, which destroys gradients and frequently mangles brand colours into visible banding. It has no inter-frame video compression, so file size scales badly with duration. It cannot do partial transparency, producing jagged edges over non-white backgrounds. And it typically weighs twenty to fifty times more than equivalent video.
It survives for exactly two reasons: email clients that do not support video, and platforms that accept nothing else. If you must ship a GIF, keep it under two seconds, reduce the palette deliberately, and crop tightly.
For the web, animated WebP is a direct drop-in replacement with far better compression, full alpha transparency, and broad browser support. It should be your default whenever you were about to reach for a GIF.
Choosing By Use Case
| Use case | Format | Why |
|---|---|---|
| Loading spinner | CSS or SVG | Kilobytes, no dependency |
| Animated icon on hover | Lottie | Scalable, code-controllable, tiny |
| Hero background loop | WebM + MP4 | Photographic content, poster image for LCP |
| Product demo on a landing page | WebM + MP4 | Screen recording compresses well as video |
| Illustrated brand animation | Lottie | Vector, on-brand colours, resolution independent |
| Logo animation on a website | Lottie | Sharp at any size; transparent by default |
| Instagram or LinkedIn post | MP4 | Platform requirement |
| Email newsletter | GIF or static image | Video support is unreliable in email clients |
| Animation with transparency over photography | Lottie, or WebM with alpha | GIF transparency is binary and produces jagged edges |
The Rules That Apply Regardless of Format
- Respect reduced-motion preferences. Some people experience motion sickness from animation. Honour the system-level preference and serve a static frame — this is an accessibility requirement, not a nicety, as covered in our accessibility guide.
- Never make animation the LCP element. Use a poster image or a static first frame so your largest paint is something that loads instantly.
- Lazy-load below the fold. Many visitors never scroll to it.
- Reserve layout space. An animation loading into an unsized container causes layout shift.
- Pause off-screen animations. A loop running in a section nobody is looking at costs CPU and battery for nothing.
- Test on a mid-range Android phone. Not on a MacBook, where everything works.
The Practical Summary
If it is illustrated or interface motion, use Lottie. If it is simple shapes, use CSS or SVG. If it is filmed or rendered, use WebM with an MP4 fallback. If you were about to use a GIF, use animated WebP instead, unless it is going in an email.
Getting this right is invisible when done well and immediately obvious when done badly — a page that gained four seconds of load time for a decorative loop is a common and entirely avoidable outcome. Our guide on diagnosing slow websites covers how to spot it.
Kalex Studio delivers motion assets in the formats each placement actually needs, with fallbacks and performance budgets built in. Get in touch to discuss your project.