How to Put Images in JSONs
January 22, 2021
Today we're taking a look at how Bodymovin embeds images and how we can use it to our advantage and get the smallest file sizes around town. We'll start by looking at what images look like in JSON code, how to optimize our files using ImageOptim if you haven't shrunk your files down yet, and lastly, we'll end on exporting from After Effects using Bodymovin.
Images, otherwise known as “assets” in the Bodymovin settings, includes any item imported into your After Effects file that isn’t created within After Effects. JPGs and PNGs are two file types supported by Bodymovin, but there are also a host of other file types that aren’t supported, such as SVGs, TIFs, MOVs, MP4s, and GIFs.
Through embedding images with Bodymovin, the pixels and colors within our JPG and PNG files are broken down into strings of code that essentially translates into hex codes. Albeit… not hex codes.
According to stackoverflow’s article on JSON images, JSON utilizes not hex codes, nor binary, but instead a string of 64 characters that whittle binary elements down into one symbol called base64. This is why our JSON files from Bodymovin wind up looking a little something like this:
Why is this important to know, anyway? If we’re looking at how painfully long our JSON code is, it can start to look a little something like Cinderella’s laundry list of chores. Essentially, the more colors our images implement, the more Bodymovin has to tack on to our final file. The higher the resolution, the larger the file.
The easy solution to keeping our files small is optimizing our photos. This is because, when we’re exporting, we can embed the same exact source file our asset comes from, therefore maintaining the same exact source file size. If we’re working with a 93kb PNG, our JSON will roughly amount to 96kb in size, give or take a kilobyte.
So now that we know the basics of how Bodymovin embeds our photos, we can get to optimizing our photos. In our video, we used ImageOptim, a free program that optimizes our photos for us. But, if you want more control over the file sizes, we can open up our image assets in Photoshop.
In Photoshop, we’ll open up “Image > Image size…” and take a look at our settings. An incredibly strict file size will insist that we scale our image down to the dimensions we want our asset to be inside of After Effects. (i.e. in our video, our logo is approximately 700px across. Here in Photoshop, we would scale our image down to 700px exactly). Make sure your image resolution is set to 72, which is ideal for digital production.
