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
andbackground-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.