Lottie vs GIFs

GIFs are ubiquitous online. Meme culture and social media support means that you can find them everywhere. The issue with GIFs is that the format itself is dated and relies on old fashioned compression techniques to get file sizes down. None of this is an issue for social media interactions, but it may not be optimal for web graphics. Lottie files solve many of these issues

Lottie is a library that allows apps to natively use Adobe After Effects animations in real time. By exporting .json files from AE using the Bodymovin extension, animations on the web can now be smoother, more manageable and without the need to download heavy animation files.

Here you can see more examples of our Lottie animations, While below are some of the great benefits of using the Lottie technology and how it solves the issues that the GIF format can cause your visuals.

Colour Quality

Lottie File:

Animated GIF:

When it comes to true representation of the colour of your graphics, Lottie files suffer no loss in quality from compression. GIF files often use archaic means of compression (like dithering) to reduce the number of colours required to reproduce your graphics. The above highlights the sort of artefacts in a smooth image this can throw up.

Alpha Channels

Lottie File:

Animated GIF:

You can see that when layered upon a background colour, the GIF has a a slight grainy edge to it. This is due to it only supporting a binary alpha channel. GIF pixels are either see-through or opaque. The result is that they often have a scruffy edge to them. This can be particularly pronounced when placed over photos on apps like Instagram.