Sign Up to our social questions and Answers Engine to ask questions, answer people’s questions, and connect with other people.
Login to our social questions & Answers Engine to ask questions answer people’s questions & connect with other people.
Lost your password? Please enter your email address. You will receive a link and will create a new password via email.
Please briefly explain why you feel this question should be reported.
Please briefly explain why you feel this answer should be reported.
Please briefly explain why you feel this user should be reported.
“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-AgentorAccept.