Reduce the File Size of Your Animated Gifs Using HTML5 Video

Gfycat logo design - A gif and HTML5 video hosting service.

I built a lot of animated gifs for clients when I first started working online. The file size of my gifs could get rather large even after optimizing them in Fireworks so I would sometimes need to make the same thing in Flash. Flash was good for reducing the file size of my gif animations but using it opened up a whole host of other problems. So when I came across a new website called Gfycat that claimed to be able to reduce the file size of an animated gif by turing it into a HTML5 video, I had to try it.

You should see what I created the other day as an animated gif or HTML5 video. If only my previous paragraph is showing, please refresh the page. If you see an animated countdown that never ends, please refresh the page. If you see floaters, please visit your eye doctor and then refresh the page.

I embedded my HTML5 Blog animation using the Gfycat embed feature which is still in the early alpha stage. There are some hiccups using the embed feature. The biggest one I found was that on mobile devices the gif will show instead of the HTML5 video. If my embedded animation is not working for you, please visit it on the Gfycat website here: http://gfycat.com/YoungDisfiguredBonobo. That link was randomly generated. Yes, “YoungDisfiguredBonobo” is not my handy work. Gfycat URLs consist of this structure: AdjectiveAdjectiveAnimal. I didn’t know what a bonobo was so when I first saw it I thought the link was “YoungDisfiguredBono”. It gave me a chuckle.

Funny HTML5 Video Names automatically generated by Gfycat

Gfycat did do a good job at reducing the size of the animated gifs I uploaded. The HTML5 Blog animation I made went from a size of 3.2 MB as an animated gif to 917 KB as an HTML5 video. Results will vary. There is an example on the Gfycat website of a 4.5 MB animated gif that when optimized into an HTML5 video, the size went to a spectacular 286 KB. The video version is about 16 times smaller. Dramatic file size reductions like these will certainly speed up websites, minimize bandwidth usage, and help save the manatees.

Screenshot of HTML5 video controls after it has been converted from an animated gif.

In addition to optimization, animated gifs transformed into HTML5 videos via Gfycat have some swell features. Videos can be played in slow motion and reverse. They also can be sped up, paused, and analyzed frame by frame. Using the controls underneath the video will change the link on Gfycat, which can then be shared. You can see the video I made in reverse using this link: http://gfycat.com/YoungDisfiguredBonobo#?direction=reverse


Did I convince you to try it? I want to see how optimized you can make your animated gifs. Please post your weird Gfycat generated links in the comments. Thanks!

4 Responses to “Reduce the File Size of Your Animated Gifs Using HTML5 Video”

  1. Evelyn January 22, 2014 at 7:57 am Permalink

    We really need a copy pastable video format just like gif. The default html5 video is too video-ish not gif-ish enough.

  2. Anthony January 31, 2014 at 11:15 pm Permalink

    Man, I have animated gif’s with a vengeance! However sometimes I just have to do them, however looking at this work around and especially using Html5 sounds really interesting.

    I will definitely give this a try. Thanks Stan.

  3. Michiis February 20, 2014 at 5:03 pm Permalink

    Yes you convinced me to try it. Thank you for sharing this awesome tool 😀
    I do have a tiny problem with it. I can’t find how to download the HTML5. I do not wish to keep the video on the Gfycat website. I don’t want to place it in an iFrame that streams from their website. I wish to host the videos on my own website. How can i do that?
    Many thanks!

  4. Pali Madra June 22, 2014 at 4:17 am Permalink

    Definitely was a good idea otherwise Twitter would not have adopted it to allow users to tweet GIF’s !

    Keep up the good work!

Leave a Reply

Do the math and you shall pass. * Time limit is exhausted. Please reload CAPTCHA.