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?

You're working with JSON files exported through Bodymovin, likely containing Lottie animations that recreate 3D-like effects by displaying sequences of PNG images. These JSONs can become large because they embed or reference high-resolution image sequences. Here’s how to reduce the file size effectively:

1. Compress PNG Image Sequence

• Before exporting from After Effects via Bodymovin, optimize your PNGs to reduce their file size.
• Use tools like ImageOptim, TinyPNG, or Squoosh for lossless or visually-lossless compression.
• Consider resizing images to the smallest dimensions that still look good at the intended resolution.

2. Use Fewer Frames in the Sequence

• Reduce the number of images in your sequence by lowering the frame rate (e.g., from 30fps to 15fps) if the animation remains visually acceptable.
• Trim unnecessary frames at the start/end that may not contribute to the motion.

3. Reduce Color Depth

• PNGs can be 8-bit or 24-bit. If your images don’t require millions of colors or transparency, consider converting to indexed color PNG-8 format, which is smaller.
• Use tools like Photoshop or ImageMagick for batch conversion.

4. Externalize Image Files (Instead of Embedding)

• In Bodymovin export settings, uncheck “Include assets in JSON” to avoid image data being base64-encoded inside the JSON.
• This reduces JSON size drastically and loads images as external resources, leveraging browser caching and lazy loading.

5. Minify the JSON File

• Run the exported JSON through a JSON minifier to remove whitespace and reduce size.
• Examples include using an online tool like JSON Minify or command-line tools like jq or uglify.

6. Switch to Compressed Image Formats for External Files

• Replace PNGs with WebP or AVIF formats to save bandwidth—Webflow and modern browsers support both.

• Update the file paths in your JSON (you may need to edit it manually or through a script).

  ⚠️ Note: Lottie does not natively support WebP inside the JSON via Bodymovin, but externally hosted images in those formats can work with custom renderers.

7. Use Vector-Based Animations Where Possible

• If the 3D effect can be approximated using shape layers, paths, or gradients, convert the animation to vector elements.
• Vector-based animations are more compact and scale better across devices.

Summary

To reduce the file size of JSON files exported via Bodymovin for 3D image sequence animations: compress PNGs, lower frame rate, externalize image assets, minify JSON, and switch to modern image formats like WebP. Where possible, prefer vector animations to avoid embedding raster frames entirely.