lucy24 - 7:32 am on Oct 15, 2013 (gmt 0)
I'll have to go back and look at what the difference is between a sprite (as used in a Web page) and say a normal PNG image. I know about sprites as a CGI animator, where a sprite is usually just a small, low-res, low-depth 2D image which, because of its small file size, can be processed more swiftly for rendering in a 3D enviornment where action is taking place -- can't imagine why something like a sprite would be used in a Web page, which is usually a static, 2D world.
Well, I did say I have no idea why they're called sprites ;) It has nothing to do with file format, just how they're used in the html.
Short version: Shovel all your little bitty images into a single graphics file. Then, instead of displaying them via <img src> tags, make each image into the background for a named class. In each different class, the background position is offset by some number (horizontal and/or vertical, depending purely on what your graphics file looks like).
Result: each class shows a different picture, but the user's browser only has to make one request. You'll see it most often with small rectangular images that come in sets, such as a series of social-media icons. Or, in your case, all those different icons for whatever it is you want to show on your map.
This is all CSS2, no cutting-edge CSS3 stuff involved. Well, presumably it doesn't work in MSIE6, but that's not anything we didn't already know.