Two file formats. Same animations. Very different performance characteristics.
If you've used Lottie before, you know the .json file — you export it from After Effects with the Bodymovin plugin, drop it into lottie-web, done. But there's a newer format: .lottie. It's a binary container that replaces the JSON, and if you're starting a new project, it's worth understanding the difference.
What is Lottie JSON?
The original format. A .json file that describes vector animations: shapes, keyframes, layers, colors, timing. It's plain text, human-readable, and widely supported.
Pros:
- Works everywhere Lottie is supported
- Human-readable (you can inspect and edit it)
- Supported by every tool and library
Cons:
- Large files (uncompressed JSON with lots of repeated data)
- No built-in support for multiple animations in one file
- No metadata or preview image support
What is .lottie?
The .lottie format (sometimes called dotLottie) is a ZIP container with a .lottie extension. Inside it contains:
- The animation data (compressed JSON)
- A manifest.json describing the file
- Optional preview images
- Optional multiple animations in one container
It was developed by LottieFiles and adopted as the preferred format for modern Lottie tooling.
Pros:
- ~30-70% smaller than equivalent JSON (thanks to compression)
- Can contain multiple animations in one file
- Supports preview thumbnails
- Cleaner API in the @lottiefiles/dotlottie-web renderer
Cons:
- Binary format — not human-readable
- Requires the dotLottie player (not the older lottie-web)
- Slightly less universal support
File Size Comparison
For a typical 2-second UI animation:
| Format | Typical Size |
|---|---|
| Lottie JSON (.json) | 40 – 120 KB |
| dotLottie (.lottie) | 15 – 50 KB |
The size reduction comes from standard ZIP compression applied to the JSON content. It's meaningful on mobile connections.
Converting Between Formats
The easiest way to convert between .json and .lottie formats is using the free browser-based tools at IconKing.
No signup required, no file size limits. Just drag and drop.
Other format conversions available free at iconking.net:
- Lottie to GIF — for email and Slack
- Lottie to MP4 — for video players
- Lottie to WebM — for web with alpha transparency
- Lottie to SVG — static snapshot
- Lottie to WebP — animated WebP
- Lottie to APNG — animated PNG
Should You Migrate Existing Projects?
New project: Start with .lottie format and the dotLottie player. It's better in every dimension except universal support.
Existing project using lottie-web: Migrate only if file size is a concern. lottie-web + JSON works fine and will continue to be supported.
Email or Slack: Use GIF. Neither format works in these environments.
Getting Free Animations in Both Formats
IconKing's free Lottie library has 500+ animations available as .json — and the converter produces .lottie from any of them in one click.
Use the preview tool to check an animation before converting — it works with both .json and .lottie files.
The editor lets you change colors and timing before export.
Quick Reference
| Lottie JSON | dotLottie (.lottie) | |
|---|---|---|
| File size | Larger | ~50% smaller |
| Human readable | Yes | No |
| Multiple animations | No | Yes |
| Player needed | lottie-web | @lottiefiles/dotlottie-web |
Both formats are free and open. The .lottie format is the future — but JSON still works everywhere today.
Top comments (0)