CSS Sprites: onilne sprite generator

The CSS sprites technique is basically a technique that reduces the CSS requests when dealing with background images.
Example: Lets say you have 2 selectors in your CSS,

div#first
{
  background: url(first_bg.png);
}  

div#second
{
  background: url(second_bg.png);
}

when loading your CSS file will preform 2 requests, one for each image you specified as background, so when dealing with a complete design, you are probably talking about 40-50+ image requests as such.

CSS sprites solves this problem by loading only one image, that contains all the images you will use on your site within, and displaying the correct image by playing with a combination of a background offset (background-position CSS attribute) and the size of the element.
This technique can be very effective for improving site performance, particularly in situations where many small images, such as menu icons, are used. The Yahoo! home page, for example, employs the technique for exactly this.
Examples and full explanation can be found here at the CSS Tricks.com - CSS Sprites: HowTo or here at the List Apart: Image Slicing's kiss of death article.

Today, i found a Sprite image generator that actually generates this Sprite image file from a zip file you upload and containing all the images, and produces the image as said before, but also the output CSS statements.
very useful.