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

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

Kenyettakenyon

IIRC Animated GIFs can use frame-delta compression, which (for a subset of all animations) is likely to save you some overall file size versus a sprite sheet. (I don't have numbers to back that up, but then any numbers you get will be skewed by the particular animation data set.) – Uranography

@Uranography That's right, but then again frame-delta compression in GIFs is very poor, as it only can understand that a pixel did or did not change, not like in a video where a pixel might have changed just a bit. In many real-case scenarios, GIF's frame-delta compression is much less useful than for example having alpha opacity/24-bit colors of PNGs or the compression efficiency of JPEGs. – Lingua

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

Lingua

@OmarIthawi You're right, imgur is not playing nice with me lately (maybe with everyone?). I kinda abused stack.imgur now (I re-uploaded the images via StackOverflow's dedicated imgur), to see if now it stops forbidding my images (and I don't even have an account, and certainly I didn't post anything weird there... weird). Link updated. Thanks for informing me :) – Lingua

@OmarIthawi Actually, crap! It still does not load the images instantly with a clean cache. But if you navigate to the image URL first, then it loads them in the page. I'll add instructions. – Lingua

@OmarIthawi ...And, after a few tries, it now gives forbidden to me too. What's up with imgur, it was so nice before. I'll look for an alternative image host. – Lingua

@CamiloMartin does anyone still support IE6 ? We are considering to drop support for IE9 – Terramycin

@mihai I currently support only IE8+ if it's for a client, but without bells and whistles for it. But I'm aware that some people will suffer until April 2014 (when MS drops support for XP and IE6), and maybe even more, with the monstruosity that IE6 was. It still has market share in some countries (not mine, I'm glad), and large corporations and governments still use it. That's why I love freelance work. Want IE6 support? Find another developer. – Lingua

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

Pleven

This is actually a good use-case that gifs cannot address. You don't have control over pausing gifs. – Rocca

The clubsexytime links above are Safe For Work, to anyone wondering ^^; the main website, however, may not be. – Cabinda

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

Blackberry

Answer 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/

Decoction

+1 for the CSS3 step(). I hadn't seen that and I will definitely find that useful elsewhere. However, the article linked doesn't really talk about my use case, rather it talks about using a spritesheet type layout for animated .gif files that have the same duration. Which, as I stated, mine will not. – Kenyettakenyon

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

Social

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

Orola

Can you relate the above to file size or performance in a browser? And can you substantiate any of it with some sort of reasoning or sources? At the moment, this is where I stand, but I don't have any indication other than a hunch that this is true. Also, could you elaborate on the "can repeat sprites" and "use partial frame updates"? How can I take advantage of that when creating a sprite and does it help file size? – Kenyettakenyon

You know how to repeat sprites when using spritesheets. Partial updates means to combine multiple sprites into one for display, in your animation the legs don't move, thus you could make a base sprite for the legs, and then overlay sprites with everything else, that would save a bit of space. You could do that both in JavaScript and in a gif animation, but given the tools for it it's probably easier in a gif animation. I haven't got any sources, if you want reliable data you should probably benchmark yourself. Do remember that tools and settings can have great influence on file size. – Orola

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

Inward

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

Delmore