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.
You're on a small screen! Some modules like CodePen examples will behave differently here. You'll need to toggle through their tabs to see all the code. For the best experience, consider using a bigger screen.
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 HTML cheatsheet 1 / display types by perpetual.education (@perpetual-education) on CodePen.
SVG "sprite"
See the Pen HTML cheatsheet 1 / display types by perpetual.education (@perpetual-education) on CodePen.