Packe alle deine grafischen Elemente in eine Datei und positioniere diese als Hintergrund pixelgenau.
Es ist ein Sprite und es hilft dir die Hälfte deiner Bandbreite zu sparen. Echt!
Wir alle sind es gewohnt das Layout einer Website in einzelne Slices und Dateien aufzuteilen und diese auch Stück für Stück in die Seite zu laden. Doch genauer betrachtet bedeutet das mehr Requests (nämlich einen pro Datei), dadurch mehr Traffic und am Ende eventuell mehr Kilobytes. Gerade bei größeren Projekten kann man durch den Gebrauch von Sprites also bares Geld sparen.
Sprites können bei a:hover-Effekten aber auch bei normalen grafischen Elementen eingesetzt werden. Man stelle sich das so vor, daß alle Grafiken einer Seite in einer einzigen Datei (z.B. .gif oder .png) untergebracht, komplett in den Cache des Browsers geladen und dann nur noch über Background-position ausgerichtet werden. So findet natürlich auch nur ein Request pro Besucher statt.
Ein einfaches Beispiel zur Positionierung könnte so aussehen:
#nav li a { background-image:url('../img/image_nav.gif') }
#nav li a.item1 { background-position:0px 0px }
#nav li a:hover.item1 { background-position:0px -72px }
#nav li a.item2 { background-position:0px -143px; }
#nav li a:hover.item2 { background-position:0px -215px; }...
Es ist anfangs ungewohnt seine Grafiken in einem Bildbearbeitungsprogramm auf eine einzige Seite zu bringen und es ist auch etwas Übung und System notwendig die richtigen Grafiken später pixelgenau innerhalb eines Containers zu positionieren, aber der Aufwand wird sich lohnen!
Einen ausführlichen Artikel zu dem Thema gibt es unter:
http://css-tricks.com/css-sprites-what-they-are-why-theyre- cool-and-how-to-use-them/
