Optimising GIFs for the Web

Like a lot of people, I like GIFs. I like to use them in my articles to illustrate functionality. For example, this GIF from my article on “Recreating the iTunes Library” –

However, a problem with this is that GIFs are heavy, the one above is a whopping 11.4 MB 😱 (NB: not exactly the image above, I couldn’t actually load that on a page). Recently, I’ve found that some of my articles that are GIF-heavy tend to get incredibly slow. The reason for this is that each frame in a GIF is stored as a GIF image, which uses a lossless compression algorithm. This means that, during compression, no information is lost in the image at all, which of course results in a larger file size.

To solve the performance problem of GIFs on the web, there are a couple of things we can do.

Use HTML5 Video

Surprisingly, the lossless compression algorithm used on GIFs is so unoptimised that video formats such as MP4 or WebM will provide a smaller file size than GIF images. Because of this, one solution to the GIF performance problem is to not use GIFs at all, and to replace them with autoplaying, looping, HTML5 Video.

By applying certain attributes to the <video> element, we can simulate the behaviour of a GIF, but with a much smaller file size. The attributes we need are –

autoplay: Immediately start playing the video without the user needing to press “play”

loop: Loop the video infinitely

muted: Although there is no audio track on the GIF, stating this attribute is needed for iOS Safari to autoplay the video

playsinline : For iOS Safari, to make sure that the video is not moved to fullscreen mode

poster: Specifies an image to be displayed while the video is downloadingTo replace the GIF from the introduction to this article, we can use the following video element -This will give us a video that’s much smaller in size, at only 1MB 😱😱!

To convert a GIF to WebM, we can use CloudConvert. Or, if you use Cloudinary, you can just change the file extension from .gif to .webm to get the video format.