serving lots of small images as one file

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 32x32 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 开发者_如何学Pythonseparate 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?

As an alternative to css-sprites (for completeness' sake), and if you don't need IE7 support, you can embed images into the HTML as data:// URIs. You'll need to BASE64-encode them, but on your average 30-byte GIF bullet, it might not be so bad.

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/