What is a CSS Sprite?

CSS Sprite is a collection of images combined in a single image.
and it is the preferred method for reducing the number of image requests. 

Combine your background images into a single image and use the CSS background-image and background-position properties to display the desired image segment.
When there are multiple images (icon images,list-images,background-images that are used in), browser will have to request the server for each images separately.  So wherever possible, use CSS Sprites.

How does CSS Sprites help speeding up the WebPage?

Combining images into as few files as possible using CSS sprites reduces the number of round-trips and delays in downloading other resources, reduces request overhead, and can reduce the total number of bytes downloaded by a web page.

When you have to sprite the images?

If you have background gradients, and icons that are used in your website or blog, it is a good idea to combine them all into one. Do sprite every possible background images.

Tools to make sprite images.

There is a good free sprite creator .
http://spriteme.org/