Lottie, animated SVG, GIF or MP4?

The same animation can leave your hands in four shapes, and the wrong choice usually shows up as a heavy page or a jagged edge. Here is what each one is actually good at.

Lottie — apps and websites

A Lottie is a JSON description of the animation: shapes, transforms and keyframes, replayed by a player at runtime. It stays sharp at any size, it is usually the smallest file of the four, and a developer can control it in code: play on scroll, pause on hover, recolour it to match a theme.

The cost is the player, a JavaScript library on the web or a native one on iOS and Android. And not everything in the vector world survives the trip: complex masks, blend modes and filters either behave differently or drop out.

Choose it when the animation goes into a product and there is a developer to receive it.

Animated SVG — markup with no dependencies

One file that animates itself with CSS. Drop it in an <img> tag or paste the markup into the page and it plays. Vector, so it stays crisp; text-based, so it compresses well; no library at all.

The limits: less runtime control than Lottie, since you cannot easily scrub or pause it from JavaScript when it is loaded as an image, and some email clients strip it.

Choose it when you want a self-contained file with no dependencies and no build step. It is often the right answer for a website, and the most underrated of the four.

GIF — email, chat, anywhere else fails

The GIF works everywhere, which is its whole argument. Everything else about it is a compromise: 256 colours per frame, so gradients band; one bit of transparency, so soft edges get a halo; and files ten to fifty times heavier than the equivalent Lottie.

Choose it when the destination cannot take anything else: newsletters, older chat clients, some documentation systems.

MP4 — social media

Video is what social platforms want. An MP4 is far lighter than a GIF of the same length, carries full colour, and gets hardware-accelerated playback everywhere.

What you give up is transparency: H.264 has no alpha channel, so the animation always sits on a solid background. Decide that colour deliberately rather than discovering it later.

Choose it when the animation is going on Instagram, TikTok, LinkedIn, or into a video edit.

A rule of thumb

• Going into an app or a website with a developer → Lottie.
• Going into a web page you control, no library wanted → animated SVG.
• Going into an email or a chat → GIF.
• Going onto social media → MP4.
• Not sure who receives it → export Lottie and MP4. Between them they cover almost every request that comes back.

The editor exports all four from the same timeline, so this is not a decision you have to make early. Set the animation up once and take whichever files you need.