HTML and CSS Reference
Using image sprites
Network requests take a long time to make for each resource. To make these smal-
ler, you could combine multiple image files into one single image file that needs to
be requested once and be cached for a very long time so that the page loads signi-
ficantly faster. This is especially useful if your page is going to be viewed on devices
with very low bandwidth connections to the Internet.
This means, you combine multiple images in one large image and use the CSS back-
ground property on all selectors where these images would be used. Let us convert
all our artist images into a big sprite and replace the image elements into background
The following is our final sprite:
Let us replace our image elements in index.html , like the following one:
<img width="100" height="100"
class="t-media__aside t-image--artist" src="img/
With the following: