CSS - Advantages of single image file vs multiple files

Question

I have noticed that alot of sites now, have all of their images in single files are then use background-position to offset the rectangle which is shown on the screen.

Is this for performance reasons? If so why?

Answer 1

This is called CSS sprites. It's used for several reasons:

• Fewer requests to the server.

• Slightly smaller file size, as a large image is somewhat smaller than separate images.

• Preloading images, so that for example an image used for a hover effect is already loaded as it uses the same image as the non-hover state.

The drawback is of course that it's more work to manage and update images.