Lottie vs GIF: which should you actually use?
Lottie and GIF sit at opposite ends of the same job. Lottie is a vector recipe that needs a player; GIF is baked pixels that play anywhere. Choosing between them isn't about which is “better” — it's about whether your destination has a Lottie runtime, and what the animation costs in kilobytes when it doesn't.
Size: no contest — until there's no runtime
A typical UI animation is 10–50 KB as Lottie JSON and 500 KB–3 MB as a GIF of the same length. The JSON describes shapes once and moves them with keyframes; the GIF stores every frame as a full color-mapped image. If your destination can play Lottie (a website or app with a player), Lottie wins on size by one or two orders of magnitude.
The moment there's no runtime — email, Slack, decks, READMEs — Lottie's size advantage is irrelevant, because the file simply doesn't play. A 1 MB GIF that renders beats a 20 KB JSON that doesn't.
Quality: vectors vs a 256-color palette
Lottie renders from vectors: crisp at any scale, full color, smooth alpha, and it can be retimed or recolored at runtime. GIF is locked pixels with a 256-color palette (gradients can band) and 1-bit transparency (hard edges, no soft shadows).
If GIF's limits show in your artwork, the middle ground is APNG (full color, 8-bit alpha, plays in every modern browser) or WebM video with alpha — both exportable from the same Lottie source here.
The decision in practice
Shipping inside your own website or app → keep it Lottie with a player; smallest and sharpest. Sending it anywhere you don't control the renderer — email campaigns, chat, presentations, documentation, marketplaces — convert to GIF (or APNG/MP4 depending on the surface).
Most teams need both: the Lottie stays the source of truth in the design system, and GIFs/videos are generated from it per destination. That's why keeping the original .json matters even after you've converted — every new destination is a 10-second re-export, not a redesign.
