Image sprites
Last updated: October 7, 2024
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 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.