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
![](https://perpetual.education/wp-content/uploads/pacman-spritesheet.png)
![](https://perpetual.education/wp-content/uploads/link-sprite.png)
Here’s a sprite from the best video game ever.
Icon sprite sheets
![](https://perpetual.education/wp-content/uploads/corperate-icon-sprite-sheets.jpg)
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.
Sometimes… I think we just need an official CodePen module —
because yeah.
You have to go in – and change the width and stuff … (or at least I have been doing that – and it’s going to come back to haunt us. And really – should these even be CodePens? We could – use something else that was more embedded – and yeah… – something to think about.
Challenge: make the camera icon in the CodePen work.
Then – this could lead to more sprite-like option for icons and stuff