animated gif vs video vs canvas - for speed & file size

animated-gif, html5-canvas, html5-video, performance, video

Solution

I know it's already answered, but as you specifically referred to the Sublime Text animation I assume you're wanting to create something similar?

If that's the case then here is a post explaining how it was created by the Sublime Text author, himself:

- http://www.sublimetext.com/~jps/animated_gifs_the_hard_way.html

The interesting part of the article is how he reduces the file size - which I believe is your question.

Problem

Assuming a simple product demo e.g. the one found on http://www.sublimetext.com/ i.e. something this isn't traditional high res video and could be reasonable accomplished with: - animated gif - video (can be embedded youtube, custom html5 player, whatever is most competitive) - canvas The question is, which performs better for the user? Both in terms of: - The size of the files the user must be downloaded to view the 'product demo' - The requirements in terms of processing power to display the 'product demo' If you feel that there's a superior technology to accomplish this or another metric to judge its usefulness, let me know and I'll adjust accordingly.

Original source