Alex Rivera | Logout

Animated .GIF vs Spritesheet + JS/CSS

Asked 2012-02-04T08:00:57.487
38

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)?

Filesize

So, I'm honestly not sure which will be better here since I don't understand the compression of frames in .gif. My guess would be that they would end up about equal if I can swing it right, but if this is wrong, or if this is a factor for a different reason let me know.

The main advantage here, in my mind, goes to Spritesheets as I would be able to include multiple animations on a single sheet (and we're talking hundreds of animated sprites here). And based on one of my previous questions, I know that I can easily pull out a single frame in CSS using image-rect(). Where as with a .gif file I really can only include one animation since each will likely have a different duration.

Addendum: Also, some of the animations repeat for a given sprite, so the spritesheet would only have to have one copy of the frames, where as a .gif would need to have all the frames (at least to my knowledge).

Performance

Guessing here again, my intuition tells me that animated .gifs are going to be significantly faster as I won't have to manage all the animations at the same time I'm doing a lot of JS code for other things. But, I don't know for sure, maybe browsers take a significant hit with 30+ animated .gifs.

My Sanity

The spritesheets are made for me, so my work would be high in the beginning (writing and animation engine and hand coding one/each sheet). But once written, it is usable for good and a change in a spritesheet requires minimal changes to code.

On the other hand, animated .gif files are not a cake to make in Photoshop (if you have a better program, please let me kno

css performance filesize animated-gif sprite-sheet
Edit
Report

2 Answers

9

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.

answered 2012-02-10T01:50:55.603
2

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

answered 2013-07-09T16:09:43.220

Your Answer