Combining images into as few files as possible using CSS sprites reduces the number of round-trips and delays in downloading other resources, reduces request overhead, and can reduce the total number of bytes downloaded by a web page.

Example:

If you have six images being used by your main webpage design and the browser has to download them individually. If they were combined into just one image, you could reduce the page speed dramatically. This reduces the round trips required to display your page, making your site faster. Instead of downloading six images, your webpage would now only have to download one.

Most webpages use several small images in their design. Background images, corner images, icons, menu items, etc. These tiny images really add up when you look at it from the standpoint of page speed. Each and every image must be downloaded, which means the web browser has to ask the server for it, the server has to send it, and then the browser has to display it. If this were only happening with one or two images, it would be fine, but as more and more images are being loaded, the worse it is for your page speed.

The solution for this scenario is called image sprites, which combine several small images into one image so that the web page can display significantly faster.