Image sprites
Introduction
For the most part, you aren’t going to be using these because we have SVG now. But having the history of it – and examples will be important. And there are lots of interesting tricks you can do with them – so, here we go.
Making a simple sprite sheet
Here’s a sprite from the best video game ever.
Icon sprite sheets
If you had to send requests for hundreds of images on the first page load, that wouldn’t be very great! So: One image. One HTTP request. All the icons. It works. But, then you have to use the CSS background-position.
See the Pen yLvLbgG by perpetual.education (@perpetual-education) on CodePen.
SVG "sprite"
See the Pen SVG "sprite" by perpetual.education (@perpetual-education) on CodePen.