1
HTML/CSSAdvanced#css#performance
HTML/CSSIntermediate#css#performance#sprites
What are CSS sprites and why were/are they used?
CSS sprites combine multiple small images into one larger image file, and background-position is used to display only the needed portion. This reduces the number of HTTP requests, which mattered more before HTTP/2 multiplexing but is still useful for icon sets.
Example
.icon { background-image: url('sprite.png'); width: 32px; height: 32px; }
.icon-home { background-position: 0 0; }
.icon-search { background-position: -32px 0; }