"Simple" question.
Is it better to use large spritesheets for site elements than using multiple images?
I mean,do the additional CSS image manipulation (background positioning a large image and cropping it) compensate for the fewer HTTP image requests?
The number of concurrent HTTP/1 connections to a host is limited to about 6. Assuming a latency of 100ms, the about 60 images in the posted sprite would take at least a whole second to download (probably more, since HTTP requests and answers need to be generated and parsed).
Since the size of the sprite image is about the same as the individual sprites and image processing is blazingly fast (I'd estimate well below <100 ms for all 60 images together), using sprites saves amazon about 900ms of load time, a noticeable impact - and that's in theory, without accounting for the huge overhead of having to serve 60x the number of requests they would have to otherwise.
In summary, use sprites for logos and small images over HTTP/1.
HTTP/2 is designed so that workarounds are no longer needed. Most importantly, multiple requests can be served concurrently over the same TCP connection. Additionally, header compression is designed to compress redundant headers such as User-Agent or Accept.
It is generally better to use sprites that many small images.
Every image creates additional http request and that needs time. Especially with HTTP 1.0 every new request need to wait for previous response.
As for very big pictures - it mostly depends on ratio of time needed to transfer one image of a set to the overhead in time coming from HTTP protocol. If the overhead is not big and you feel that such big images can slow down your app - you can use multiple images, if it's relevant - use css sprites.
Yes, for any reasonable image size, it will be faster.
Drawing part of a larger image is not slower than drawing a whole smaller image. It's not like the browser is drawing the whole image and removing parts that are not showing, it's only drawing the part of the image that is showing. It's just copying pixels from memory, and it matters very little if the pixels are close together in memory or spread apart in a larger image.
A larger image takes longer to load that a small image, so smaller images would start showing up faster, but the large image loads a lot faster than all the small images together. Even if you have to wait somewhat longer before the images start showing up, all images show up at once instead of popping up one at a time.
Sure, it is better. The browser will make only request for the file, compared to many request to more files.
Use sprites for many little images that tend to repeat in your design(icons for ex). For large photos it's not a good idea, in case of a photo gallery.
来源：https://stackoverflow.com/questions/6972758/multiple-images-vs-spritesheet