Using CSS sprites: Improve Web Performance

JUST GO THRO'it:

CSS sprites group multiple images into one composite image and display them using CSS background positioning. You can save a significant amount of HTTP requests by consolidating your images into one or more composite sprites and using CSS to selectively display parts of the sprite within your web page. Some of the busiest sites on the Web use CSS sprites to save HTTP requests.

Brief HowTo:
The idea behind CSS sprites is to consolidate multiple images into one sprite and then selectively display portions of this sprite with positioning.
The steps are as follows:

1. Group multiple images together (usually icons) into one sprite

2. Evenly space these images, aligned into one or more lines

3. Set this sprite to the background image of an element (usually a list)

4. Position the sprite to display the appropriate image by shifting the X or Y position by a multiple of the spacing

Case in Point: Yahoo!
Yahoo uses CSS sprites on its home page to improve performance. The first set of icons is displayed in the "Check your mail status" section on the right of Yahoo!

The #patabs li .icon rule loads the composite background sprite.
#patabs li .icon{
display:block;
z-index:10;
padding:8px 0 9px 40px;
background:url(pa-icons.gif) 5px 3px no-repeat;
}
The background position is changed to show only the icon that matches the tab ID (in this case #messenger).
#patabs #messenger .icon{
padding-left:31px;
background-position:Xpx Ypx;
}

Thanks
A.T.J