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.
// <![CDATA[
(function(d, t) { var g = d.createElement(t), s = d.getElementsByTagName(t)[0]; g.src = 'http://assets.gfycat.com/js/gfyajax-0.517d.js'; s.parentNode.insertBefore(g, s); }(document, 'script'));
// ]]>
You should see what I created the other day as an animated gif or HTML5 video above. 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.
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.
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!
Source: HTML5Blog