Serve Videos Instead of GIFs

The Graphics Interchange Format (GIF) is over 30 years old but is a pervasive part of internet culture. We use GIFs to serve short, silent, and looping videos, which frequently become memes. Entire services exist to create and share them, and many smartphone keyboards have built-in GIF support.

It’s also easy to embed them into websites with simple image tags. Yet GIFs have a significant drawback: massive file sizes. A single GIF can be larger than a typical website (over 2 MB).

GIFs

I don’t care what anything was designed to do. I care about what it can do.

— Gene Kranz in Apollo 13

GIFs were never designed to serve full videos. Almost to the contrary, Steve Wilhite designed the format to solve the problem of efficiently serving simple images, like weather maps and other graphics.

Each image in a GIF is limited to a color pallete of 256 colors. Images are also losslessly compressed using LZW. These factors made GIF a good choice for graphics rather than images like photographs, which have much more detail and are better suited for a format like JPEG.

GIF also allowed for storing more than one image in a file. This fact made it easy for a new GIF specification (GIF89a) to add the option for time delays between images, turning them into frames of an animation.

The specification also allows for a space called the application extension block. Netscape Navigator v2.0 used this space to allow GIF creators to specify that a GIF should loop a certain number of times or indefinitely. This gave us the GIF as we commonly see it today.

However, GIFs tend to be several megabytes in size now because we frequently use them to display videos comprised of images with a lot of detail. Remember that each one is losslessly compressed. Furthermore, GIF doesn’t do any compression between frames, a basic foundation of typical video compression techniques. Frames of a video tend to be fairly similar. Because GIFs don’t exploit this information redundancy, the format is a very inefficient way to serve videos.

The solution is to use a format that’s actually designed to serve videos, like MP4 or WebM. Many services do this transparently. When Twitter added GIF support in 2014, they implemented the feature by converting uploaded GIFs into videos to serve instead. Imgur started doing the same thing the same year.

Serving Videos

Serving videos instead of GIFs is easy to do now with the HTML video element, which is supported almost universally, but it does take more work to use a video tag rather than an image tag. To serve the video equivalent of a GIF, we can use markup like this:

<video autoplay loop muted playsinline>
    <source src="dancing-baby.webm" type="video/webm">
    <source src="dancing-baby.mp4" type="video/mp4">
    <p>Your browser doesn't support this embedded video.</p>
</video>

Using the autoplay, loop, and muted attributes gives us the same behavior that we expect from a GIF.

The playsinline attribute is necessary for iOS in particular. See this Stack Overflow answer.

The element will load the first source that the browser supports. In this case, if the browser can’t play WebM videos, it will try to play the MP4 version instead.

We also provide a fallback message in case the browser doesn’t support the video element. This is distinct from the case where the browser doesn’t support any of the sources. In that case, the element fires an error event.

We don’t have to provide the MIME type for each source, but doing so might allow the browser to save a network request. If it can’t handle the type, it can move on to the next source rather than making a request to the server.

Video behavior can also be affected by the user’s power settings. For example, videos won’t autoplay on iOS if the user has low power mode on. Instead, the user should see the controls and can manually play the video.

While serving a video is not as straightforward as serving a GIF, the file size savings can be tremendous. The following video is 103 KB in size, compared to 4.1 MB for the GIF that I converted it from. That’s a size reduction of over 97%.

Creating Videos

To quickly convert a GIF into a video, there are plenty of websites that let you do a one-off conversion.

To convert a GIF into a video file on the command line, I use FFmpeg.

ffmpeg -f gif -i dancing-baby.gif dancing-baby.mp4

To take video screenshots in macOS, I use Kap. It supports saving the videos as GIF, MP4, WebM, or APNG files. QuickTime also supports screen recordings.

If you use Imgur, one issue that I’ve experienced is poor video quality after uploading MP4s. The reason seems to be that they get recompressed. So at least for Imgur, it’s better to upload a GIF and let them take care of converting it into a video.

One final note: according to Wilhite, GIF is pronounced with a soft “G,” like “jif.” That settles the never-ending debate for me.