Why is the lottie animation file size so large when exported from After Effects using bodymovin with a compression of 60, making it unsuitable for Webflow due to long loading times?
TL;DR
- Simplify vector shapes, remove unused or hidden layers, and avoid unsupported After Effects effects to reduce Lottie file size.
- Eliminate embedded images, lower frame rate and duration, and use tools like LottieFiles Optimizer for further compression.
Large Lottie file sizes from After Effects, even when using Bodymovin compression (e.g., 60), are typically caused by complex animation elements, unsupported features, or embedded assets. Here’s how to identify and fix the problem.
1. Reduce Vector Complexity
- Overly detailed vector paths (from Illustrator or custom shapes) significantly increase JSON file size.
- Solution: Simplify shapes in After Effects or Illustrator before importing. Avoid excessive anchor points.
2. Eliminate Hidden or Unused Layers
- Invisible or hidden layers are still exported unless excluded in Bodymovin.
- Solution: In Bodymovin, manually uncheck any unused or hidden layers in your composition before exporting.
3. Avoid Unsupported Effects
- Effects not supported by Lottie (e.g., blur, glow, certain expressions) may be rasterized as image assets, which bloats the file.
- Solution: Use only supported features—shapes, keyframe transforms, opacity, solid colors, and trim paths are safe.
4. Remove Embedded Images
- If your animation includes raster images (e.g., PNGs, JPEGs), Bodymovin embeds them as base64 strings, inflating the JSON.
- Solution: Either remove them or link them externally (and host them separately). Use vector shapes instead of images when possible.
5. Limit Frame Rate and Duration
- Higher frame rates and long animation durations generate more keyframes and data.
- Solution: Reduce frame rate (e.g., from 60fps to 30fps) and keep the animation loop short.
6. Adjust Compression Cautiously
- The compression setting (e.g., 60) in Bodymovin does apply some reduction, but it doesn’t eliminate structural inefficiency.
- Solution: Don’t rely on compression alone. Optimize the source animation itself.
7. Use Lottie Optimization Tools
- Tools like LottieFiles Optimizer, SVGOMG (for input SVGs), or custom scripts can further clean the JSON.
- Solution: Try uploading the Lottie JSON to LottieFiles.com and use their "Optimize" feature.
Summary
Large Lottie file sizes usually result from complex vector shapes, unsupported After Effects features, embedded images, or high frame rates—not just a lack of compression. To optimize for Webflow, simplify vector paths, use only supported effects, remove images, and reduce animation duration and frame rate before exporting with Bodymovin.