CSS Sprites avoids the overhead caused by the headers sent and received for every image a browser has to load and the lost time caused by browser simultaneous connection limits (and yes, this is a real problem). Below, a stripe Google uses for their search website.
nav_logo13.png

Now that's very good for static content like your layout, but how to create stripes for dynamic content?

First: don't change the mark-up. This would destroy important content information. Just make your images available as it would be without stripes. And for the magic, JavaScript at the client-side.

On body load you can get the list of images you want to get with stripes and stop them from loading by the default way.

Just something important: try to keep it limited to the images at your absolute control.

You can either build the CSS stripes on demand or have it built at content-creation time.

For an implementation, you can create a pseudo-unique hash out of the image list you have and try to get the sprite for them. This can be more suitable for when creating the sprite on-demand.

Using this implementation, on demand, if the sprite is not found I'd resume to loading the images normally and make a POST request (reason why post) with the necessary information needed to create it and make it available for future requests.

It just stroke me that you'll have to resize background, if you have to (do you really?). But really, how many times do you really put false width & height data on your image mark-up? So it's a minor issue, if a issue at all.

The on-demand method can provide a faster implementation, but maybe building at content-generation time is wiser for nowadays mobile world limited computing gadgets (just maybe).

In either way, a CSS file to be applied to the document should be returned with what would be basically some image positioning rules to show part of an entire image (the sprite) that will be loaded only once (despite being linked in several parts of this file).

Where can this be useful
News websites full of images and photography websites are two places I can think of. For example, I just loaded my New York City set on Flickr and it took some seconds to load them all. If not enough, it loaded them in a not natural order: instead of opening from the ones on the top to the ones on the bottom, it opened several here, several there, until everything loaded. Now imagine that on a photography blog with dozens of pictures on it. You have to wait a longer time to start seeing the pictures on there because of this behavior that could be avoided with such a solution.

Learn about stripes on:
CSS Sprites: Image Slicing’s Kiss of Death