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

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.