What are some tips for reducing the file size of a JSON file, specifically for 3D models, like the ones on the Apple website, that were created in Cinema 4D, rendered as a sequence of PNG files, and exported using Bodymovin in After Effects?

To reduce the file size of a JSON (Lottie) file created using Bodymovin from After Effects animations (based on Cinema 4D-rendered PNG sequences), follow these focused optimization tips:

​

1. Use Image Sequences as External Assets

​

• Avoid embedding PNGs inside the JSON. Including large PNGs as base64 data bloats the Lottie file.
• In Bodymovin’s render settings, check "Include in JSON: No" for assets and ensure PNGs are referenced in an images folder instead.
• This keeps the core JSON lightweight and maintains efficient image loading.

​

2. Compress PNG Image Sequence

​

• Optimize PNGs before exporting from After Effects or using external tools like:
• ImageOptim, TinyPNG, or PNGGauntlet.
• Lower the PNG bit depth if full color or alpha isn't required.
• Convert PNGs to WebP or AVIF (if supported in your viewer) for even smaller sizes.

​

3. Reduce Composition Dimensions and Frame Rate

​

• Use the smallest necessary resolution for the animation preview; even small reductions in size scale down the asset footprint.
• Restrict your composition’s frame rate (e.g., from 60 fps to 30 fps) to cut down on the number of frames exported.

​

4. Limit Use of Complex Effects in After Effects

​

• Reduce use of glows, blurs, or raster-heavy effects that force After Effects to rasterize and increase JSON data.
• Prefer vector or shape layer animations when possible; these compress more efficiently in Lottie format.

​

5. Trim Duration and Loop Strategically

​

• Cut down animation length to just the essential duration.
• Use looping behavior inside Lottie players rather than exporting long loops directly.

​

6. Use Image Sequences Instead of Frame-by-Frame Vector Animation

​

• If possible, referenced image sequences are more performant and file-size efficient than exporting frame-by-frame vector data for 3D-looking animations.

​

7. Clean Up the AE Project Before Export

​

• Pre-render and flatten layers where possible.
• Remove unused assets and layers to avoid them being written into the export by Bodymovin.

​

8. After Effects Bodymovin Settings Optimization

​

• Select "Compress JSON" during export to minimize file size.
• Ensure "Glyphs" are turned off if not using custom fonts.

​

Summary

​

To minimize JSON file size, keep image sequences external, compress image files, limit animation complexity, adjust resolution/frame rate, and optimize Bodymovin export settings. These steps will significantly reduce load times while preserving animation quality on the web.