How to Improve web page performance by using Image Sprite

In this post i have shared, how we can improve a web page performance by using image sprite technique.

this technique is independent of platform.

we can use this approach either in java or .net and any other web development technologies.

By using CSS sprites technique we can reduce the number of HTTP requests made for image resources, by merging images into a single file.

What Is a Sprite?

Sprites are two-dimensional images which are made 

up of combining small images into one larger image 

at defined X and Y coordinates.

To display a single image from the combined image, 

we can use the CSS background-position property, 

defining the exact position of the image to be 

displayed.

Advantages of Using CSS Image Sprite

A web page with many images, particularly many 

small images, such as icons, buttons, etc. can take a 

long time to load and generates multiple server 

requests.

Using the image sprites instead of separate images

 will significantly reduce the number of HTTP requests

 a browser makes to the server, which can be very 

effective for improving the loading time of web 

pages and overall site performance.

Image Courtesy : Web

Display an Icon from Image Sprite

At the end, utilizing CSS, we can display just the 

part of an image sprite we need.

First of all, we will create the class 'sprite' that will 

load our sprite image. This is to avoid repetition, 

because all items share the same background-image.

1.  .sprite {

2.      background: url("images/mySprite.png") no-repeat;

3.  }

      we must define a class for each item we want to         display. For example, to display Internet Explorer       icon form the image sprite the CSS code would be.

1.  .ie {

2.      width: 50px; /* Icon width */

3.      height: 50px; /* Icon height */

4.      display: inline-block; /* Display icon as inline block */

5.      background-position: 0 -200px; /* Icon background position in sprite */

6.  }

If you want to create a sprite from online tools 

refer to http://spritepad.wearekiss.com/