×

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.

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-support

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.

StarWars Unoptimized

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 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:

To use our new video, we need to replace that with this:

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 Zoompf, our performance analysis product, which will detect Animated GIFs which will see substantial savings when optimized by converted to MP4 video. Zoompf will show you the optimization savings, and even provide 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.

Conclusions

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 Zoompf, Rigor’s performance analysis product. Zoompf can test your entire website and identify over 420 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 a free trial of Zoompf and other Rigor performance products, contact us today.

13

Suggested Blog Posts

The Perception Gap for Poor Web Performance

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

Using Browser Trends to Maintain a Better Site

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 for an...

Read More

Finding Causes of Intermittent Errors from Google Webmaster Tools

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

Optimization Options not Always Optimal

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
  • Affort Crimson

    I’ve stored and watched my gifs with other pictures on my pc for about 15 years! Now i cant watch those new “gifs” on my pc! Faststone, acdsee, potplayer can’t play them the same way as gifs, this is unacceptable!
    If you know the way, please share!

    • If you replace your PC with a Raspberry Pi, the savings on your electric power bill alone will likely cover the purchase price, and you should be able to play AVC video without problems.

  • Max

    in the example you gave, the quality suffers with the conversion! when we have high bandwidth connection, why wouldn’t we also have quality? i thought bandwidth has improved nowadays?

  • golden number

    This all sounds good, but the implementation leaves much to be desired. On iOS, the star wars animated gif plays inline while the video is huge, is half off the screen, wouldn’t play until in two finger zoomed the entire page until I could see the play button, and played the video not inline but in a black boxed separate screen. Is there some way to have an video actually look and act like an animated gif?

  • File Converter

    Great job! Your blog is very informative and useful information is very helpful to readers. But i want to ask a simple question how easy is it to create and share mp4 to gif videos online?

  • whatsapptube

    this will be very usful for me specially for Making GIF For Whatsapp

  • Marian S

    Good article. #MakeTheWebBetter

  • Ajay

    I followed the instructions in the article to convert an animated GIF to a MP4. However, it doesn’t autoplay on iOS devices. This is despite the Webkit website saying the following:

    elements will now honor the autoplay attribute, for elements which meet the following conditions:
    elements will be allowed to autoplay without a user gesture if their source media contains no audio tracks.

    My MP4 doesn’t have an audio track and so I’m confused why it’s not autoplaying on iOS devices. Would greatly appreciate an answer. Thanks.

  • David Austin

    not thrilled with this solution. It’s good for action sequences but – horrible if it’s a slide show. I have 6 images, optimized jpgs, each is on the screen for 2.5 seconds … going from GIF to HTML5 video creates a 100kb file of poor 256 color quality and noticeable artifacts and abrupt transitions. I compressed each jpg to 11k, no artifacts, 24 bit color. Alternatively, it seems like I should be able to CSS them into a slideshow with smooth fading transitions (that overhead being just a few kb yes?) … total size about 70kb. Far superior to this approach for slide-show type animations, but I can’t figure out how to do that. Anyone?

  • Enol Homer

    Sorry, but MP4 loses the transparency from the original animated GIF. How to keep the transparency when converting into MP4?
    I need this to have animated (transparent) watermark on every video I create.

  • saqib intizar

    Hello, few days ago i saw a perosn on fiverr.com he has animated profile picture and fiverr only allow jpeg and png for profile picture can anyone tell me how can we upload animated image without GIF format.

    Thank you