UPDATE [02-28-12]: It sounds like WebP-Mux is the answer to creating Sprite Stacks, and it should be arriving in the next few months to Chrome!

This is a proof of concept of a PNG Sprite Stack; multiple images embedded in a single image "blah.png". Which are then replaced with the #hash target once the page loads. It is not a great POC, because it makes two requests, once from the IMG tag, and once from XHTTP... also, it requires the browser to support long base64 strings, but it works;

<img src="blah.png#a.png">
<img src="blah.png#b.png">
<img src="blah.png#c.png">

This was brought on by some discussion at the Stuff in my head blog about a new web image format Mister Morris has proposed; allowing you to package multiple icon sizes in one file. This would allow for the developer to render the appropriate sized image, no matter what device display size was being used.

Simurai made an interesting recommendation to store the files in a .ZIP, renamed to .IMG, and allowing the programmer to retrieve the images by simply calling; background-image: url(sprite.img[search.png]);—this provides the following benefits;

• The programmer could easily add .JPGs, .PNGs, .GIFs, .SVGs and other extensions.
• The image name "search.png" is easily referenced (instead of remembering 0,1,..,n).

• Cut down bandwidth;
• The images could use shared color-indexes (like a regular sprite).
• Unlike regular sprites, there would be no "empty-space";
• PNG Sprite (164kb)—regular sprites use space-filling algorithms, that generally dont fill the space entirely.
• PNG Sprite Stack (139kb)—sprite stacks are piled on top of each-other, so there is no-empty space.
• Dramatically cut down on HTTP requests (one single "sprite stack").
• Would reduce processes on the server (threads).
• Would decrease page load-time.
• Easier methods to scale for devices, and use for developers;
• sprite.img#logo-48x48.png
• sprite.img#logo-128x128.png
• sprite.img#logo-256x256.png

The PNG Sprite Stack (139kb) was created by combining multiple files using cat a.png b.png c.png > output.png. All images were optimized with ImageOptim before being combined (if it was optimized afterwards, it would strip out b.png/c.png). There is no optimization of the color indexes after the image was created (this would be built into the format).

The PNG Sprite (164kb) was created using Stitches an MIT licensed library to create Sprites in Javascript. The image was optimized with ImageOptim after being created.

With the right folks backing a project like the one proposed by Mister Morris there would be a lot of potential here, for servers, programmers, and users alike.