CSS Sprite - Another Web Optimisation Technique

When there are lots of images to be downloaded for a web page, the best option would be to use Css Sprite.In simple
words it reduces the number of images to be downloaded into one single big image.

Thus all the image requests will be reduced into one single request.At slight cost of increase in size better performance is attained.


Different Technique can be used to a create a single image from multiple images. The single image needs to be mentioned in the css and
where the individual images are required in the jsp the big image is specified with the offset, which cuts off the unwanted part of the image.

Reference http://css-tricks.com/css-sprites-what-they-are-why-theyre-cool-and-how-to-use-them/

Multiple images before Sprite

#nav li a {background:none no-repeat left center}
#nav li a.item1 {background-image:url('../img/image1.gif')}
#nav li a:hover.item1 {background-image:url('../img/image1_over.gif')}
#nav li a.item2 {background-image:url('../img/image2.gif')

Sungle Image with Sprite & offsets mentioned for each image

#nav li a {background-image:url('../img/image_nav.gif')}
#nav li a.item1 {background-position:0px 0px}
#nav li a:hover.item1 {background-position:0px -72px}
#nav li a.item2 {background-position:0px -143px;}

The website provides interface which can take in images uploaded as zip and convert into a single image.