June 7, 2024
How We Make Lotties 10x Smaller
Until recently, Lottielab's job as a Lottie editor would mostly be done by the time a finished animation ends up on a website. We would give you a few ways to export your animation, and that's it. The downloaded file would then in most cases have to be hosted somehow, which we left firmly to you, the user, to figure out.
This workflow is manageable in most cases, but it's definitely not ideal. The Lottie file sizes can get quite large, and we have seen a lot of frustration when managing the different versions of Lottie files across a wide range of web hosting/building platforms.
That's one technical and one user experience problem, and to us at Lottielab, there's nothing more motivating than when the two intersect. This is why last week we released Livelink, an easy and simple way to host your Lotties. With it, we hope to make a dent in both of those problems.
How?
By making it as easy to use and think about as possible. You create your animation in Lottielab, you click a button when done, you get a link. Use this link in any Lottie player across a variety of platforms, and your animation plays. Simple. Or, just take the embed link and embed the animation almost anywhere ― not even a player is required.
By making it, well, live. Make some changes directly in Lottielab, click a button to publish them, and the animation is instantly updated in all places where you used the link. This helps with quick prototyping, and eliminates the hassle of reuploading new versions.
By making it fast and efficient. We apply state-of-the-art optimisation and compression of your Lottie, relying on Web technologies to serve it in the most efficient way possible. Due to this, Livelink achieves a 20-70% smaller total size than the alternatives, with 90%-99% (10x-100x) smaller file sizes than the normal, uncompressed Lottie JSON that you can get out of Lottielab today.
Behind the scenes, to achieve all those three at the same time, we built a globally distributed platform for hosting Lotties on top of CloudFlare's global edge network and cache, using tech such as Workers and R2. This platform acts as a CDN specialized for Lottie files―it takes care of compression, optimization, storage, caching and efficient serving of Lottie files and their associated data (such as images).
Let's talk about the nitty-gritty.
How to make a JSON small?
A Lottie, in its purest form, is a chunk of JSON with highly abbreviated fields that describes a vector animation. Similarly to, for example, SVG, it is a powerful but text-based, human-readable, and easy to understand format.
This is part of what's so enticing about Lottie ― the format's openness and relative intuitiveness means that you can today work with Lottie files using a variety of tools built by many different people during the years. It's mature, with multiple player libraries across a variety of platforms, relatively stable and has a wide core set of features supported across all major players.
A downside is that, like SVGs, a Lottie file's size can become quite large, especially when it includes embedded images. It's not that there is more data inside―but the JSON format itself is not optimized for space above everything else.
Fortunately, owing to programmers' eternal obsession with efficiency, this is mostly a solved problem. Applying a general-purpose compression on a JSON will make a huge dent in its file size. Applied on a Lottie JSON, it will efficiently encode all those repeated properties, keyframes, as well as braces, brackets, quotes and other repetitive characters.
So, let's compress some Lotties.
Optimized Brötlis and photos
Today ubiquitous, the Brotli compression algorithm was first released in 2013 and gained support in almost every major browser by 2016. If you try it on a few Lottie JSONs, you'll notice that a strong Brotli compression yields file sizes that can be as much as 2x-4x smaller than, for example, an equivalent .zip (which is used as the basis of the dotLottie format).
Web technology, HTTP in particular, allows us to let the browser transparently handle decompression for us, so that Live Link can behave as a totally ordinary link to Lottie JSON file, no custom formats, while still reaping the benefits of a best-in-class compression method.
If we didn't have the browser's efficient, native decompression, we'd have to resort to manually decompressing the file using JavaScript. This approach would bloat our player size (since it would have to include a decompression library), and can be quite performance-heavy, especially for large files where speed is most important. This can manifest as stuttering as the animation loads, for example. In contrast, the browser-provided decompression leveraged by Livelink is fast, built-in, asynchronous, non-blocking, and provides superior compression ratios.
So, Brotli compression is a good start, and there's practically no downside to it. What else?
To make Livelinks even smaller, we built a new Lottie optimizer, designed from the ground up for Lottielab. The optimizations that we perform are invisible when the Lottie is played, but they shrink the original file down another 2-3x.
Finally, since we are already using Web technology, we can easily extract images out of the main Lottie and host them separately. This also gives us an opportunity to optimize them to further reduce their size, which the Lottielab CDN will dilligently do.
Finally, the CloudFlare global network that we utilize allows us to deliver all of these resources through a lightweight, binary and multiplexed HTTP/2 connection. It also gives us access to advanced caching on the edge, meaning that most Livelink requests will be served from the nearest CloudFlare datacenter in tens of milliseconds.
For your live iteration or your long-term hosting
You can use your Livelink in your Framer Lottie component, on Webflow, in the Lottie widget for Elementor; you can embed it on Wordpress or anywhere else by copying some HTML, or you can use it from React. In the new Code Export tab of the export panel, Lottielab will walk you through displaying your lottie wherever you want it.
Once created, the link stays the same, but its contents don't have to. You can update it with a new version of the file whenever you choose to, or revert it to an old version with a single click.
In the background, we ensure that the Lottie is cached throughout hundreds of PoPs (points-of-presence) by using CloudFlare's edge cache, but at the same time protected from staleness issues. Therefore, on next refresh, you should always see your update. This enables an easy iterative process for previewing Lotties in-context.
Wherever you choose to include a Live Link, you'll benefit from the best compression and optimization possible, out of the box.
...and the smallest Lottie player in existence
In parallel with Livelink, we've also released releasing v1.0 of our Lottie player, a Lottielab-optimized packaging of lottie-web, the official player library.
The easiest way to get started with it is also the best for your page weight: just use the hosted version from the very same Lottielab CDN. We make super sure that it's delivered in an efficient way ― less than 50KB compressed and minified!
Playing a Lottie is now as easy as embedding an image:
This player is a Web and React component, also available via npm and common JavaScript CDNs like unpkg, for example. To our knowledge, it's the most lightweight player library that fully supports Lottielab-exported Lotties. Read more about it here.
In conclusion
The Web owes its popularity to the easy to understand, human-readable formats it was based on. Browser vendors and developers have had decades to perfect the delivery of web content to users. As such, there's no surprise that we already have all we need to host Lottie, another open and human-friendly format, on the very same Web in an extremely lightweight way.
Livelink looks and behaves like any other link to a Lottie JSON. Like any other web content, and staying true to the Lottie format's roots, it is interoperable and easy to read, write, or manipulate. At the same time, it's optimized and compressed heavily under the hood, relying on the Web's foundational, mature, and ubiquitous tech.
We believe that its ease of use, coupled with the 10x size reduction it can offer, will make the logistics and bloat questions of Lottie hosting non-existent, leaving motion designers to do what they do best: dazzle. We hope the Lottielab editor experience makes that easier.