Speed up your website with CSS image Sprites

Webpages are created with tons of small icon images to show arrows, curves, separating pipes etc. About 30 to 100 HTTP requests will be sent to server while browser loads a webpage elements such as images, style sheets and scripts. Most of the requests are sent for downloading the images from the server. CSS Sprite technique can reduce the number of requests and which will increase the page loading speed.

A sample CSS Sprite Image is shown below.

You might have noticed the structure of the image. All images icons are combined into a single image. By changing the background position and setting the required dimensions will display the required image on the webpage. 

Lets display the Google Checkout icon from the image combination. See the following CSS code:-

div.checkout {
 width: 118px;
 height: 21px;
 background: url("images/google_sprite_image.png");
 background-position: 3px 250px;
}

Use a container with the same class name to display the checkout button.

Hurrah! You have learned to use a CSS Image Sprite technique