In my travels I often examine the rendered HTML, CSS, and Javascript source of the sites I visit. There is one technique I have seen used all over that still mystifies me. I often find images like this one:
(source: cloudfront.net)
It is filled with icons, yet the usage of this image on the site limits the image to only one of the icons within the large image at a time. They essentially appear to use the same image for a large number of icons.
If I understand correctly then this would greatly help when it comes to the loading and caching of images because it is a single image that gets broken up somehow. How does this work? Is this done using Javascript?
The idea is called CSS Sprites. Search on that, but basically your intuition about how/why it works is correct!
See this SO: css icon images or icon image?
jQuery UI is an example of a library that uses this to excellent effect also.