How to replace GIF with HTML5 video?

A simple guide to replacing GIFs on your website with HTML5 video. Everything you need to know from tools and commands to markup.
Published 2023-03-26 • 4 min read
How to replace GIF with HTML5 video?

In this guide, we’ll address the steps you need to take to replace a GIF on your website with an HTML5 video. We are going to assume you know the basics of the command line, HTML and CSS.

 

Step 0: Why switch from GIF to HTML5?

GIF is an antiquated graphics format that was created in the 80s. One of its usages was to animate sequences of bitmaps. In this scenario GIF was a huge success and especially in the early internet days it was “the way” to use short animations on websites. The biggest downside of the GIF format is that for more colorful and longer animations file size can become a problem. For sure you’ve received a 20MB GIF, which should be a 1MB video.

Modern video formats offer much better compression and smaller sizes, and thanks to HTML5 video they can work exactly like GIFs on a website. Meanwhile, the user experience will be much better, as animations would load faster. So that’s why you should not use GIFs on a website anymore.

 

Step 1: Converting GIF to MP4 and WebM.

You can skip this part if you already have them converted. Of course, you can use online tools, nothing wrong with that. I like to automate stuff like this, so I favor command-line tools.

Two formats of choice are H264 MP4 and WebM. WebM offers supreme compression, with no obvious quality decrease, especially in web applications. Unfortunately, some browsers don’t support it (IE11 - I’m looking at you). If you are concerned only with modern browsers just use WebM. If you like to have backward compatibility then make sure you have WebM and MP4.

We are using a terminal and tool called FFmpeg. It’s a powerful video and audio transcoder. To install it use one of the following:

apt install ffmpeg
yum install ffmpeg
brew install ffmpeg

To create MP4 use the following command:

ffmpeg -i input.gif -movflags faststart -vf format=yuv420p output.mp4

You can read a more detailed description of this process in a separate article on GIF to MP4 conversion.

To create WebM use the following command:

ffmpeg -i input.gif -c vp9 -b:v 0 -crf 40 output.webm

Again you can read more on the command and its params in a separate article on GIF to WebM conversion.

Don’t forget to put your new videos on a server.

 

Step 2: HTML5 video markup.

Our goal here is to replace the good old image tag that points to the GIF with HTML5 video. The tricky part is that we need it to behave just like a GIF image.

<video autoplay loop muted playsinline>
  <source src="output.mp4" type="video/mp4">
  <source src="output.webm" type="video/webm">
  Your browser doesn't support HTML5 video.
</video>

Inside the video tag, you can specify multiple sources, the browser will choose a format. That’s why we provide sources for both WebM and MP4.

 

Each option in the video tag is important.

  • autoplay will start a video immediately
  • loop will loop it… duh!
  • muted ensures that autoplay can be started, otherwise there are additional conditions for autoplay
  • playsinline ensures that playback will play in the video element itself, not in fullscreen. 

 

Step 3: Optional styling with CSS

It really depends on your needs, but basic styling for the video can look like this:

video {
  width: 100%;
  height: auto;
  display: block;
}

It’ll make sure that video uses all horizontal space available and preserve the aspect ratio. Additionally, video, by default, is displayed as inline, so changing it to display makes it easier to position correctly. Of course, you can style it as you please and it’s not mandatory.

 

Simple, isn’t it? In only 3 steps you’ve successfully replaced a GIF with an HTML5 video on your website. In the process, your website became more user-friendly, as now it will load less data. There is one more benefit - thanks to this we are closer to putting the GIF format to well-earned rest. It had its time, but it’s not suitable for the modern web.

#cli