Quick question regarding CSS sprites and memory usage

Question

Well, it's more to do with images and memory in general. If I use the same image multiple times on a page, will each image be consolidated in memory? Or will each image use a separate amount of memory?

I'm concerned about this because I'm building a skinning system for a Windows Desktop Gadget, and I'm looking at spriting the images in the default skin so that I can keep the file system looking clean. At the same time I want to try and keep the memory footprint to a minimum. If I end up with a single file containing 100 images and re-use that image 100 times across the gadget I don't want to have performance issues.

Cheers.

Answer 1

What about testing it? Create a simple application with and without spriting, and monitor your windows memory to see which approach is better.

I'm telling you to test it because of this interesting post from Vladimir, even endorsed by Mozilla "use sprites wisely" entry:

(...) where this image is used as a sprite. Note that this is a 1299x15,000 PNG. It compresses quite well — the actual download size is around 26K - but browsers don't render compressed image data. When this image is downloaded and decompressed, it will use almost 75MB in memory (1299 * 15000 * 4).

(At the end of Vladimir's post there are some other great references to check)

Since I don't know how Windows renders it's gadgets (and if it's not going to handle compressed image data), it's dificult IMHO to say exactly which approach is better without testing.

EDIT: The official Windows Desktop blog (not updated since 2007) says the HTML runtime used for Windows Gadgets is MSHTML, so I think a test is really needed to know how your application would handle the CSS sprites.

However, if you read some of the official Windows Desktop Gadgets and Windows sidebar documentation, there's an interesting thing about your decision to not use css sprites, in the The GIMAGE Protocol section:

This protocol is useful for adding images to the gadget DOM more efficiently than the standard HTML tag. This efficiency results from improved thumbnail handling and image caching (it will attempt to use thumbnails from the Windows cache if the requested size is smaller than 256 pixels by 256 pixels) when compared with requesting an image using the file:// or http:// protocols. An added benefit of the gimage protocol is that any file other than a standard image file can be specified as a source, and the icon associated with that file's type is displayed.

I would try to use this protocol instead of CSS sprites and do some testing too.

If none of this information would help you, I would try to ask at Windows Desktop Gadgets official forums.

Good luck!

Answer 2

The image will show up one time in the cache (as long as the url is the same and there's no query string appended to the file name). Spriting is the way to go.