emotesize

Why is my Lottie file so big?

· 6 min read

Short answer: images. If your Lottie is over 1 MB, it almost certainly has embedded PNGs, and base64 adds a third on top of their size. Compress the images, or switch to dotLottie, and most files drop by half or more.

1. Embedded images, stored as base64

When an After Effects composition uses a PNG or JPEG, Bodymovin can embed it in the JSON as a data:image/png;base64,… string. Base64 represents every 3 bytes as 4 characters, so a 1.5 MB PNG becomes 2 MB of text. Exporters also tend to write PNGs with little compression.

Measured on a real splash animation: 6.38 MB in total, 6.23 MB of it in five base64 PNGs. Everything else, every layer and keyframe, came to 150 KB.

Fix: re-encode the images. Run lossless PNG optimisation first, then a palette PNG or JPEG wherever the result is visually identical. That's what the Lottie Compressor does, and that splash file came down to 3.21 MB.

2. Images bigger than the screen

A 2781-pixel-tall background in a phone animation renders at about 2400 physical pixels on the largest phones. The extra pixels cost download size and memory. Memory is the bigger cost: decoded images take width × height × 4 bytes, so a 1353×2781 image needs 15 MB of RAM whatever its file size.

Fix: export images at the size they're displayed. Compression reduces the download but not the memory.

3. Too many decimals

Bodymovin writes numbers like 0.833333333333333. Across thousands of keyframes and bezier handles, those digits add up, typically 10–30% of the animation data. Rounding to 3 decimals is invisible on any screen.

4. Leftovers

  • Unused assets: images and precomps still in the file after their layers were deleted.
  • Duplicates: the same PNG imported twice under different names, stored twice.
  • Hidden layers: guide layers that were switched off but still exported.
  • High frame rates: 60 fps exports with keyframes baked on every frame, for example from expressions converted to keyframes.

5. Shipping JSON instead of dotLottie

Servers gzip JSON, but base64 images barely compress further. dotLottie stores images as raw files in a ZIP and deflates the JSON. In React Native it also skips sending a large JSON across the JS bridge.

Checklist

  1. Open the file in the Lottie Inspector to see how much is images and how much is animation data.
  2. If it's mostly images, compress them and consider exporting them smaller.
  3. If it's mostly animation data, round decimals, remove hidden layers, and lower the frame rate if the motion allows.
  4. Ship .lottie where your players support it.