Question

Explain CSS sprites, and how you would implement them on a page or site.

Answer 1

CSS sprites combine multiple images into one single larger image. It is commonly used technique for icons (Gmail uses it).

• Use a sprite generator that packs multiple images into one and generate the appropriate CSS for it.
• Each image would have a corresponding CSS class with background-image, background-position and background-size properties defined.
• To use that image, add the corresponding class to your element.

Advantages:

• Reduce the number of HTTP requests for multiple images (only one single request is required per spritesheet). But with HTTP2, loading multiple images is no longer much of an issue.
• Advance downloading of assets that won’t be downloaded until needed, such as images that only appear upon :hover pseudo-states. Blinking wouldn't be seen.