Learning material for professionals eager to explore the science behind building a successful online product

#ASKTHEINDUSTRY 37: Why are GIFs a problem for performance?

Until a while ago, if you opened sites like giphy or imgur you would have experienced all the bad and ugly of the slow and unresponsive web. As it turns out, filling the page with gifs is horrible for performance. But why is that? And why isn’t it the case anymore?

In order to truly understand the reason why animated gifs perform so badly, one should first know a really peculiar aspect of the actual gif format: it was never intended for animating pictures.

The Graphics Interchange Format is not intended as a platform for animation, even though it can be done in a limited way. (The spec)

In origin, gifs were supposed to contain multiple images inside a single file so to be able to have many images to share headers, color data, and so on. During the years, we started to “hack” this peculiar aspect and start using those as frames of an animated image.

In such a scenario, it should not be surprising that there hasn’t been any effort towards optimization for this usage. For example, video formats are usually pretty darn good at compressing frames and sequences of frames. Gifs, instead, weren’t designed for sequences of frames: since no relationship between subsequent frames is expected, there is no way to encode just the incremental changes between the current frame and the previous one.

In addition, there is no standardized way to perform some form of steaming of the content. With videos, instead, you don’t need the whole file to start playing it.

For all of these reasons, gifs aren’t supposed to, nor they are ready for, storing several frames. As a result, a few low quality frames, occupy more than 60MB. This not only represents a network bottleneck but it also scales pretty badly, filling the memory of the device pretty quickly (especially on mobile)

As you might have already figured out, the new (performant) way consists in using HTML 5 videos. Since we can set them to autoplay and loop, they are the perfect solution to this conundrum. And that is exactly what websites with a lot of gifs are doing today.

According to this post, which I highly recommend if you are interested in knowing more, animated GIFs are usually 5 to 10 times larger than a properly encoded MP4 video. Go have a read if you are interested in how to convert gifs into MP4 videos.

If you’ve found this post useful at all, press the ❤ button! I read each and every comment, so be sure to contribute to the conversation with your thoughts!

Care to leave a comment? Drop down a line on the Twitters