Replacing Animated GIFs with HTML5 Video for Faster Page Speed

Animated GIFs, more than any other digital file format, have captured the hearts and minds of online users. But man, they’re so damn hard to optimize!
I once spent an hour trying to tweak the quality, frame rate, and length of a GIF, ultimately giving up because I couldn’t get the file below 2 MB without the GIF looking like a hot mess.

It’s no wonder services like Giphy don’t even use the GIF file format themselves. Instead, they use HTML5 videos that are often as much as 90% smaller in size. (And in my case, as you’ll see below, 94% smaller in size.)

It might seem like a cop-out to use video in place of GIF on a website that promotes all things GIF, but when you compare a cat GIF that’s 7 MB in size to the exact same animation in video format that’s only 147 KB, well…

gifIn this post, I’ll show you just how easy it is to convert GIFs to HTML5 video and achieve incredibly small file sizes for your site.

How GIFs Became Pseudo Videos in the First Place

The GIF file format was never intended to be used for animation or video. In fact, it says so right there, in black and white, in the GIF89a specification published in 1990:

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

So how did we end up here, in this online world, where GIFs are the go-to format for animations?

GIFs were actually designed to hold multiple images in a single file, kind of like a ZIP file for images. And that’s how they were used until Netscape 2.0 came along in 1995 and introduced the looping extension that set GIF animations free, bringing them to life.

Back in those days, the internet was under construction, and so was the GIF. There were dancing babies and dancing hamsters. GIFs were harmless fun because they were simple animations, often with few colors and frames, limiting their file size.

Fast forward to today—30 years after GIFs were invented—and they’ve have become an art form unto themselves. Reddit, Twitter and Tumblr helped popularized GIFs, making it easy for anyone to quickly share an animated GIF. And services like Giphy and Imgur have made it easier than ever to quickly find a GIF and share a reaction.

Reaction GIFs are now a form of expression. If you’re like me, you’ve probably replied to a comment on Slack using a GIF rather than words because often a GIF can convey a feeling—or help carry an inside joke—more so than words.

wiggle gif

Besides being fun to use, GIFs have several benefits:

  • Universally supported by browsers
  • Universally understood. Everyone knows what GIF is
  • Easy-to-use and widely available tools for creating them
  • No patent or licensing concerns that apply to common video codecs
  • Easy to insert in sites using img
  • Easy to share on social platforms

GIF != Video

GIFs in 2018 are no longer just a collection of simple images, as they were back in 1995. Often, animated GIFs are clips ripped from TV and movies—basically, video saved in the wrong format.

Unlike actual, video formats, GIFs don’t use any kind of video encoding or compression techniques. So a GIF that’s only a few seconds long can quickly blow out to several megabytes in size, depending on the frame rate and quality.

On top of that GIFs lack the quality of video and have color limitations and slower frame rates.

But the biggest problem of all with GIFs is their file size. While JPEG and PNG files can be easily compressed, GIF animations are a nightmare to optimize because the more you compress them, the worse they look, making them less than ideal for use on modern websites.

The Case for Using HTML5 Video Instead of GIF

Before HTML5, videos could only be played in browsers using plug-ins, like Flash. HTML5 turned video on its head, providing a standard way to show video on the web using the <video> tag.

While video can take more time to encode, HTML5 does offer a number of advantages compared to GIF:

  • Easy to insert videos in sites using <video>
  • Small file size
  • Better performance
  • More colors and detail

There are three supported HTML5 video formats: MP4, WebM, and Ogg. Of these three formats, MP4 is the most widely, with 94% of browsers using this video compression format.

mpeg4 video compression
WebM, a video and audio format that Google has developed as a royalty-free codec, isn’t far behind on 79% (see below). However, Apple doesn’t support WebM and is unlikely to do so any time soon.

webm video format
Lastly, OGG is supported on 78% of browsers. But it, too, isn’t available on Apple browsers.
ogg vorbis audio format

HTML5 vs GIF

So how does the quality of HTML5 video compare to GIF? As we’ve explored so far, video formats are actually designed for video. So, obviously, they’re going to handle moving images—i.e. video and animation—a heck of a lot better than GIF.

Check out this example of an animated GIF from Game of Thrones:

It comes in as a whopping 2 MB in size. It’s huge for an animation that’s barely 3 seconds in length.

Now, here’s an MP4 video that I’ve converted from the above GIF file:

Converting Animated GIFs to HTML5 Video

There are lots of ways you can convert GIF to video, including free online tools like ezgif.com, but in this tutorial, I want to show you how to use FFmpeg. This free open source command line tool handles video, audio, and other multimedia files and streams, and can also be used to convert animated GIFs into video formats, including MP4, WebM and OGG.

If you already have FFmpeg installed, simply fire up the Terminal and run the ffmpeg command. It’s it’s installed, you’ll see some diagnostic information. If it’s not installed and you see an error message, you’ll need to install it:

Once installed, find a GIF you’d like to convert into video. For this example, I’m going to convert a GIF into MP4, since MP4 is the most widely supported video format.

Open a Terminal window, change to the directory containing your GIF, and enter the following command:

ffmpeg -i input.gif output.mp4

This is the most basic syntax for converting a GIF to MP4. The -i specifies the input (in this case, input.gif) and the output file is named afterward (in this case, output.mp4).

If you’re following along with this guide, when you enter this command you should see a new file, output.mp4, magically appear in your directory.

FFmpeg comes with a ton of options, which you can use to finetune the video output. One such option is employing an encoding mode called Constant Rate Factor (CRF) when video quality is a high priority:

ffmpeg -i input.gif -b:v 0 -crf 25 output.mp4

This command uses the -b:v flag, which would normally limit the output bitrate, but when used with CRF mode it must be set to 0. The -crf accepts a value between 0 and 51; the lower the value, the higher the quality and the larger file size.

Using this command, I ran the Game of Thrones GIF through a third time and it output an MP4 file 111 KB in size with no noticeable drop in quality. That’s a 94% reduction in size, or 6% of the original file size.

Another option worth experimenting with is movflags, which optimizes the structures of the MP4 file. Usually, MP4 files have all the metadata stored at the end of the file and using -movflags faststart you can move it to the start for faster loading:

ffmpeg -i input.gif -movflags faststart output.mp4

There are loads more options for optimizing video output. Check out the FFmpeg formats documentation for more details.

Replacing GIFs with HTML5 Video

Inserting a GIF into a webpage is super easy—all you have to do is upload it as you would any image file. Fortunately, using the <video> tag is also straightforward. You just need to keep three things in mind:

  1. GIFs play automatically
  2. GIFs loop continuously
  3. GIFs don’t have sound

When you’re adding a GIF to your site, you don’t have to worry about these traits because. GIFs just… work. But when you’re adding a video to your site that you want to behave like a GIF, you need to account for these behaviors.

In order to add a GIF to your site you would use HTML markup similar to this:

< img src="cat.gif" alt="" width="400" height="300" />

To insert a video, you would replace the above with this:

< video autoplay loop muted playsinline >
< source src="cat.mp4" type="video/mp4" >
</video>

You’ll notice a few attributes: autoplay tells the video to automatically plays, while loop ensures the videos loops continuously. The muted attribute turns off any sound but must also be present for videos to autoplay, even if they don’t have audio. On iOS devices, playsinline is also required for autoplay to work.

Conclusion

GIFs are super easy to add to any web page—just upload and treat them like any other image. But they’re a terrible format for displaying animation and video, and are typically huge in size. When you’re trying to optimize your site and improve its performance, GIFs will only drag down your page speed.

HTML5 video provides a streamlined way to add GIF-like animations to your site without the bloat. Using the snippets above, you can convert GIFs to MP4 and output files that are just 6% of the original! And with no noticeable loss in quality.

About

Raelene Morey is the Co-Founder of Words By Birds, a digital writing agency that helps busy WordPress with writing articles, content strategies, lead magnets and other word-related things. A former journalist and editor, Raelene has been developing WordPress sites for over 10 years.

0 comments

Comment

Leave a Reply

Your email address will not be published. Required fields are indicated by *