Guide · Updated October 2026
Lottie JSON vs dotLottie (.lottie): what's the difference and which should you use?
Both formats describe the same animation. The difference is packaging: Lottie JSON is plain text, dotLottie is a compressed archive around that text. Which one you ship depends mostly on the player you use.
| Lottie JSON (.json) | dotLottie (.lottie) | |
|---|---|---|
| What it is | A JSON document exported by Bodymovin, Figma plugins, Jitter and others | A ZIP archive with a manifest.json, one or more animations and their image assets |
| Compression | None in the file (your server can gzip/Brotli it) | Deflate-compressed inside the archive |
| Images | Embedded as base64 text (~33% overhead) or loaded from a path | Stored as binary files in the archive |
| Multiple animations | One per file | Several in one file |
| Editable as text | Yes | Unzip first |
| Player support | Every Lottie player | dotLottie players and recent versions of the main Lottie libraries |
How much smaller is dotLottie?
For vector animations, a lot: in our test, a 45.7 KB JSON from LottieFiles' public samples became a 4.6 KB .lottie, about 90% smaller. For animations that are mostly embedded photos or PNGs the gain is smaller, because image data is already compressed. The bigger lever there is converting those images to WebP — see how to reduce Lottie file size.
Keep in mind that most web servers and CDNs already gzip JSON in transit. So on the web, the download-size gap between a gzipped JSON and a .lottie is smaller than the file-size gap on disk. The gap stays large inside app bundles, where files are usually not compressed for you.
Which players support .lottie?
- Web: the dotLottie players from LottieFiles (
@lottiefiles/dotlottie-weband its React, Vue and web-component wrappers) play .lottie directly. Classiclottie-webexpects JSON. - iOS and Android: recent versions of Airbnb's
lottie-iosandlottie-androidcan load .lottie files, and LottieFiles publishes native dotLottie players. Check the version you ship before switching. - React Native, Flutter and others: support depends on the library and version. If in doubt, test a .lottie on a real device first, and keep the JSON as a fallback.
Which one should you ship?
- Use dotLottie when your player supports it, especially in mobile app bundles, for animations with images, or when you ship several animations together.
- Use JSON when you rely on
lottie-web, need to edit or theme the animation as text, or your toolchain only understands JSON. Serve it with gzip or Brotli. - Either way, optimize first. Rounding coordinates, stripping editor metadata and converting images to WebP makes both formats smaller.
How to convert between them
Use the free Lottie to dotLottie converter to package a JSON as .lottie, or the dotLottie to JSON converter to extract the JSON back out. Both run in your browser; nothing is uploaded.
Shrink your animation before you ship it
Drop a Lottie JSON or .lottie into TinyLottie to see the optimized size and a side-by-side preview, then download as JSON or dotLottie. Runs in your browser. Free for files up to 3 MB.