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 :

 image:

 

Output Image :

 Html Code:

<a href="#" id="recaptcha_refresh" ></a>
<a href="#" id="recaptcha_speaker"></a>
<a href="#" id="recaptcha_question"></a>

Css Image Sprite :

#recaptcha_refresh
{

    background:url(../images/recaptcha-sprite.png) no-repeat  -60px 0px;
    width:20px;
    height:21px;
    border: none;
    display: block;
   
}
#recaptcha_speaker
{

    background:url(../images/recaptcha-sprite.png) no-repeat  -38px 0px;
    width:20px;
    height:21px;
    border: none;
    display: block;
   
}
#recaptcha_question
{

    background:url(../images/recaptcha-sprite.png) no-repeat  0px 0px;
    width:20px;
    height:21px;
    border: none;
    display: block;
   
}