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 file for 3D model animations created in Cinema 4D, rendered as PNG sequences, and exported with Bodymovin, you need to optimize several parts of the pipeline.

1. Optimize the Source PNG Sequence

• Reduce Image Resolution: Before importing into After Effects, scale down your PNGs to the smallest viable resolution using tools like Photoshop, Preview, or batch tools.
• Compress the Images: Use image compressors like TinyPNG or ImageOptim to reduce file size without visible quality loss.
• Reduce Frame Rate: Fewer PNGs = less image data baked into the final animation (e.g., 12–15 fps instead of 30).

2. Simplify the After Effects Timeline

• Minimize Keyframes: Bodymovin encodes all keyframes into the JSON file. Fewer keyframes = smaller JSON.
• Avoid Pixel-Based Assets: Bodymovin isn't optimal for image sequences. If you must use them, consider replacing with vector or shape-based animations.
• Limit Effects and Expressions: Complex expressions or effects can balloon JSON sizes or cause incompatibility.

3. Adjust Bodymovin Export Settings

• Disable Unused Features: In the Bodymovin panel:
• Uncheck Include in JSON for image assets (if not needed).
• Use the Glyphs option under Text to avoid exporting font files.
• Trim work area to restrict export to the active animation only.
• Use the ‘Demo’ Folder with Caution: The demo includes extra assets – export only the .json if you're embedding elsewhere.

4. Post-Process the JSON File

• Minify the JSON: Remove white space and line breaks using tools like:
• https://jsonminify.com
• Command-line tools like jq with -c option
• Compress with Gzip: Gzip compression of JSON reduces file weight drastically. Ensure your web server (e.g., Netlify or Vercel) serves JSON files with Content-Encoding: gzip.

5. Replace PNG Sequences with Vector Animations (If Possible)

• PNG sequences exported through Bodymovin are not ideal for web performance or size.
• Use shape layers, vector paths, and Lottie-compatible animations instead when feasible.
• Consider switching to three.js or USDZ if using full 3D models with actual depth and lighting effects.

Summary

To reduce the JSON file size: compress PNG sequences, simplify keyframes and layers in After Effects, minify the exported JSON, and enable gzip compression on your site. For better performance, replace raster sequences with shape-based or vector animations whenever possible.