One Image to Rule Them All: why Facebook and AddThis do that?

Question

Possible Duplicate:
Single image file to store all the little images on a page

Hey,

Facebook are saving all the graphics on their page in a single image. So does AddThis. Why do they do that? How can I use the same techniques and cut the images with JavaScript?

Answer 1

They do this so they can save connection overhead (otherwise browsers would open up a connection for every single image ~ if uncached).

You don't need javascript to cut up the image: use standard CSS positioning to show specific parts of the image.

Answer 2

they are called CSS Sprites. It reduces the number of requests made to load the page, thus decreasing load time. The site can just set the background of something to be a small portion of the image.