The issue here is to decrease the number of requests the browser makes to the server and therefore optimize page load time and decrease user response time.

Performance

This improves performance because browsers limit the amount of simultaneous downloads , so loading many images would be queued one after the other. Think of a downloads manager with 100 items in the queue and a limit of only 3 downloads at the same time.

Consider the graph generated in a Yahoo! search :

Note that scripts and styles can also have the same effect, so anyone who cares about putting together the images in one will also gather all the scripts and styles into unified and minified files.

And even if all images and other static items are in cache , the browser can still check with certain frequency, depending on the HTTP header of the site, if there has been a modification. For this, he will have to make additional requests.

Scalability

Another factor that large sites consider is scalability. They do not want their browser to make dozens or hundreds of small requests because this decreases the number of people they can handle at the same time.

CDN Costs

The number of hits is also an additional concern on large sites that use CDN because they pay per request. A CDN is like a cache external to your company responsible for delivering static content quickly and reliably. The problem is that each access to the CDN will cost you a few cents, so it's better than 100 access per user access. Facebook, for example, created a system called Haystack to store its billions of images and a major concern was to decrease the use of CND to distribute the images.

Side effects

In contrast, merging images, scripts, and styles increases the complexity and potential issues in an application's deploy . Many specific optimizations have this kind of effect.

I have read some reports that zoom of some browsers may degrade the solution with sprites , but may be just a bad implementation.

This practice of merging images into one is called sprite .

The advantage is that you save requests to the server. For small sites this does not make much difference, but for large sites, whose number of hits is very high, it does.

That is, instead of making 10 requests to the server to load several icozinhos, you can do one and load all the icons at once.

Consequently, having a less busy server, you will have a site that will respond better to users.

Example: The OS itself uses sprites :

To complement partner responses, you can use this tool here - > link to help you make a sprite if you're having difficulty, it's pretty easy, just select the region of the image that contains a certain icon or some figure, and it generates a class css with the respective position that at last is only to call that class in the html and it is done.

Note: Depending on the element in which you assign this class, you will have to put a display: block in it (in case you try to assign it to an inline element).

Hug.