How important is spriting for performance on a high traffic website?

Question

Some high traffic sites seem to have almost crazy sprited images with almost everything in one big image.

How much of a difference will this make for high traffic sites vs the difficulty in maintenance long term?

I know this may be a bit of a 'how long is a piece of string' question but I am interested to understand any experience of performance gains that people have had from such an exercise.

Answer 1

I did some numbers a few years ago for the smallest sized .GIF possible - 43 bytes. To send that 1x1 image, there was 246 bytes of HTTP protocol sent back with it, to say nothing of at least that much for the original request (more if there was also a cookie). There's also the TCP/IP packet overhead. Beyond all of that though is the round-trip time. The speed of light is still finite, and it needs to be factored in, especially for the overheads of multiple requests.

The short version is, less items downloaded equals faster site. Even if the final sprite image is larger than all the images combined, you still win substantially by reducing the number of sets of overheads and round-trips.

Answer 2

By using sprites you reduce the amount or http requests from the server.

Images make up the vast majority of http requests and Yahoo reckon about 80% of the time it takes to download the content of page is wasted with unnecessary http requests.

If you took something a simple as the amazon.com homepage, there could potentially be over 50 images that would be downloaded every time a user(without stored cache) hits their homepage.

If you think Amazon must have millions of user hitting their site every day.

By creating a sprite from all of the images, the user only has to download one file instead of the fifty.

Reducing the response time of the server and improving the result for the end user.