Compress Lottie files. Keep the motion.
Optimize Lottie JSON and dotLottie files directly in your browser. Reduce file size without uploading your animations to a server.
How It Works
No software installation. No accounts required to start. 100% private in-browser optimization.
Drop your file
Drag and drop your Lottie JSON or dotLottie animation. Processing begins instantly without queueing.
Optimize in your browser
Our offline engine strips metadata, rounds decimal precision, and converts raster assets locally in memory.
Download the lighter file
Get your compressed .json or .lottie file in one click. Up to 98% smaller, zero visual loss.
Real Optimization Proof
See how much weight TinyLottie sheds from typical After Effects and Figma animations without altering motion or visual quality.
1.80 MB
1840 KB raw payload
242 KB
0.24 MB lightweight payload
* Measured on an After Effects export with embedded raster layers. 100% visual fidelity maintained.
Designed for Production Performance
Transparent optimization benefits built directly on open web standards. No server intermediaries.
Lottie JSON AST Optimization
Strips unnecessary editor metadata (`nm`, `mn`, `cl`), prunes hidden guide layers, and rounds float coordinates to 3 decimals without visual loss.
dotLottie (.lottie) Support
Convert bulky JSON files into compact, deflated dotLottie binary archives for 30–50% smaller bundle size and faster network transfer.
100% In-Browser Privacy
Your animations never touch an external server or cloud backend. Processing runs entirely in local browser memory with zero data retention.
WebP Asset Transcoding
Automatically identifies embedded base64 PNG and JPEG bitmaps inside your animation and transcodes them to modern WebP via HTML5 canvas.
Instant Offline Download
Download your compressed animation directly from memory with one click. No waiting queues, no processing timeouts, no sign-up required.
Core Web Vitals Boost
Reduces main-thread JavaScript JSON parsing overhead and network payload, improving Largest Contentful Paint (LCP) and Interaction to Next Paint (INP).
How to reduce Lottie file size?
Five techniques that matter most — TinyLottie applies all of them automatically.
Strip Metadata
Remove layer names, match names, and expression metadata — only needed by design tools, not at runtime. Saves 10–30%.
Round Coordinates
Trim float precision from 6 to 3 decimal places. Invisible to the eye, but dramatically reduces numeric payload.
WebP Asset Conversion
Embedded PNG/JPEG images inside Lottie JSON convert to WebP automatically — often the biggest single win at 40–70% savings.
Remove Hidden Layers
Layers with hd: true or 0% opacity throughout still add file weight. TinyLottie strips them automatically.
Switch to dotLottie
The .lottie binary format applies ZIP compression on top of JSON, cutting an additional 30–40% vs raw JSON.
TinyLottie applies all of this automatically
Just drag and drop — no configuration needed.
Simple, Transparent Pricing
Start free with generous limits or unlock lifetime access for large animation files.
Free Tier
Perfect for standard web & app animations
- Up to 3 MB file size
- JSON & dotLottie export
- 100% in-browser offline processing
- Unlimited optimizations
PRO Lifetime
For animation studios, power users and large rigs
- Up to 50 MB file size limit
- High-res embedded asset WebP conversion
- Priority support & feature access
- No recurring subscription fees
Lottie Optimization for Every Platform
Pick your platform. Get the exact steps.
Webflow
Improve Core Web Vitals with smaller Lottie assets
Export from Bodymovin
Export your AE animation as Lottie JSON via the Bodymovin plugin — uncheck 'Original Asset Names' to trim extra metadata before you even start.
Compress with TinyLottie
Drop the .json into TinyLottie. It strips layer names, hidden elements, and rounds float precision. Most Webflow Lottie files shrink 50–98%.
Lazy-load in Webflow
Set the 'Start Animation' trigger to 'Scroll into view' instead of 'Page load' — this defers parser work until the element is visible.
Use dotLottie for custom code
For Webflow custom code embeds, use the .lottie output from TinyLottie — 30–40% smaller than JSON and loads faster over the network.
Webflow Lottie optimization guide
Export from Bodymovin: Export your AE animation as Lottie JSON via the Bodymovin plugin — uncheck 'Original Asset Names' to trim extra metadata before you even start.
Compress with TinyLottie: Drop the .json into TinyLottie. It strips layer names, hidden elements, and rounds float precision. Most Webflow Lottie files shrink 50–98%.
Lazy-load in Webflow: Set the 'Start Animation' trigger to 'Scroll into view' instead of 'Page load' — this defers parser work until the element is visible.
Use dotLottie for custom code: For Webflow custom code embeds, use the .lottie output from TinyLottie — 30–40% smaller than JSON and loads faster over the network.
React Native Lottie optimization guide
Why size matters more on mobile: React Native re-parses the full JSON on every component mount. A 2MB file can add 150–300ms of CPU blocking on mid-range Android devices.
Compress before bundling: Run your .json through TinyLottie first. It removes nm/mn properties (only needed by design tools) and rounds floats — invisible to the renderer.
Cache with useMemo: Memoize your animation source with useMemo() or React.memo() to prevent redundant re-parsing across screen navigations.
Use dotLottie format: Switch to @lottiefiles/dotlottie-react-native. The .lottie binary format parses faster than JSON and is smaller to transfer over the network.
After Effects Lottie optimization guide
Disable unnecessary export options: In Bodymovin, uncheck 'Original Asset Names' and 'Slot IDs'. Enable 'Glyph compression' for text layers. These tweaks alone cut 10–20% before optimization.
Run through TinyLottie: TinyLottie strips nm (layer name), mn (match name), cl (class), and hidden layer flags. For a typical 50-layer rig, this saves 15–35%.
Float precision trimming: AE stores keyframe values with 6–8 decimal places (e.g. 359.9999847). TinyLottie rounds to 3, identical visually but far smaller as a string.
Embedded asset WebP conversion: If your AE comp has raster layers (logos, backgrounds), TinyLottie converts base64 PNG/JPEG assets to WebP — 40–70% smaller.
Figma Lottie optimization guide
Flatten paths before export: Figma stores bezier curves with many redundant anchors. Use Flatten Selection (Cmd+E) before running the LottieFiles or Jitter plugin to pre-simplify.
Compress with TinyLottie: The optimizer rounds all bezier coordinates to 3 decimal places and removes metadata. Figma exports typically see 45–75% reductions.
Remove hidden/masked layers: Figma plugins sometimes export masked layers that contribute to weight. TinyLottie removes all layers where hd: true automatically.
Output as dotLottie: For Figma exports with dense path data, the dotLottie output applies ZIP compression on top — achieving 80%+ total reduction from the original.
Next.js Lottie optimization guide
Always use dynamic import (ssr: false): Lottie libraries use Canvas and rAF — they can't run server-side. Import dynamically: const Lottie = dynamic(() => import('lottie-react'), { ssr: false }).
Compress JSON with TinyLottie first: Reducing a 500KB animation to 80KB means 420KB less JS parsed on every page load — directly improving your LCP and INP Core Web Vitals scores.
Serve from /public, not your bundle: Fetch from /public/animations/hero.json on the client instead of importing JSON directly. This splits animation data from your JS bundle and enables browser caching.
Trigger with Intersection Observer: Don't autoplay on mount. Start animation playback only when the element enters the viewport — improves perceived performance and saves CPU on initial load.
How does TinyLottie work
Everything you need to know about optimizing your Lottie animations
Still have questions?
Have a specific question or need help? We're here to assist you.