Sprite image - how to organize?

HTML & CSS
1

What do you put into sprite image, is that everything possible?

As I understand, there are some limitations:

  • There is no way to put into sprite images that are in background and are repeate-y or repeat-x, correct?
  • Also for background images of those a tag width variate (menu tab image for example) also can not be used, right?
  • Images that are shown only on particular pages, unless it is quite possible user will go to this page as well. It makes no sense to load those images as sprite image also in index page for example. Correct?
  • Images that are too big in size, which is about how many kb?
  • Images that need to be as img tag for SEO or printing purposes

So everything else you put into sprite? Do you devide sprite for different section of the site or one sprite image for all pages?

2

One giant sprite would be just as bad an idea as 100 small images.

Basically, I group related items together which have no real meaning (decoration only). I generally also only put together those that are small (since that’s where you get the real boost). And, just for the sake of simplicity, I’ll group related icons together.

If icons are slightly different sizes you can group those (just position them so they have an appropriate amount of white space around them to show only them in their given area).

The two reasons you use sprites are:

  • reduce the total file size of your images.

The reason you can put together images and get a smaller next size even with the same amount of information is because each image has a certain fixed amount of “header” information that’s attached to it. This means that 100 images have 100 headers, whereas one image with them all together only has 1 header, reducing the size a bit.

  • reduce the number of HTTP requests to the server

If you have 100 images, 100 different connections and transactions must take place to get all of these across. If you have one bigger image, you only need one connection to transmit the image.

If your sprite isn’t helping one or both of these problems, it isn’t worth using a sprite. Sprites can be quite difficult to deal with in many situations, so you don’t want to overuse them or you’ll be pulling your hair out.

I’d say if you’re under 15-20 total HTTP requests you’re probably golden. If you can’t get under this, don’t stress too much. Just sprite-ify as much as you reasonably can, combine all of your stylesheets into one file, and combine all of your javascript files into another and you’re probably as good as you’re gonna get.