If you’ve ever worked with animated graphics on a webpage, you might be familiar with the difficulties of GIFs, MP4s, and PNG sequences. The file sizes are thicc as heck, pixelated, and a pain in the (pardon our French) ass to compress in a way that doesn’t make it look like your animation just spent one too many years in the sunlight.

The file sizes are thicc as heck, pixelated, and a pain in the (pardon our French) ass 

JSONs are an easy solution to those problems, but it comes with a few caveats that we’ve found our way around and wrangled on more than one occasion. You could say, at this point, we’re experts at making JSON animations with Adobe After Effects and our lovely friend Lottie, an online service that helps users preview their special little snowflake animations.

But what is JSON anyway?

JSON is a file that, when you open it off of your computer, looks like a chonky string of numbers — and that’s because it is! JSON is short for JavaScript Object Notation and whether you pronounce it Jace-On or Jason, you’re still valid (We only just discovered the “Jason” pronunciation via this Wired article). And while we won’t get into the dense materials of what JavaScript Object Notation is, you might recognize one word — JavaScript — because JSON is part of that dynamic scripting language and is easily converted into most programming languages. 

But all of those numbers, letters, and doo-dads are, essentially, your animation coded object-by-object, frame-by-frame. Notice how we didn’t include pixel-by-pixel, and this is because, if your animation is made appropriately, the exporter won’t have to bother with this unless images are embedded. By converting your animation into code, you get crisp vector images as a result, and the animation is treated as a thread in your webpage’s fabric. 

Why should we care about that malarkey?

That’s all well and good, but why not use GIFs instead? If we’re using the fabric analogy, unlike JSONs, GIFs, PNG sequences, and MP4s are a pin on your webpage’s fabric. They weigh down your fabric and, if they’re thicc enough, they might slow down loading speeds or stop your webpage from ever loading at all. JSONs are integrated into your page, not tacked on. To read more about the difference between JSONs and GIFs, read this article here.

If that doesn’t have your developer drooling, I don’t know what will.

GIFs, PNG sequences, and MP4s are dense because they appear pixel-by-pixel, frame-by-frame. Every unique color adds to the size of your file until you’re trying to slap a 15MB file onto your page and wondering why the site won’t load. Even a 900KB GIF can be reduced to a single-digit kilobyte with a JSON, and if that doesn’t have your developer drooling, I don’t know what will.