Last week, I wrote about how lossy Animated GIF optimizations can reduce file size by 40-50%. While this is better than the lossless GIF optimizations we have detailed in the past, it’s really just making the best of a bad situation. The problem is not finding ways to optimize a 3 or 4 or 5 MB animated GIF of a video clip. The problem is the 3 or 4 or 5 MB animated GIF! In this post I show you the optimization that Twitter, Facebook and others already know, that lets you make your video GIFs 95% smaller by converting them to HTML5 video.
Video Animated GIFs: A Terrible Hack of Convenience
Animated GIFs were never designed to store video. In fact, GIFs really weren’t designed for animation. Here is a quote from the actual GIF89a specification:
The Graphics Interchange Format is not intended as a platform for animation, even though it can be done in a limited way.
Indeed, GIFs were designed to contain multiple images inside a single file as a way to reduce overhead by combining the redundant info like common headers or color data of each image. Think something more like “a ZIP file of images” instead of an animation format. It wasn’t until 6 years after GIFs were invented that Netscape 2.0 added an application extension enabling animated GIFs as we know them.
Unfortunately, all this means that animated GIFs are perhaps the worst possible file format to store video. We have decades of research into how to compress digital video which has yielded tremendous breakthroughs like chroma subsampling, discrete cosine transforms or motion compensation. Unlike actual video files, GIF uses none of these techniques, meaning a few seconds of content can be megabytes in size. Bloated size, slow frame rates, and other GIF limitations like a 256 color palette mean there are a lot of performance problems using GIFs for video clips.
Benefits of Animated GIFs
Even though animated GIFs are huge, slow, and don’t look as good as the traditional video, there are still several benefits:
- Universal support for playing animated GIFs on all platforms.
- No patent or licensing concerns that apply to common video codecs.
- Easy and widely available tools for creating GIFs.
These advantages outweighed the negatives enough for a culture to develop around creating and sharing funny animated GIFs. But what if something else came along that played everywhere, had no licensing concerns, was easy to create, and was super fast and much smaller than GIFs? Luckily something has, and that is HTML5 video.
HTML5 Video and Standardizing on MP4
HTML5 video is a catch-all term for the ability for browsers to play video content via the
<video> tag without needing to use plug-ins like Flash.
When HTML5 video was first standardized in 2009, there was a lot of confusion and fighting about what formats the video should be stored in and how they would be encoded. There were some concerns about patents covering various ways to compress videos as well as what, if any, licensing costs might appear.
Most of this was just a proxy argument for deeper philosophical and commercial disputes between the browser makers, kind of like when two people are having an argument about cleaning the kitchen when they are really arguing about something else. As a result, for the first several years things were chaotic with different browsers supporting different types of video, forcing the content creators to do a lot of work making multiple versions of the videos and doing weird tricks with HTML to work around bugs and make sure the right browsers got the proper video formats.
Thankfully, all of that is in the past. For a variety of reasons, H.264 encoded video stored in an MP4 container file (which I’ll just simply call an MP4 video for now on) emerged as the winner. The browsers stopped arguing and all adopted support for MP4 video and the legal and licensing concerns were resolved. As a result today over 90% of desktop browsers support MP4 video as shown below: For modern mobile devices, support is close to 100%.
MP4 Video instead of GIFs
Since MP4 videos are actual digital video files, instead of a hacky video clip animated GIFs, they look much better and are substantially smaller. How much smaller? Let’s look at that Star Wars animated GIF from our previous post.
This GIF is 2.9 MB in size. That is a huge size for what amounts to only a second or two of video. Here, I’ve converted that GIF to an MP4 video:
This MP4 file is only 149 KB! That is 95% smaller than the animated GIF! That’s amazing! Our research has found that animated GIFs are usually 5 to 10 times larger than a properly encoded MP4 video. This difference means that GIFs are not only wasting significant amounts of bandwidth, they are loading more slowly and creating a bad user experience.
In fact, converting animated GIFs to MP4 video is such an awesome optimization that it is exactly what sites like Twitter and Facebook and imgur do when you upload an animated GIF. They silently convert it to an MP4 video and display that instead. Read more: here and here)
Converting Animated GIFs to MP4 with FFmpeg
MP4 videos have near-universal support. And they are smaller and better than animated GIFs from a performance perspective. But how easy is it to create and share MP4 videos online? Luckily the answer is pretty easy!
We can use ffmpeg, a free, open source command line tool to convert an animated GIF into an MP4 video. Make sure you download a pre-built package unless you are nerdy enough to build from source. In the example below we use FFmpeg to convert the file
animated.gif into an MP4 video named
ffmpeg -i animated.gif -movflags faststart -pix_fmt yuv420p -vf "scale=trunc(iw/2)*2:trunc(ih/2)*2" video.mp4
I know that looks intimidating, but don’t worry; those extra options ensure we have a nice, fast, compatible video file that will play anywhere. Here is what they do:
- movflags – This option optimizes the structure of the MP4 file so the browser can load it as quickly as possible. I’ll talk about this optimization more in a future blog post.
- pix_fmt – MP4 videos store pixels in different formats. We include this option to specify a specific format which has maximum compatibility across all browsers. (This is actually the chroma subsampling we mentioned earlier).
- vf – MP4 videos using H.264 need to have a dimensions that are divisible by 2. This option ensures that’s the case. Don’t worry, we can still display this video at any dimensions you want.
Now that we have a video file instead of an image, our HTML markup needs to change. Our original markup to include an animated GIF looked like this:
<img src="video.gif" alt="" width="400" height="300" />
To use our new video, we need to replace that with this:
<video autoplay="autoplay" loop="loop" width="400" height="300">
<source src="video.mp4" type="video/mp4" />
<img src="video.gif" width="400" height="300" /></video>
This will automatically start the video, and loop it, without displaying any video controls. This gives the same experience as the animated GIF but it’s faster and smaller. Notice that we still have an
<img> pointing at the original animated GIF inside the
<video> tag. This way in the unlikely event the a visitor’s browser doesn’t support MP4 videos, the animated GIF will still be displayed and the user still experiences the content.
For our Rigor customers, we have added a new check to Optimization which will detect Animated GIFs which will see substantial savings when optimized by converted to MP4 video. Optimization shows you the savings, and even gives you with the MP4 video file to download and include in your site. If you just want a quick check, you can use our Free Performance Report.
We have seen that animated GIFs were historically the easiest, most compatible way to share short video clips on the web. However GIFs are a terrible technology for storing video and create a slow, bloated user experience. HTML5 video, while initially a mess of politics and in-fighting, has matured and support has coalesced around MP4 video. With the snippet of HTML above, you can convert GIFs to MP4 video, saving over 95%, and still have all of your users see the video content.
If you have lots of animated GIFs on your site (I’m looking at you BuzzFeed!), you should consider optimizing them by converting them to MP4 video. You can do this with FFmpeg as discussed above, or try various sites that can convert GIF to MP4 for you. I highly suggest hooking into your CMS, so that when a user uploads an animated GIF, it gets converted on the file. In future blog posts I’ll explore ways to automate this.
Interested in improving your website’s performance with optimizations like MP4 video? Then you’ll love Rigor Optimization. Optimization tests your entire website and identify over 300 performance defects that are slowing it down. Our continuous monitoring allows you to ensure that nothing changes that hurts your website performance. To learn more about trying Rigor for free, contact us today.
E-commerce revenue continues to grow,as consumers turn away from shopping in brick-and-mortar stores to shopping online. However, many businesses are not prepared for this growth because they do not fully understand the market and how to invest in...Read More
Because of the multifarious nature of web clients today, it’s important to consider the usage statistics when designing, implementing, and managing your site. However, misconceptions often arise when determining what browsers to design...Read More
Google Webmaster Tools is a web service that allows webmasters to view the status of their sites as seen by Google and the Googlebot crawlers. In addition to indexing your site structure and content, the Googlebot crawlers also record data on perform...Read More
Web designers and developers are always looking for ways to speed up their page load times. Yahoo has an excellent article written on the best practices for speeding up your page. How do you know if implementing one of their suggested practices will...Read More