In mid-December GitHub released support for mp4 and mov uploads. By now (early February) most repos have full access but I don't see a ton of people using videos, they're still uploading animated gifs.

With this blog post I want to try and explain the merits of video over an animated gif both from a technical aspect and a usability aspect. I'll also talk a bit about how you can start creating videos instead of animated gifs whether you're on Linux, Mac, or Windows.

Let's start by talking about the basic technical aspects. I'm not going to get in to the gritty specifics but it's important to understand that animated gifs that are similar quality to a video are almost always larger. The reasoning behind this is that an animated gif is a collection of still images like a flip book. Each image has to be stored, and smooth animated gifs will operate at 24 frames per second. This means that a 10 second animated gif has 240 individual images which are stored and often times poorly compressed or not compressed at all. There are also other issues like the 256 color limitation for gifs. You can read more about animated gifs and gifs in general on the very detailed Wikipedia page if you're interested in learning more.

Then we have mp4 and mov files. The technical difference between them isn't that significant but mov is a proprietary Apple format while mp4 is not. Past that it's not something the end user needs to be particularly concerned about and GitHub is supporting both so it doesn't really matter. In terms of how it operates imagine it as taking the first frame (or image) and having a snapshot of that, then a certain number of the following frames are diffs of the original image. This means the images don't have to be stored individually, simply the data that says what about frame 1 is different from frame 2, frame 3 from frame 2, etc. After a certain number of these frame diffs there will be another key frame which has all of the data to ensure things aren't too out of sync with what is expected. They also don't have the same color limitations that gifs have.

Just looking at the difference in how they operate technically you can see why mp4 and mov files have an advantage over animated gifs. Having to store less information to understand what is occurring means they're smaller, and because of their higher color count they look more true to life and accurate which can be critical when dealing with UX or other design related issues.

This then takes us to the web where mp4 and mov files absolutely destroy animated gifs in terms of functionality. One of the biggest features of the video formats is that when properly configured they don't require the end user to fully download the file before it can start playing, this is not the case with animated gifs. Like any other image format (and gif is an image format, not a video format) gifs have to be downloaded entirely before they can be played. Video formats can easily be configured to allow for streaming playback which is really important for both usability and people who may be on slower internet connections.

This then takes us to the other big functionality benefits which people have come to accept losing because animated gifs were the only option on GitHub until recently. The main ones are the ability to scrub and replay sections, the ability to see how long the video is, expanding the video, and audio.

Let's look at an issue on GitHub that I created recently to show how video can enhance issue clarity and why a video is better than an animated gif. The video in that issue was recorded on a 1440p display (application capture only and it's scaled down to not quite 1920x1080), and it's 25 seconds long. Before compression it was 7.09MB and after compression it is 1.41MB. It's also web optimized which means that the video can start playing almost immediately before the user has downloaded all of it which isn't possible with an animated gif.

While all of these details are nice to know, it's the usability that makes video vastly superior to animated gifs. The video doesn't start playing automatically which is a huge win over animated gifs. What happens if the animated gif is partially cut off when the person opens the issue, or they're viewing it on a smaller display? The animated gif will continue to play and you have no idea how long it is. Is the gif 5 seconds long or 50 seconds long? You'll just have to wait and see. With a video all of these issues are addressed.

The video also doesn't start playing until you tell it to. You can maximize it to see better (great for accessibility), and most importantly you can scrub or replay specific parts to your heart's content. As a maintainer videos are much faster to review and look at than animated gifs. The lack of waiting for the animated gif to finish loading or looping to see what happens with an interaction is fantastic. It also means I can easily capture a specific part of the video myself without having to wait for the animated gif to start over

Hopefully these examples of usability improvements have convinced you that videos are vastly superior to animated gifs. No one would use Youtube or Vimeo if you had to wait to download the entire file, couldn't jump around to different timestamps, couldn't scrub forward or backward, and you had no idea how long it was. If a site operated this way people would be up in arms over how bad it is. Why should we treat our medium any different?

Now the big question is how do you create these videos?

For those of you using Macs the tool chain is exceptionally easy. Use the screenshot toolbar (talk about a bad name for something that supports video too) via shift+cmd+5 and select one of the video options then compress the video with the open source tool Handbrake using one of the "web" presets. That's it. Your video is now ready to be sent over to GitHub for everyone to enjoy. You can of course tweak your Handbrake settings, but the basic web settings with a decent resolution will handle 99% of cases.

For Windows and Linux users the capture process is slightly different but only takes a few minutes to set up. The easiest option is to use OBS and the Window Capture mode then send that through the same process in Handbrake using one of the "web" presets for compression. If you're not familiar with OBS it's a tool used primarily for live streaming but it's also great for local recording and specifically application capture (though you can also do desktop capture). The Sources Guide documentation provided by OBS has instructions on how to create new sources, and setting up a window source takes about 30 seconds then you just click "Start Recording" and go. OBS also supports hotkeys which makes it easy to avoid any sort of delay at the beginning of your recording while you switch applications.

I hope this has been helpful in giving people the support they may need to start moving on from animated gifs to video. You can do it!