Lottie files are vector-based animations that load in kilobytes rather than megabytes, making them far lighter than GIFs for web use. Getting them to perform well takes a bit of care: stick to vectors, keep layers simple, avoid drop shadows and masks, compress to .Lottie before exporting, and lazy load anything that isn't in the initial viewport. At What IF Web, a Webflow Premium Partner based in Christchurch, New Zealand, we use Lottie animations across client builds and these are the optimisation lessons we keep coming back to.
Ah, Lottie files. Those slick, streamlined wonders of web animation. They're miles ahead of clunky old GIFs, but let's be honest, they're not exactly plug-and-play. If you've ever wanted to throw your computer out the window because Safari choked on your pristine animation, you're not alone.
Today, we're diving into Lottie optimisation. I'll share a few battle-tested tips (read: painful lessons) from working with Jitter, a tool that's saved me more than once. Let's make your animations lean, nimble, and dare I say, brilliant.
Why Lottie? Why Now?
Once upon a time, GIFs ruled web animation. They were familiar, easy, and, let's be real, pretty average. Then came Lottie: vector-based, lightweight (kilobytes, not megabytes), and beautifully smooth. Suddenly, complex animations became web-friendly.
But here's the rub: Lottie files aren't perfect. They're like that mate who's great fun at a party but leaves you to clean up the mess. Browser quirks (hello Safari), bloated files, and rendering glitches mean you've got to work smart.
1️⃣ Stick to Vectors
The rookie error? Dropping in raster images (PNG, JPEG) into your Lottie. Don't do it. Build your graphics in Figma or Illustrator, and keep them vector wherever possible. If you absolutely must use an image, such as a product shot, optimise it with TinyPNG and import it separately rather than baking it into the animation.
2️⃣ Scale for Real Life
Sure, vectors can scale infinitely, but don't overdo it. Design your animation at the actual size it will be displayed, such as 500px or 1000px. There's no need for billboard-sized assets unless you're planning to broadcast it on the moon.
3️⃣ Keep It Lean
Jitter can compress layers, but don't make it work harder than necessary. Keep your layer structure simple and logical. Hot tip: Text is a diva – it's clunky and heavy. Replace text with shapes or static screenshots where possible. Especially for UI demos, importing a compressed image can save hours of hassle.
4️⃣ Ban the Drop Shadows
Drop shadows might look fancy in design tools, but they're a nightmare for Lottie files. They bulk up the file size and render inconsistently across browsers. Just don't.
5️⃣ Plan Ahead
Lottie isn't After Effects. There's no fancy rigging or advanced masking. Avoid masks – they're file-size hogs and a one-way ticket to Safari frustration. Plan your animation with clever layering and opacity instead.
6️⃣ Keep It Short
Long animations are like long meetings. Nobody enjoys them. Keep your animations punchy and loop-friendly. Your users came for content, not an extended showreel.
7️⃣ Compress with DotLottie
When you're ready to export, don't stop at JSON. Convert your animation to a .Lottie file – it's a simple way to slash your file size. Use a compression tool (I'll add the link here) to shrink it down. Trust me, it's worth the extra step.
8️⃣ Lazy Loading is Your Friend
Don't overload your page with heavy animations. Lazy load them so your site stays quick and responsive. And for everyone's sake, avoid a Michael Bay-style explosion of simultaneous animations. Subtlety wins.
Why Lottie? Why Now?
Once upon a time, GIFs ruled web animation. They were familiar, easy, and, let’s be real, pretty average. Then came Lottie: vector-based, lightweight (kilobytes, not megabytes), and beautifully smooth. Suddenly, complex animations became web-friendly.
But here’s the rub: Lottie files aren’t perfect. They’re like that mate who’s great fun at a party but leaves you to clean up the mess. Browser quirks (hello Safari), bloated files, and rendering glitches mean you’ve got to work smart.
1️⃣ Stick to Vectors
The rookie error? Dropping in raster images (PNG, JPEG) into your Lottie. Don’t do it. Build your graphics in Figma or Illustrator, and keep them vector wherever possible. If you absolutely must use an image, such as a product shot, optimise it with TinyPNG and import it separately rather than baking it into the animation.
2️⃣ Scale for Real Life
Sure, vectors can scale infinitely, but don’t overdo it. Design your animation at the actual size it will be displayed, such as 500px or 1000px. There’s no need for billboard-sized assets unless you’re planning to broadcast it on the moon.
3️⃣ Keep It Lean
Jitter can compress layers, but don’t make it work harder than necessary. Keep your layer structure simple and logical. Hot tip: Text is a diva – it’s clunky and heavy. Replace text with shapes or static screenshots where possible. Especially for UI demos, importing a compressed image can save hours of hassle.
4️⃣ Ban the Drop Shadows
Drop shadows might look fancy in design tools, but they’re a nightmare for Lottie files. They bulk up the file size and render inconsistently across browsers. Just don’t.
5️⃣ Plan Ahead
Lottie isn’t After Effects. There’s no fancy rigging or advanced masking. Avoid masks – they’re file-size hogs and a one-way ticket to Safari frustration. Plan your animation with clever layering and opacity instead.
6️⃣ Keep It Short
Long animations are like long meetings. Nobody enjoys them. Keep your animations punchy and loop-friendly. Your users came for content, not an extended showreel.
7️⃣ Compress with DotLottie
When you’re ready to export, don’t stop at JSON. Convert your animation to a .Lottie file – it’s a simple way to slash your file size. Use a compression tool (I’ll add the link here) to shrink it down. Trust me, it’s worth the extra step.
8️⃣ Lazy Loading is Your Friend
Don’t overload your page with heavy animations. Lazy load them so your site stays quick and responsive. And for everyone’s sake, avoid a Michael Bay-style explosion of simultaneous animations. Subtlety wins.
Final Thoughts
Lottie files are a brilliant tool, perfect for micro-interactions, product demos, and those slick details that give a site polish. But they’re not magic. They need thoughtful design, clean vector work, and smart exporting to really shine.
So keep it simple, plan ahead, and for the love of smooth web experiences, skip the Safari-breaking features like masks and drop shadows. Your users – and your future self – will thank you.
Here’s to faster, cleaner, and frustration-free animations.
