Animated GIFs and Your Website’s Performance

As fun and exciting as adding animations to your page is, using GIFs might not be the best route to go down. If you are considering using animated GIFs on your website, you need to be aware of the performance implications of doing so.

What are GIFs?

GIFs or “jiffs,” however you like pronounce them, are an early file format for displaying images on the web. GIF files come in two general forms, static and animated. Static GIFs have fallen out of favor to more modern and better performing JPEG, PNG, and SVG formats. The animated version of the GIF was popular in the 90’s, and decorated many GeoCities pages. They were one of the very few supported ways to include animations on websites in the 90’s and into the 2000’s. That is until Macromedia flash and the SWF format took over animations on the web.

The comeback of GIFs.

GIFs have become associated with low resolution looping animation or video, frequently with low frame rates. Some have a lo-fi meme-worthy aesthetic. Others are can be more cinematic and subtle. The GIF, in a way, has become an art form in itself.

The resurgence of animated GIFs can be linked to the rise of social media. GIFs work great in feeds, they can tell a joke and convey feelings that words can’t capture quickly. They are perfect for the short attention span of users.

On the production side, they are easy to create and widely supported by browsers and devices. The thing is, when you upload a GIF onto Facebook or Twitter, they are converted into a different video file, and what you are seeing is no longer an actual GIF file.

So what? They aren’t GIF files anymore, who cares?

It matters when you are asked by a client or your boss to include animated GIFs on a website. You go about embedding the GIF that you are provided or that you created, only to see that it causes a huge performance hit on the page load speed of the site. Sending a 2MB GIF to a mobile device will not create a good user experience, no matter how cute the cat riding a Roomba is.

What format then?

GIFs should be converted to work with HTML5 Video specification, which means converting the GIF to MP4 and WebM. These are file formats that will drastically decrease the file size of a GIF, allowing it to load much quicker and not slow down the rest of the site.

The next step is to set up the HTML5 video to simulate GIF behavior. In order to do that, you have to set the video properties to autoplay, looped, and muted. GIFs don’t have sound, but just in case you accidentally export an audio track in the video, setting it to muted will allow it to autoplay in the browser.

Now go make some GIFs! (But actually videos that have that GIF aesthetic).