Jump to content
What techniques do you use to keep file sizes small when exporting Lottie animations from After Effects, and how do you balance quality with performance?

Recommended Comments

4.9 (1079)
  • Animator
  • Motion designer

Posted

This is a very nice question! Here are some key points to consider:

Ensure that the assets you use for compositing are vectors. These can either be imported from Illustrator or created using primitive vector shapes in After Effects (AE).

Always try to minimize the number of keyframes as much as possible to achieve the desired results. This will have a significant impact on the final file size, as each keyframe adds extra data (in terms of bits) to store the animation information.

Normally, raster images (such as JPGs, PNGs, or PSDs) are not preferred. However, if you do have these assets in the composition, make sure to follow these settings for optimal compression of the final file:

  • Export settings: Assets -> Include in the JSON (checked)
  • Compression rate: 80%
  • Avoid the following for better performance and smaller file sizes:
  • Complex expressions
  • Baked keyframes
  • Assets with high file sizes
  • Unused groups or paths (remove them) or merge paths included in the composition

Lastly, after exporting, get a copy of DotLottie from the LottieFiles official website to obtain a more optimized version of your animation without sacrificing quality.

I hope this is helpful.

Regards,
Meer

4.8 (773)
  • Video & Animation

Posted

Techniques to reduce file size, balance quality and performance

1. Bake all of your expressions to keyframes.

2. Convert your baked keyframes to toggle hold keyframes. This step will reduce the file size by 30% to 50%

3. Avoid using raster images as they loose quality when scaled. Always work with shape layers for seamless quality and performance.

4. Reduce number of vector points on a path. Remember that a large number of vector points contribute to large file sizes.

×
×
  • Create New...