<p>
Antalet bilder som måste laddas ner till webbläsaren kan reduceras genom att sätta ihop flera bilder till en och välja ut rätt del av bilden med hjälp av CSS.
</p>
<p>
CSS-sprite visas nedan.
</p>
<p>
<img src='http://dbwebb.se/img/dice-faces.jpg' width='196' height='32' alt='CSS-sprite med 6 tärningar' />
</p>
<p>
Fem tärningar visade från ovanstående bild med hjälp av CSS.
</p>
<div class='dice dice-1'></div>
<div class='dice dice-2'></div>
<div class='dice dice-3'></div>
<div class='dice dice-4'></div>
<div class='dice dice-5'></div>
.dice {
width: 32px;
height: 32px;
display: inline-block;
margin: 0 8px 0 0;
padding: 0;
background: url('http://dbwebb.se/img/dice-faces.jpg') no-repeat;
}
.dice-1 { background-position: -160px 0px; }
.dice-2 { background-position: -128px 0px; }
.dice-3 { background-position: -96px 0px; }
.dice-4 { background-position: -64px 0px; }
.dice-5 { background-position: -32px 0px; }
.dice-6 { background-position: 0px 0px; }