Lottie JSON vs .lottie Format — What's the Difference and Which Should You Use?

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:

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 :

• 
  — for video players


• 
  — static snapshot


• 
  — 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

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

Both formats are free and open. The .lottie format is the future — but JSON still works everywhere today.