Comparing Animations Used For Web
Working at Square when we export animations for web, our team’s goal is to find the balance between the lowest file size, the highest quality, and the most flexibility. All so the user has the best experience on our website. I ran a case study to see which would be the best result. The website header animation was made at 3360px (wide) x 450px (height).
Link to where this animation header lives..
Lottie - advanced technique using only images (JSON editing)
File Size: 123kb
Three files were used: JSON, PNG top layer, and JPG background.
Using a PNG as a top layer (the text) to expose the background gradient.
The top layer can be easily changed. The Jpg is being moved by Lottie, faking the animation.
Downside: Won’t be alpha like the Lottie export. The top PNG layer has to be set as a color. So if you were to change the website’s background color you would have to replace it.
Upside: extremely small file size. If you wanted to change the text or visual to something else that can be done easily without ever needing the AfterEffects file.
Lottie - advanced technique (JSON editing)
File Size: 226kb
Made of two assets: JSON and Gradient JPG
In this version, the gradient shrank down to 89kb by using a JPG instead of using Lottie/browser to draw the gradient.
JPEG is chosen over png because, JPEG handles gradients better, is smaller, and can be compressed. PNGs get enormous when they have tons of colors and can’t be compressed without heavy banding.
MP4
File Size: 853kb
One file
MP4s can be useful at times but in others not so much.
Best case scenario: 3D object animation.
Downside: Big file. Also if this animation was on anything but pure white, it is nearly impossible to color match the background color due to compression. We’ve stress-tested many ways to export without any success to overcome this.
GIF (uncompressed)
File Size: 2.6MB
(you may have to wait for a minute for it to load)
One File
Not so good quality HUGE file size. Edges are not as sharp/crisp as the other exports.
GIFs are really good for simple quick animations with not a lot going on in them.
GIF (Compressed)
File Size: 965KB
One file
Yes, it’s smaller in size than the uncompressed GIF but the quality goes down when compressing GIFs. The colors get grainy, looks like you are watching it on a VCR.
That’s the thing with GIFs we want them small as possible BUT that comes at a price. Smaller the size the lower of quality. This is something we never want to do.
GIF is on a black background to show how the edges aren’t sharp. (click to enlarge GIF)