20 MB file size limitation?

1

I’m developing a complex animation for a website and rendered a test version that is already 25 MB. Can someone shed light on the 20 MB file size limitation? Even if I can’t test through the Lottie website, is a file size larger than 20 MB going to be possible for display on a website? I can render out a compressed video version as an alternative, but I was hoping to utilize the great vector look. I also considered trying out the dotLottie format to help reduce the size, but running into the 20MB limit there also.
Any insight is greatly appreciated, thanks!

1 Like
2

Hi @bart

The 20MB file limit is something we’ve enforced on the LottieFiles; you should be able to play it your website regardless.

3

Haris, thanks for the follow-up. Yes, I was able to test a file that was slightly larger than 20MB. Is there a concern over performance on a website when a file is larger than 20MB?

4

Hi @bart, there are several points to consider:

File Size: When loading a website, various types of files (such as images, PDFs, videos, and text) are transferred in the background. This adds a few extra milliseconds to the website’s load time. Several factors contribute to this delay, including network speed on both ends, server traffic, server download speed limits, the compatibility of the user’s device with the webpage, and the user’s browser.

Graphics: A video is essentially a sequence of images displayed at a specific frame rate (e.g., 8fps, 12fps, 24fps, 30fps, or 60fps). Each image in a video is rendered on the screen as a set of data bytes with specific resolution (DPI), which can result in substantial data. Therefore, the size of each image matters when rendering it on the screen of a device, and this is where the device’s graphics card comes into play. Larger image sizes result in larger video sizes, which can be time-consuming to load.

SVG/Vector Graphics: SVG files, being vector graphics, have smaller file sizes compared to images. When animations are rendered on a screen using SVG, they are essentially vector-based, which differs from traditional image-based animations.

In conclusion, using SVG animations, such as Lottie, can help reduce web load times and ensure smoother animation playback.