How to Optimise Lottie File Size: From 2 MB to 50 KB

A well-built Lottie icon weighs 10 to 40 KB. When a file arrives at 1 or 2 MB, the cause is almost always one of the items below. This is the checklist used on every animation in the Free Creative Assets Lottie library.

1. Remove embedded raster images

PNG or JPG layers are base64-encoded inside the JSON and instantly add hundreds of kilobytes. Rebuild the artwork as shape layers (Illustrator import → "Create Shapes from Vector Layer"). If a photo is unavoidable, reference it as an external file in the assets array instead of embedding it.

2. Reduce path complexity

Auto-traced or hand-drawn paths carry thousands of vertices. Simplify in Illustrator (Object → Path → Simplify) before importing; aim for the fewest anchor points that keep the silhouette. Turn off "Preserve Illustrator layers" when you do not need them.

3. Avoid masks, track mattes and effects

Masks and mattes multiply render cost and file size; most can be replaced by a shape layer with a Merge Paths operation. Effects (glow, blur, gradients ramps) are either unsupported or expensive. Repeaters, trim paths and simple gradients are cheap.

4. Prefer shape layers over precomps where possible

Every precomp is a nested composition duplicated in the JSON. Collapse precomps that are used once. Keep precomps only for reused elements.

5. Fewer keyframes, more easing

Baked keyframes on every frame (from expressions or motion sketch) bloat the file. Use two keyframes with a good easing curve. If you rely on expressions, remember lottie-web must evaluate them at runtime; convert to keyframes only if the keyframe count stays reasonable.

6. Trim decimal precision

Bodymovin exports numbers with many decimals. Tools like lottie-optimizer, LottieFiles' optimizer or a short script can round to 2 decimals, typically saving 20 to 40 percent with no visible change.

7. Strip unused assets, markers and hidden layers

Delete guide layers, hidden layers and unused footage before export. Check the "Hidden layers" option is off in Bodymovin settings.

8. Convert to dotLottie

A .lottie file is a zip of the JSON plus assets, usually 60 to 80 percent smaller over the wire. Modern players (dotLottie web, iOS, Android) load it directly.

9. Serve compressed

JSON compresses extremely well. Make sure your server or CDN applies Brotli or gzip to .json: a 300 KB file often transfers as 40 KB.

10. Right-size the composition

Export at the display size (for example 240×240) rather than 1920×1080; coordinates get smaller and the renderer does less work. Frame rate 30 fps is enough for UI; 60 fps doubles keyframe data for little gain.

Benchmarks from real projects

Animation	Before	After	Main fix
Onboarding illustration	1.8 MB	92 KB	Rebuilt raster clouds as shapes
Logo reveal	640 KB	38 KB	Removed mattes, trimmed precision
Loader	210 KB	9 KB	Replaced baked keyframes