Small Animation: Why is Lottie Small?

03/03/2022
blog

Lottie is a fast-growing animation file format. It is JSON-based and is known for its small size, making its transfer and usage across different platforms very easy. The file space taken by Lottie is several times smaller than the commonly used formats like animated GIF or MP4, and at the same time, maintains a better quality than other small file formats. Another ability of Lottie animations is that they can be turned into interactive animations. For instance, some animations play when a user hovers a mouse over it or starts playing as the user scrolls through the page. These animations are much more engaging and make the viewers’ website experience more fun.

A big question that arises about Lottie files is: What makes them a small animation format? You might have wondered how they carry so many capabilities yet stay 60x smaller than an animated GIF. Before answering your question, let’s see how you can use Lottie:

Lottie is Small: Why Should You Care?

Lottie files have several uses that can fulfil the needs of users and animators. Some of these are as follows:

Create

The AE plugin of Lottie allows you to create your animations. You can create, render, and test Lottie animations in Adobe After Effects. Afterwards, you can export it to any place you like and use it for your required purpose. The plugin allows you to export your work in any format at any place.

Click on the animation for more options

Preview

Another great use of Lottie files is that you can preview them anywhere on any device, such as Android, iOS, Windows, etc. All you have to do is open the Lottie web and drop the Lottie file you have in your storage to open and preview it in real-time. Lottie file is very simple to preview and would not need any single alphabet or line of coding to open.

Edit

Lottie file format allows easy editing of your animations. You just need to open the online editor provided by Lottie on any device and import your files to it. After you have imported the files, you can then edit your content using tools provided in the Lottie editor. Then, you can export your edited files to any place and any device again. Lottie allows customization of your animations with great ease without requiring any professional-level skills.

Select through free files

Along with editing tools and the ability to view them anywhere, Lottie also provides a collection of many templates and animations, which are available online for free. Users can access these collections through any device. Moreover, they allow non-expert users to give a professional touch to their animations. Creators can also edit these animations and can download them in different formats, including Lottie, MP4, JSON, and GIF, allowing their use for multiple purposes. This animation library is the largest of its kind. It is updated daily due to the continuous addition of various animations by featured designers and animators.

Why is Lottie small?

Lottie files are small animation files, making them an excellent choice for animators and creators. We can understand the small size of Lottie files by comparing them with file formats, for instance, animated GIF, MOV and MP4.

Bitmaps and Vectors

Commonly used animation formats

Instead of being made up of pixels like the other types of file formats, including GIF, Lottie files are vector-based. This means that they consist of scalable shapes and vectors, and their size will change along with the scaling factor.

The commonly used animation file format consists of bitmaps. It means that they have grids, which carry a specific number of pixels, measured by pixels per inch (PPI). A bitmap resolution consists of fixed graphics, which tells how the colours should appear and the image should form.

Lottie animations

Lottie files, on the other hand, use Quadratic Bezier Curves (splines) to define elements, shapes and paths in 2-D space.

Suppose there are two points, P0 and P1 joined together through a line segment L1. Any point on this line segment has a t-value that represents the position of the point on the line. A t-value of 1 means that point is at P1 and a t-value of 0 means that point is at 0, anything in-between means the point is between P0 and P1. If we connect another point with P1, to generate another line segment L2, it will also have a point that moves on it according to its t-value. Joining these two points together creates a line segment L3. Now placing a point on L3 creates a very specific path for the point. This path is known as a Quadratic Bezier Curve. Similarly, Cubic Beziers requires 3 starting line segments.

Using these Bezier Curves, Lottie animations achieve all sorts of shapes and paths. Hence, an animation path in Lottie files includes a starting and ending point, two tangents (in-tangent and out-tangent of Bezier) and the frames they fall on.

Suppose in-tangent falls on the 1st frame and the out-tangent falls on the 120th frame, then increasing the duration above 120 frames will have no effect on the size of the Lottie animation.

Furthermore, the scaling, rotation and other functions in Lottie have vector or matrix form, making them extremely small animation format.

Lottie files use keyframes to define animation in time. One can think of them as a computer program, having lines or text of code, that describe animation in both time and space.

Resolution Independent

Lottie may be a small animation file format, however, its small size does not interfere with the quality of animations. With the advancement in technology, the resolution and graphics of animations have become better and better. The viewers admire animations with great resolution, and the quality of animation has a great impact on the viewer. The resolution of any animation is the number of pixels in each direction. The greater the number of pixels in a specific area, the greater will be the resolution of animation, graphics, or display. Usually, file size is also dependent on the number of pixels, meaning that small-sized files have a poor resolution compared to larger ones.

On the other hand, Lottie is independent of resolution, which means that their size does not depend upon the pixels of the animations. Every time a page is zoomed in or out, the mathematical calculations in Lottie recreate the image according to this new resolution.

Advantages of Small Lottie Files

There are several useful advantages of using Lottie files. These are:

Scalable

Lottie animations are scalable, which means that you can change their size without changing the number of pixels or resolution of the animation. Lottie files are small in size, but when opened on any device, their size can be changed according to the user’s needs, and it does not affect the quality.

Prevent sabotage of download speed

In today’s world, where everyone is busy and time is money, the small size of the file increases efficiency. Time taken by a file to download online depends upon the size of the file divided by the speed of the internet. Greater file size means greater time and data required to upload or download that file. The small-sized Lottie files prevent the user from this headache. They prevent the sabotage of download speed as they take a few moments to download, thus saving time and energy.

Easy to transfer

Large-sized files sabotage internet speed through their large downloading size, and such files also take a lot of time to upload and transfer from one place to another. Some web platforms or apps do not even allow the transfer of larger files, generating difficulty for the users. The Lottie files are small-sized, which means that they can be downloaded, uploaded, or transferred with great ease and in a short time without raising much trouble.

Saves space

Increased use of technology has created a mind-boggling amount of data in the past few years, raising concerns about its sustainable storage. According to an estimation, there were 59ZB data in 2020, which is expected to grow into 175ZB in 2025. In such a situation, the focus has been shifted towards finding data formats that store the maximum amount of data in minimum space. Lottie files can act as a solution to this problem due to their small size and their ability to compress data without compromising the quality of animations.

User friendly

One of the main reasons for small-sized Lottie files is to ensure consumer convenience. The small size of Lottie makes it user-friendly. It also expands the categories of the audience that can use it as a user can use, upload and transfer such files through a wide range of platforms and devices. The small size of Lottie files makes Lottie user-friendly. Furthermore, it enables the use of Lottie in areas with minimum internet speed or on devices with minimum space left.

Multi-platform use

We can use Lottie on multiple platforms due to its small size. Different web platforms and apps allow the transfer of files of different sizes. Lottie files have a size smaller than that of GIF. Sometimes, these files can have a small size like that of 50kb. Such a small size of Lottie files allow it to be transferred through various platforms that allow very little file size transfer, for example, chat apps. The small size of Lottie files also makes it perfect for web platforms like WordPress, which helps the users create an impact with the animations.

Multi-device use

The small size of Lottie allows its use on multiple devices, including smartwatches, Android, Windows, and iOS. In this way, Lottie files are accessible at any place and at any time.

Small animation file format: Lottie!

Lottie files are a great format for animations mainly due to their small size, interactive nature, and amazing quality. It is small due to several reasons, including its attempt to be user-friendly, save space, and prevent the sabotage of internet speed. The small size of Lottie makes it efficient easy to transfer. Despite the small size of these files, they have amazing resolution and are scalable according to users’ requirements. The small size of Lottie is one of its characteristics that allow its worldwide use on multiple platforms and devices.

Check out Vidalgo for more information about Lottie files and vector-based animation!

Other Posts

blog
Best Lottie Players, Plugins and Tools
30/04/2022
Lottie has revolutionized the world of animation. To give a very basic definition, Lottie is a file format specific for animations, much like GIF. Due to Lottie animations, users can now display high-quality animations without any problems, such as pixelation, large file size, or slow webpage loading speeds. A single Lottie file is many times […]
blog
Infographics Trends and Animated Infographics in 2022
23/04/2022
With the rise of social media usage, visual content is becoming more and more popular than mere texts. From informational videos to sending memes to your friends and family, visual content is what people love nowadays. A popular type of visual content is infographics- packed with information, made to be attractive to the audience. Want […]
blog
7 Best Lottie Marketplaces To Help With Your Projects
16/04/2022
The Internet has brought the world closer, and sharing information has become extremely easy in this day and age. Today, there are numerous methods that let you share information, from videos to text and infographics to images. One such method is the use of animations which gives lets you provide information in a highly expressive […]