CSS-Sprites sind eine sehr gute Möglichkeit die Größe und Ladezeit einer Website erheblich zu verringern.
Angenommen man hat 10 Grafiken auf einer Seite die jeweils 2 KB groß sind, so bedeutet dies eine Gesamtgröße von 20 kb für die Grafiken und 10 HTTP Requests.
Wenn man nun alle Grafiken in einer einzigen Grafik vereint kommt man auf etwa 15 KB bei nur einem HTTP Request. Das Ganze hört sich kompliziert an ist aber sehr simpel und effektiv.
Als erstes muss man alle relevanten Grafiken z.B. einer Navigation, in ein großes Bild packen und soweit komprimieren, dass man das richtige Maß an Qualität erhält.
Daraufhin kann man sich an das CSS machen. In diesem haben wir die Möglichkeit die Position einer Hintergrundgrafik anzugeben.
Heißt für eine Navigation in dieser Form:

<ul id="navigation">
<li><a href="#" class="link1">link 1</a></li>
<li><a href="#" class="link2">link 2</a></li>
<li><a href="#" class="link3">link 3</a></li>
</ul>

dass wir den einzelnen Klassen jeweils das gleiche Bild aber mit unterschiedlicher Position der Grafik zuordnen können. Das passsende Stylesheet sieht dann so aus

#navigation { background: url(test-3.jpg); }
#navigation li { list-style: none; }
#navigation li, #navigation a { display: block; }
.link1 a:hover { background: transparent url(test-3.jpg) 0 -200px no-repeat;}
.link2 a:hover { background: transparent url(test-3.jpg) -96px -200px no-repeat;}
.link3 a:hover { background: transparent url(test-3.jpg) -172px -200px no-repeat;}

Und schon würde die Navigation in der gewünschten Position der Grafik hovern.