CSS sprites are used for combining multiple images in a single larger image. They are commonly used for representing icons that are used in the user interfaces. The main advantages of using sprites are:

• It reduces the number of HTTP requests to get data of multiple images as they are acquired only by sending a single request.
• It helps in downloading assets in advance that help display icons or images upon hover or other pseudo-states.
• When there are multiple images, the BROWSER makes separate calls to get the image for each of them. Using sprites, the images are combined in one and we can just call for that image using one call.

Consider an example where our APPLICATION requires 3 images as shown below (Without Sprites Section). If we are trying to load the images independently, we require 3 different HTTP Requests to get the data. But if we have CSS Sprites where all 3 images are combines into 1 separated by some spaces, then we require only 1 HTTP Request.

We can access each image from the sprite by accessing the positioning properties as shown in the below code:

In the above code, we are trying to access each element - house, previous and next icon - from the sprite file by using the left, width properties. The image is displayed in the img section by means of the background property. Do note that the source of the image (src attribute of the img tag) is just one file which is the spriteFile.gif and depending on the rules SPECIFIED in the id selectors, the images are loaded ACCORDINGLY.