Sprite CSS

How to reduce number of calls If your webpage is having many images.
eg: If your webpage is having 20 images in one page your page will make 20 calls to display your images instead of making 20 calls and loading 20 individual images you can make single call to a single file and save your resources.This can be done using sprite css
In this process all images are made into a single image and a sprite image is created and each image can be viewed individually based on the image position in css
when you create a sprite image the css for that sprite image will be as follows

you may think that creating a sprite image is only a designers work and it involves photoshop and etc.. but with online editor this work was made easy
a person with no knowledge on designing or css can prepare a  sprite image and sprite css using the following link:

http://spritepad.wearekiss.com/#

Here once you open this link you will be showing a text area where you can just drag and drop your images and it will automatically generate
css for each image

just download the file extract it and place the image  file in a folder and provide the image path in the below background-image url and appply this style in the page where you want to display the image
Apply the particular image to the div class and the done
your image will be displayed.Using this technique you can reduce the number of call made by your web page and increase performance

here is a single image file containing all the images.

You can see a sample in My jsfiddle.

https://jsfiddle.net/anushach/qtkcaa6h/