Guide · Updated October 2026

Why is my Lottie file so large? How to reduce Lottie file size

A Lottie animation should be a few kilobytes of vectors. When yours is 2, 5 or 20 MB, something specific is bloating it — and it is usually one of five things. Here is how to find which one, and how to fix it.

1. Find out what is making your file heavy

Open the .json in a code editor and check three things:

• Search for data:image. Each match is a bitmap embedded as base64 text inside the assetsarray. Base64 adds roughly 33% on top of the image's own size, and PNG screenshots or photos are often hundreds of kilobytes each. If you find these, they are almost certainly most of your file.
• Look at the numbers. Values like 0.83333333333333 repeated across thousands of keyframes and path vertices add up quickly.
• Look for names. Keys such as nm (layer and shape names), mn (match names) and cl (class names) are useful in After Effects but are not needed to play the animation.

2. Embedded images (the usual culprit)

Lottie is a vector format, but After Effects compositions often include PNG or JPEG layers — textures, screenshots, illustrations exported as bitmaps. Bodymovin can embed them into the JSON, which is convenient but heavy. You have three options:

• Replace them with vectors where you can. This gives the biggest and sharpest result.
• Resize them before export to the size they are actually displayed at. A 2000 px image shown at 300 px wastes most of its bytes.
• Convert them to WebP. WebP is usually much smaller than PNG at similar visual quality. The TinyLottie compressor does this in your browser: each embedded PNG, JPEG or GIF is re-encoded as WebP (quality 80) and only kept if it comes out smaller.

3. Float precision and editor metadata

Players don't need six or more decimal places to position a vertex on screen. Rounding to three decimals is visually indistinguishable in typical UI animations and removes a lot of characters. Removing editor-only keys (nm, mn, cl) and redundant defaults such as "hd": false shaves off more. TinyLottie applies exactly these steps — it does not delete layers or change timing.

Expect modest gains here on files that were exported carefully (single-digit percent), and larger gains on files with long names and many keyframes.

4. Fix it at export time

• Delete hidden or unused layers and precomps in After Effects before exporting.
• Avoid expressions where a baked keyframe would do, and simplify paths with too many points.
• Keep frame rate and duration as low as the motion allows; fewer keyframes means a smaller file.
• Export images at display size, or keep them as separate assets if your player loads them from a URL.

5. Ship it compressed: dotLottie, gzip and lazy loading

JSON is text, and text compresses extremely well. Two ways to benefit from that:

• dotLottie (.lottie) is a ZIP archive of your animation. Convert any JSON with the free Lottie to dotLottie converter and play it with a dotLottie-compatible player.
• Serve JSON with gzip or Brotli if you stay on plain JSON — most hosts and CDNs do this automatically for application/json.
• Lazy-loadanimations that are below the fold, so they don't compete with your page's first paint.

6. Real before/after numbers

We ran two files through TinyLottie (October 2026). Results depend heavily on the file, so treat these as examples, not promises.