Animated .GIF vs Spritesheet + JS/CSS

As I was curious, I implemented it in javascript.

JsFiddle demo (edited image host as per comments).

What I found out:

  • It works! And better than expected.
  • The CPU usage is actually low (did not test it in IE6 dinosaur and I’m sure it would require “fixes”).
  • The size can be cut off, and/or quality can be increased, significantly (source-dependent).
  • Unlike Mikey G.’s concept, this works even if you zoom in/out (try it in both).
  • It allows variable frame duration just like a gif.
  • With more work, it could even have a player-like API (pause/resume, fastforward, skip, etc…).
  • Leverages other formats: 8-bit alpha PNG, progressive JPEG, <canvas>, SVG, WebP…

More info in the JsFiddle demo page.

Leave a Comment

Hata!: SQLSTATE[HY000] [1045] Access denied for user 'divattrend_liink'@'localhost' (using password: YES)