CSS Image Sprites

I've been working on some projects together with my friend for the last couple of weeks. I am doing the front-end development part, while he is responsible for the whole business logics and project implementation. Because these are web applications with multiple tenancies, the overall performance is a key factor. One of the requirements from his side was usage of image sprites to reduce the number of requests.

Makes sense, but...

In general, I agree that usage of CSS sprites can be useful - less images, less requests, but there is a thin line between use and abuse of that technique. It needs to be well balanced, because it comes with some cost. Combining all graphics into one big image, will definitely increase the file size. The other downside is the overall maintenance that gets complex and sometimes inconvenient.

After some experiments I've come up with a solution of dividing sprites into smaller ones - specific to the place of its usage. If some graphics appear on one page (or section), there is no reason to put them in one file and then, keep them hidden anyway. No waste of bandwidth in this case. Creating a separate sprite with graphics for only horizontally-repeated backgrounds also makes more sense.

Creating a big, f*ck-off sprite, makes sense when background image is applied to the elements with same dimensions (for instance - same height). Good example can be seen on the Dropbox.com, where sprite image is 32 pixels wide and 6032 pixels [sic!] high. The FamFamFam icons set has been combined into a one, big image (alomost 100KB).

Got some comments or something to say? Feel free to express your thoughts on twitter, facebook, your blog or somewhere else...