Animated .GIF vs Spritesheet + JS/CSS

Question

Which will scale best for performance, file-size, (and my sanity): Animated .gifs or a spritesheet with animations using CSS (and JS when need be)?

File

Answer 1

If you're talking hundreds of sprites, then go with .gif. The more complex the animation, the more animations there is, the higher the load on the browser since more resources will be utilized to render the animation 'slide by slide' rather than just letting the animated .gif itself play.

This gets worse when you take into consideration cross-browser compatibility where, as always, IE fails big time. I've never seen a site choke on lots of small .gifs but I see sites choke on simple javascript all the time. I can only imagine how bad it would get with hundreds of css/js animated images flipping all the time.

If you don't mind me asking, what kind of site are these animations meant for? Is it some sort of animations portfolio or...?

Answer 2

Gif animations can repeat sprites, they can also use partial frame updates, and positioning the same sprite at different positions. If you simply want to display a non-interactive animation I'd say animated gifs have all the advantages, except for colour, you are forced to use a 256 colour palette.

I remember using Microsoft GIF Animator, that is certainly easy to use. I don't know anything about Photoscape, but word on the net is that that is a good slightly more heavy alternative.

Answer 3

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.

Answer 4

Update:

In the time since I first posted this, I've had better luck getting sprite sheet animations to work in browsers. Have browsers/computers improved, or was I just doing it wrong? I have no idea. Either way, this answer is a bit obsolete, but I'll leave it here for historical purposes. There are better, newer answers that are more relevant today.

---

GIFs work quite well with GPU acceleration, since the partial frame updates mean that only a portion pixels need to be redrawn. Unlike GPUless drawing, the browser doesn't have to redraw all the pixels each frame. With a sprite sheet, you're forcing the latter anyway, since you're not overlapping mostly-transparent layers. Therefore, GIFs are definitely going to give you better performance, especially in modern browsers.

GIFs obviously have the downside of being limited to 256 colors, but based on your sample, that shouldn't be an issue. However, if you use sprite sheets, it will certainly become an issue, and you won't be able to use a GIF. This means worse compression, most likely. Since you have large areas of solid color, lots of repetition horizontally, and few colors in any given area, you will greatly benefit from GIF's implementation of Lempel-Ziv(-Welch) compression.

Answer 5

Animated gifs only give you binary transparency (a pixel is transparent or totally opaque). That's why most animated gifs look bad on transparent backgrounds because you cannot apply antialiasing (like your squirrel, some antialiasing there would do wonders).

If you want to have PNG-24 transparency quality you have to go with animated sprites.

Also, animaged sprites performs really well if you draw them on a canvas. Look this: http://seb.ly/demos/bunnybench/bunnies_canvas.html

Answer 6

Just wanted to weigh in on this. There are many scenarios in which you have multiple animations on one page. In the scenario of having multiple animations on the same page that are interactive. It is better to use a sprite sheet with CSS animations than gifs. Here are my demos:

http://clubsexytime.com/projects/eyetracker_gif/

http://clubsexytime.com/projects/eyetracker_sprite/

as you can see the sprite version handles the roll overs with ease while the GIF based version kurchunks to a halt.

Again, this is just one scenario, but thought it might be useful. Also it acts as a good code snippet.

Thank.