When designing web solutions (sites or applications), icons and small images can be used to enhance the user experience (UX) by providing visual cues. The downside of the implementation of these images are (1) added bits to download and (2) an increase in server hits to pull the extra images — and the resulting latency due to downloading each item separately.
This article illustrates an idea wherein you combine your icons into a single file and use CSS to show only the area containing the image that you want. This method has been used for some time now with CSS image-rollovers (again, reducing the total server-hits), but now has another use. Wahoo!
This accomplishes two things:
(1) it reduces overall server-hits, which sounds like a selfish reason, but it’s not entirely so. The less objects your server has to serve, the faster it is. But more importantly, the fewer objects your page requests (.html, .aspx, .png, .css, .js, etc.) the faster it will load.
(2) By combining images with similar color pallets into one image, you only need load the pallet information once (rather than once for each image). Take a look at the math and I think you’ll see why this also reduces the load time.
In the article the author uses 6 icons which are 574 bytes, 571 bytes, 583 bytes, 569 bytes, 572 bytes, and 574 bytes (totaling 3,443 bytes). When combined into one file the number of server-hits is reduced from 6 to 1 and the file size is reduced from 3,443 bytes to 1,802 bytes. (Of course, you should also consider the overhead that the additional CSS rules make, but this is relatively marginal.)
Ironically, this is strangely similar to how icons are used in desktop icon libraries (.ico and .dll files).
Related:
