Animated .GIF vs Spritesheet + JS/CSS

问题:

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 know). And each one must be hand made and is a long process. But, once they are made, I don't really have to change them. My spritesheets aren't likely to change very quickly, so chances are it will be a one and done.

My Question (tl;dr)

Which is going to scale better to the hundreds of animations in terms of filesize (including HTTP header transfer as it will go over the web), performance in modern browsers, and ease of creation (lowest priority, but if you can make my job easier, or argue to this, I would be grateful), Animated .gif files built from spritesheets, or simply using CSS and the spritesheets I already have?

Examples

VS

回答1:

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.

回答2:

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.

回答3:

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.

回答4:

I'd take a look at this:

http://adamducker.com/blog/7/animated-gif-for-css-sprites/

I personally think you'd be crazy to use a spritesheet, but i guess it depends on how many animated gifs you'd have to bring over otherwise

I don't know what your limitations are, but here's a fiddle using CSS3 step() to animate a spritesheet:

http://jsfiddle.net/simurai/CGmCe/

回答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

回答6:

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.

回答7:

One other issue related to CSS sprites, at least in the current browsers, is scaling "jitter". You can scale the GIF file to whatever size you need (presumably smaller), but if you try to scale the CSS sprite you run into jitter because of rounding errors (background-position is based on the the scaled coordinates, not the original). If someone knows another way of handling scaled animated sprites, that would be great to know.

ImageMagick does a great job of creating animated GIFs or sprites.

回答8:

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