Tag Archives: html5 videos

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 →

Learn HTML5 with Videos and Books

Treehouse Logo

I moved to a rural part of Japan six years ago with no prospects. There was no job waiting for me and I didn’t have a college degree to help me become employed. My Japanese speaking skills were nonexistent unless you want to give me credit for mistakenly asking people if I could “have” their toilet. I knew I needed to figure out a way to earn a living.

I tried several ideas that all failed. The most notable of the failures was the month I tried to sell Japanese Transformers on eBay. I probably would have done better if I made an eBook “How to Make Money Selling Japanese Transformers”. You really can make money but not much…just enough to purchase expired sushi and paper towels. The towels are important because they will be used to clean up any sushi that is “returned to sender”. Ewwww!…but true.

How did I escape financial ruin? How did I go from being dirt poor to just poor? The answer is online tutorial and training videos. I had computer skills but needed to improve them so I signed up for the free trial at Lynda.com and watched as many videos as I could. I was also learning from YouTube, forums, and by dissecting source code. The way I went about acquiring skills wasn’t ideal. I think the learning online thing would have worked better for me if everything I needed to know was in one place. This is why I was very happy when Faye, the community manager at Treehouse contacted me.

Treehouse is taking a new angle at the traditional online teaching video. Their videos tend to run as a course with quizzes and interactive Code Challenges mixed in. As you complete the courses you will earn badges that are an indicator of what skills you currently possess. These badges are then viewable by anyone including recruiters from big companies. This means that everything you need to know will finally be in one place! 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 →