title: Animated .GIF vs Spritesheet + JS/CSS
body: <p>Which will scale best for performance, file-size, (and my sanity): Animated <code>.gif</code>s or a spritesheet with animations using CSS (and JS when need be)?</p>
  <h3>Filesize</h3>
  <p>So, I'm honestly not sure which will be better here since I don't understand the compression of frames in <code>.gif</code>. 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.</p>
  <p>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 <a href="https://stackoverflow.com/q/8876259/422184">one of my previous questions</a>, I know that I can easily pull out a single frame in CSS using <code>image-rect()</code>. Where as with a <code>.gif</code> file I really can only include one animation since each will likely have a different duration.</p>
  <p><strong>Addendum:</strong> 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 <code>.gif</code> would need to have all the frames (at least to my knowledge).</p>
  <h3>Performance</h3>
  <p>Guessing here again, my intuition tells me that animated <code>.gif</code>s 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 <code>.gif</code>s.</p>
  <h3>My Sanity</h3>
  <p>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.</p>
  <p>On the other hand, animated <code>.gif</code> files are not a cake to make in Photoshop (if you have a better program, <em>please</em> 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.</p>
  <h3>My Question (tl;dr)</h3>
  <p>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 <code>.gif</code> files built from spritesheets, or simply using CSS and the spritesheets I already have?</p>
  <h3>Examples</h3>
  <p><img src="https://i.stack.imgur.com/OzSsi.gif" alt="Animated Sprite (60 frames)" /> VS <img src="https://i.stack.imgur.com/jS8eN.gif" alt="Same animation with spritesheet" /></p>