CSS image sprites help reduce the number of web server calls by combining multiple images into one, and using css to reveal only the area of the combined image that is needed.

An example of sprites in use on this site can be viewed on the Video Category page. Below are the styles used for the first three images. Notice the height value increment by 160px.

    .vidThumbSprite {
      height: 160px;
      width: 260px;
      display: inline-block;
      padding-left: 0px;
      background: url("img/so-video-sprite260x1720.jpg") no-repeat;
    }
    .supportSmallThumb { background-position: 0 -0px;  }
    .gippersThumb { background-position: 0px -160px;  }
    .courseThumb { background-position: 0px -320px;  }

These html div elements contain the css class names representing the image.

<a href=”#” class=”vidthumbhref”> <div class=”vidThumbSprite supportSmallThumb”> </div></a> <br> <a href=”#” class=”vidthumbhref”> <div class=” vidThumbSprite gippersThumb”> </div> </a> <br> <a href=”#” class=”vidthumbhref”> <div class=” vidThumbSprite courseThumb”> </div> </a> <br>

And below are the combined 11 images which uses only one call to the server. The code above is for the first three 260×160 image areas.