CSS Image Sprites

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.

Example 1: Image Sprite

In this example we use a single image ("img_navsprites.gif") to create three separate navigation icons.

Example 2: Image Sprite - Hover Effect

We can add a hover effect to our sprite.

#home {
  width: 46px;
  height: 44px;
  background: url(img_navsprites.gif) 0 0;
}