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

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.

Answer 2

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 3

Webbrowsers identifies cacheable resources by their ETag response header. If it is absent or differs among requests, then the image may be downloaded and stored in cache multiple times. If you (actually, the webserver) supply an unique and the same ETag header for each unique resource, then any decent webbrowser is smart enough to keep one in cache and reuse it as long as its Expires header allows.

Any decent webserver will supply the ETag header automatically for static resources, it is often autogenerated based on a combination of the local filename, the file length and the last modified timestamp. But often they don't add the Expires header, so you need to add it yourself. After judging your post history here at Stackoverflow I safely assume that you're familiar with Apache HTTPD as web server, so I'd suggest to have a look at mod_expires documentation to learn how to configure it yourself to an optimum.

In a nutshell, serve the sprite image along with an ETag and a far future Expires header and it'll be okay.