Lottie vs GIF vs SVG vs MP4: Which Animation Format to Use in 2026

Choosing an animation format is mostly a question of what the animation is made of. Vector artwork (icons, logos, UI, flat illustration) belongs in a vector format; photographic or 3D-rendered footage belongs in video. Here is how the common options compare.

Comparison

Format	Typical size (2s icon)	Scales	Transparency	Interactive	Best for
Lottie (JSON)	10–80 KB	Yes	Yes	Yes (play, scrub, recolor)	UI, icons, logos, illustration, onboarding
dotLottie	5–40 KB	Yes	Yes	Yes	Same as Lottie, multiple animations in one file
Animated SVG (CSS/SMIL/JS)	3–30 KB	Yes	Yes	Yes	Simple loaders, hover states, line drawings
GIF	300 KB–3 MB	No	1-bit only	No	Email, legacy platforms
Animated WebP / APNG	100–800 KB	No	Yes	No	Stickers, chat apps
MP4 / WebM	200 KB–2 MB	No	WebM/HEVC only	Limited	Video footage, 3D renders, complex effects

When Lottie wins

Anything drawn with shapes: animated icons, logo reveals, empty states, success and error feedback, walkthrough illustrations, charts. A Lottie file is resolution-independent, so one asset serves phones and 4K monitors. It can be recolored at runtime to match themes, played in segments (hover in, hover out), driven by scroll and controlled from JavaScript, Swift, Kotlin or Flutter with the same file. See 105 examples made by the author of this guide.

When SVG animation wins

If the motion is simple (a spinner, a checkmark drawing itself, a hamburger to X) and you want zero dependencies, animate the SVG directly with CSS keyframes or a few lines of JavaScript. No player library, perfect for above-the-fold performance budgets.

When video wins

Raster content: product footage, 3D renders, particle effects with thousands of elements, anything photographic. Export H.264 MP4 plus a WebM or AV1 alternative, and remember that transparent video needs WebM VP9 or HEVC with alpha, with fallbacks.

When GIF is still acceptable

Email clients and a few legacy CMSs. Everywhere else GIF is the worst option: 256 colors, jagged transparency and files 20 to 50 times larger than the same motion in Lottie.

Performance notes

• Lottie needs a player (lottie-web light build is about 60 KB gzipped; dotLottie web component about 40 KB). Load it once, lazily.
• Prefer the SVG renderer for crisp UI; use canvas for many simultaneous animations.
• Avoid embedded raster images and heavy masks inside Lottie files; they negate the size advantage. Read how to optimise Lottie files.

Decision rule

Vector artwork with any interactivity: Lottie. Vector artwork, trivial motion, no dependencies: SVG. Photographic or 3D: MP4/WebM. Email: GIF.