Turn animated gifs into HTML5 video streams to save bandwidth

Advertisement

animated-gifs-html5-video

After being used solely by webmasters in the beginning days of the Internet to bring life to otherwise static Internet pages, animated gifs have seen a revival in recent time for entertainment purposes.

Their main advantage over video is the fact that they are treated just like images on most websites. If you can upload images, you can also upload animated gifs usually. While some sites such as Facebook limit that, most websites allow you to post animated gifs.

The main issue with animated gifs is size. If you compare the size of an animated gif to a video of it, you will notice that the animated gif is always larger than the video, provided that both use the same resolution and quality settings of course.

Gfycat has been designed to convert any animated gif you stumble upon on the Internet into a HTML5 video instead that you can stream on the service's website.  You can use the service in two ways:

  1. Add gfycat.com/fetch/ in front of the animated gif address to turn it into a video.
  2. Upload a gif to the site directly.

Information about the compression ratio are displayed on the HTML5 video page. Controls to play the video faster or slower, to pause it, and to load the source animated gif are all present on the page as well.

While those are comfortable options, new options have been created in recent time to make things even more comfortable to the user.

The Firefox add-on gfycat Companion for example can redirect any direct animated gif request to the gfycat website where it is converted and streamed as HTML5 video instead. Besides that, it also adds two new context menu options to Firefox that you can use to open any animated gif on the gfycat website, and to copy the address of that converted video to the system clipboard.

The Google Chrome extension GfyFetcher adds an option to Chrome's context menu to convert any select animated gif into video on the official project website.

Verdict

So who is this for? This is great for users with slow Internet connections, and users who need to monitor the bandwidth of their Internet connection because it is limited. It can speed up the loading of animated gifs and will save bandwidth at the same time.

While it may take a bit longer to load due to the conversion, it may be worth the extra wait.

Please share this article

facebooktwittergoogle_plusredditlinkedinmail

Advertisement

Filed under:

Responses to Turn animated gifs into HTML5 video streams to save bandwidth

  1. eskaton January 21, 2014 at 5:18 pm #

    Perhaps I misunderstood the article, or the extension isn't working correclty with my setup, but gyfcat Companion is not intercepting the gifs upon page load/render and reinserting the gifs with html5 recreations.

    Likewise, I don't see two context menu options added either. If I right click on a gif and select the normally available option of 'View Image' it then redirects to gyfcat's website and performs the conversion.

    Not to rag on you Martin; just wanted to bring to light that it doesn't work in this way, or that I have an issue and would appreciate any help in troubleshooting it. I looked on the author's github site and AMO reviews, but found nothing of help.

    • Martin Brinkmann January 21, 2014 at 5:44 pm #

      It is only working on direct requests, meaning when you open the animated gif in the browser, not on web pages. The only exception to that rule is if you use the Reddit Enhancement Suite. If you do, it will work on animated gifs on Reddit that are displayed inline.

      • pSamVeth January 22, 2014 at 10:46 am #

        You have changed my life...

  2. Henk van Setten January 22, 2014 at 5:50 pm #

    Sorry for turning this discussion around, but to be honest, I wouldn't want to convert animated GIFs into videos -- instead, I'd like very much to have a reliable option (in Google Chrome) to automatically _freeze_ all those horrible, distracting animations. With "freezing" I mean showing just the first frame, as a static picture instead of an animated one.

    Years ago some browsers still had this as a built-in option, but Chrome doesn't. So far the best I could find was a primitive extension called Gif Stopper, that will blank out _all_ GIFs (not just the animated ones, no, all of them) if you hit the ESC key. This is a pita, not just because it keeps requiring a keystroke on every page, but also because on some sites it blanks out not-animated navigation buttons, etc.

    I would be immensely grateful if someone could point me to a real GIF freezer, one that actually works as it should.

Leave a Reply