Question

Simple. When a HTML page contains a lot of small images it will take some time to have it completely rendered, especially since each file needs to be requested separately. For example, if you have 500 32×32 avatar images which you want to display, then the browser needs to do 500 requests with 500 headers resulting in 500 responses also with headers. Thus, a lot of traffic.
To reduce the amount of traffic, I would think it would be better to send all files as a single request/response and have some client script do the splitting of this file into separate images, to be placed wherever needed. Thus, the browser executes a script, the script requests for the image package, the server returns the package and then the script would put those images in it’s proper locations. Thus, one request/response instead of 500 requests/responses.
Has something similar been created already? If so, by whom?

Answer 1

It is called css-sprites, basically you have a big image with all your images in a grid pattern and css rules to get the one you want.

Check

http://spritegen.website-performance.org/

http://csssprites.com/