CSS - Benefits of a single image file and multiple files

Question

I noticed that many sites now have all of their images in single files, then use the background-position to offset the rectangle that appears on the screen.

Is it for performance reasons? If so, why?

Answer 1

Is it for performance reasons? If so, why?

• A single request means fewer concurrent connections to the server, which means that other things can be downloaded. A TCP connection also requires resources on the server. Least of all connections for each user means that more users can use it right away (if your performance is really connected).

• A single sprite usually has a slightly smaller file size than a bunch of individual images, although this is not guaranteed, and different formats change.

• All states of objects are loaded immediately, that is, the interaction is much more direct than if you loaded another state on demand.

• Even if part of the sprite is not used on the current page, loading it (and browser caching) will speed up the browser for the user later when the user views other pages.

Sprites don’t fix everything, and you probably shouldn’t treat it too anally until you predict heavy traffic and / or switch to CDN, where you will pay for the request.

Of course, if you have a whole food of 16x16 icons to be used in one place, you could deal with them very quickly. I find that I have several sprites for specific things that actually make CSS a lot cleaner.

Answer 2

This is called CSS sprites. It was used for several reasons:

• Fewer server requests.

• Slightly smaller file size, as the large image is slightly smaller than the individual images.

• Preloading the images so that, for example, the image used for the freezing effect is already loaded, because it uses the same image as the non-freezing state.

The disadvantage, of course, is that it works more for managing and updating images.

Answer 3

Compression on one large image is often more efficient than compression on several similar images.

More importantly, HTTP requests are relatively expensive.

Answer 4

And one more thing that @david did not talk about is that uploading a few small images will take a lot of time to the server, instead upload one large image at a time (request) and manipulate it as your choice

Answer 5

You can browse Yahoo’s excellent “Best Practices to Speed ​​Up Your Website”: http://developer.yahoo.com/performance/rules.html#opt_sprites