惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

美团技术团队
Cyber Security Advisories - MS-ISAC
Cyber Security Advisories - MS-ISAC
Martin Fowler
Martin Fowler
雷峰网
雷峰网
IT之家
IT之家
小众软件
小众软件
M
MIT News - Artificial intelligence
博客园 - 聂微东
J
Java Code Geeks
Blog — PlanetScale
Blog — PlanetScale
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
A
About on SuperTechFans
G
Google Developers Blog
Engineering at Meta
Engineering at Meta
Recent Announcements
Recent Announcements
freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More
The GitHub Blog
The GitHub Blog
F
Fortinet All Blogs
C
Check Point Blog
云风的 BLOG
云风的 BLOG
腾讯CDC
H
Help Net Security
Y
Y Combinator Blog
I
InfoQ

DEV Community

Authentication Security Deep Dive: From Brute Force to Salted Hashing (With Java Examples) Why AI Systems Don’t Fail — They Drift Spilling beans for how i learn for exam😁"Reinforcement Learning Cheat Sheet" I Replaced Chrome with Safari for AI Browser Automation. Here's What Broke (and What Finally Worked) How Python Borrows Other People's Work The $40 Architecture: Processing 1 Billion API Requests with 99.99% Uptime Vibe Coding: A Workflow Guide (From Zero to SaaS) Most webhook security guides protect the wrong side. The scary part is delivery. Headless CMS for TanStack Start: Build a Blog with Cosmic EU Age Verification App "Hacked in 2 Minutes" — What Actually Happened Comfy Cloud’s delete function does not actually remove files Running AI Models on GPU Cloud Servers: A Beginner Guide Event-driven media intelligence with AWS Step Functions and Bedrock I scored 500 AI prompts across 8 quality dimensions — here's what broke How to Call Google Gemini API from Next.js (Free Tier, No Backend Needed) The Portal Protocol: Reclaiming Human Connection in the Age of AI How to Fix Your Team's Scattered Knowledge Problem With a Self-Hosted Forum Intro to tc Cloud Functors: A Graph-First Mental Model for the Modern Cloud Designing Multi-Tenant Backends With Both Ownership and Team Access I Built a Neumorphic CSS Library with 77+ Components — Here's What I Learned PostgreSQL Performance Optimization: Why Connection Pooling Is Critical at Scale Cómo construí un SaaS multi-rubro para gestionar expensas en Argentina con FastAPI + Vue 3 🚀 I Built an Ethical Hacking Scanner Tool – Open Source Project I Replaced /usage and /context in Claude Code With a Single Statusline A Pythonic Way to Handle Emails (IMAP/SMTP) with Auto-Discovery and AI-Ready Design I Collected 8.9 Million Polymarket Price Points — Here's What I Found About How Markets Really Move EcoTrack AI — Carbon Footprint Tracker & Dashboard Everyone's Using AI. No One Agrees How. 5 self-hosted ebook managers worth trying in 2026 Building Your First AI Agent with LangChain: From Chatbot to Autonomous Assistant
Lottie JSON vs .lottie Format — What's the Difference and...
Fazal Shah · 2026-05-31 · via DEV Community

Fazal Shah

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:

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.