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

jon picture jon · Jul 10, 2013 · Viewed 8.5k times · Source

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:

  1. The size of the files the user must be downloaded to view the 'product demo'
  2. 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.

Answer

Jarrod picture Jarrod · Jul 10, 2013

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:

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