Tag Archives: speed

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. Continue Reading →

Secrets to Faster HTML5

High Performance HTML5 is by far my favorite session from Google I/O 2012. The session was done by Steve Souders who is like the Michael Jordan of speed on the web. His web credits include creating YSlow, HTTP Archive, Cuzillion, Jdrop, ControlJS, and Browserscope. He is the Head Performance Engineer at Google and wrote High Performance Web Sites and Even Faster Web Sites. He also co-chairs Velocity. Do you get the idea? This guy is all about speed.

The speed of an HTML5 app is crucial to it’s success. A good user experience is a fast user experience. I live in Japan where my Interent service provider offers lightening fast connection speeds up to 1Gbps. So if an app or website takes me more than a second to load it really annoys me and my visit will most likely end up increasing your bounce rate. I’ll start getting flashbacks of when dial-up Internet access ruled the planet. Do you remember this?

You will get a few of the secrets to faster HTML5 by watching the video above. Continue Reading →