CSS Sprites

CSS Sprite is simply an image collection made into a single image. Combining small images into one transparent image and then referencing the smaller images where they displayed . using CSS Sprite increases the page load speed and decreases page load time.

A web page can take long time to load by using the many images on the server then the server generates the many server request, but with the using of sprites it reduces the many server requests and save bandwidth

The ultimate aim of the CSS image sprite is to reduce the number HTTP requests while a website is being loaded. Multiple images are arranged horizontally or vertically and then only one image from them is displayed at one place.

 

CSS positioning properties are used to display only one image. This is great technique to reduce the HTTP requests and improve the website performance but most of the web designers or websites using sprites today.