title: Why use a sprite sheet rather than individual images?
body: <p>One thing I have noticed on some sites is that they use one BIIIIIIIG image containing lots of little images, then use CSS <code>background-position</code> to define the coordinates of each image, rather than use individual images.</p>
  
  <p>Here's where I'm at:</p>
  
  <h2>Cons for using big sprite sheet</h2>
  
  <ul>
  <li>Need to load a large image to just display even one small image</li>
  <li>Need to write (or generate) a long stylesheet with a class for each image</li>
  <li>Cluttering CSS with lots of class definitions may impact performance</li>
  <li>If one image changes (or another is added), cache problems may be encountered both on the image and the CSS associated with it</li>
  <li>Requires a <code>&lt;div&gt;</code> with proper styling (<code>display: inline-block; width: 32px; height: 32px; background-image: url('spritesheet.png');</code>) which adds yet another class to the mix.</li>
  <li>Many more that I can't remember now I'm typing them.</li>
  </ul>
  
  <h2>Pros for using big sprite sheet</h2>
  
  <ul>
  <li>... Erm... none yet.</li>
  </ul>
  
  <p>In fact the only thing that comes close to a pro here is that when I cut up the sheet into individual images the resulting folder took up 3Mb <em>on disk</em> (due to each file being &lt;100 bytes and my allocation size being 4k). The actual files themselves come out less than half the size of the sheet and CSS, so <strong><em>even with the overhead of an HTTP request there is a significant space saving</em></strong>.</p>
  
  <p>Basically, my question is: Does anyone have ANY pros for using a big sheet over individual images?</p>