What is CSS Sprites CSS sprites is an technique here you can combine all images which used in your

icon sprites

CSS Sprite Usage

CSS sprites reduce HTTP requests and the loading time of pages. This is the main reason to use css sprites for all heavy traffic websites. CSS sprites are used particularly for navigation (such as for hover effects), icons and buttons.

CSS Sprite Example

Here we show you example of CSS Sprite We combined all social bookmarking icons into a single image and going to use different icons in different locations., So This all social bookmarking icons retriving from the server in a single HTTP request (instead of 10 HTTP requests). This experience shows that reducing the number of HTTP requests has the biggest impact on reducing response time and is often the easiest performance improvement to make.

So how to do? How to create css sprite

This is to retrieve the image in a single request

.addthis_button_twitter,
.addthis_button_delicious,
.addthis_button_facebook,
.addthis_button_digg,
.addthis_button_stumbleupon,
.addthis_button_favorites,
.addthis_button_more,
.reltwitter,.relrss
{
width: 32px;
height: 32px;
background-image: url(../images/allicons.gif);
float:left;
opacity: 0.85;
margin:0 10px;
}