Use one CSS Image Sprite instead of a lot of images

Here good explanations from Yahoo website (http://developer.yahoo.com/performance/rules.html) :

CSS Sprites are 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.

Optimize CSS Sprites:

• Arranging the images in the sprite horizontally as opposed to vertically usually results in a smaller file size.
• Combining similar colors in a sprite helps you keep the color count low, ideally under 256 colors so to fit in a PNG8.
• "Be mobile-friendly" and don't leave big gaps between the images in a sprite. This doesn't affect the file size as much but requires less memory for the user agent to decompress the image into a pixel map. 100x100 image is 10 thousand pixels, where 1000x1000 is 1 million pixels

Here a good website to create sprite :
http://spritegen.website-performance.org/

Other site to explain sprite philosophy:
http://www.alistapart.com/articles/sprites