CSS Image Sprites
An image sprite is a collection of images put into a single image. A web page with many images can take a long time to load and generates multiple server requests. Using image sprites will reduce the number of server requests and save bandwidth.
How It Works
Instead of using separate images for different parts of your design (like icons), you create one large image that contains all of them. Then, you use CSS's background-image and background-position properties to display only the specific part of the sprite you need for each element.
Example
css
#home {
width: 46px;
height: 44px;
background: url(img_navsprites.gif) 0 0;
}
#next {
width: 43px;
height: 44px;
background: url(img_navsprites.gif) -47px 0;
}In this example, both #home and #next use the same image file, but the background-position is shifted to show a different part of the sprite for each one.
Test Yourself with an Exercise
What is the main benefit of using CSS image sprites?