Guru 2.0 › 3.0

Der Begriff “css-Sprites” taucht seit neuestem immer wieder im Web auf. Es ist eine interessante, aber auch nicht oft genutzte Technik. Warum geht es dabei eigentlich?
Bei css-Sprites geht es prinzipiell darum, dass die http-Aufrufe beim Laden der webSite verringert werden. Eigentlich ist dies mit der heutigen Bandbreite ja kein Problem mehr, trotzdem sollte man darüber nachdenken. Denn gerade aufrufstarke Seiten erfahren durch die vielen Anfrufe eine starke Serverbelastung.

css-Sprite Tableau von Amazon

CSS-Sprites sind keine neue Technik, sondern eher eine logische Überlegung. Dabei werden die Einzelgrafiken zu einem grossen Tableau zusammengefasst und mit einer passenden css-Anweisung wird die entsprechende Detailgrafik in der html-Seite angezeigt. Eingesetzt wird diese Technik von vielen großen Seiten wie XING, Amazon, Yahoo oder Google.

Einsatzbereiche

Man benutzt die Sprites dort, wo es um feste graphische Bestandteile geht. Also der Content selbst ist oft uninteressant, aber Navigation, wiederkehrende Seitenelemente (Logos, Linien, Rahmen, …) sind bestens geeignet, für diese Technik.

Besonders bei der Navigation kann man mit dem Pseudoselektor :hover einen Vorteil erlangen. Denn bei diesem Effekt benötigt man ja zwei Grafiken im Cache des Browser. Ist die zweite Grafik noch nicht geladen verpufft der hübsche Effekt. Mit einem Sprite-Tableau sind natürlich schon alle Bilder vorhanden. Bisher hat man sich mit JavaScript beholfen, um die fehlenden Grafiken bereits beim Laden der Seite mit zu senden. Oder der Hover-Effekt wurde einfach verzögert dargestellt, da das Bild erst geladen wurde, wenn der Anwender mit der Maus über das Navigationselement gefahren ist.

Ladezeiten

Kommt es bei einer großen Grafik nicht zu verzögerten Ladezeiten? Nicht wenn das Tableau optimiert ist. Also das richtige Grafikformat und die passende Kompression muss schon verwendet werden. Weiters verliert man auch den Overhead der vielfachen http-Aufrufe für die kleinen Grafiken. Daher kann das Tableau auch ein wenig größer sein. Das oben gezeigt Beispiel von Amazon hat einen Payload von gerade 76 KByte, also nicht so schlimm für die gesamte Navigation.

Bilderklau

Weiters ist es mit dieser Technik für die Script-Kiddies schwieriger die Bilder zu klauen. Ein einfaches “Speichern unter” oder Drag ‘n’ Drop ist damit nicht mehr möglich. Einen Schutz bietet es natürlich nicht. Denn der html-Quelltext liegt noch immer offen und das Tableau kann dadurch abgerufen werden. Aber dann muss man sich noch die einzelnen Grafiken suchen und ausschneiden. Diese ist für die “Gelegenheits-Benutzer” schon eine Hürde.

Welche Vorteile hat man mit css-Sprites?

• verkürzte Ladezeiten
• weniger http-Aufrufe am Server
• schneller verfügbare Hover-Effekte
• kein Einsatz von JavaScript
• weniger Einzelgrafiken bedeutet Änderungen an einer zentralen Datei

Gibt es Nachteile der Technik?

• ältere Browser könnten die css-Einstellungen ignorieren

Verwendung dieser Technik

1. Das Tableau

Sprite-Tableau (Auszug) von AOL

Zu erst muss man ein Tableau aller verwendeten Grafiken erstellen. Dazu bietet sich entweder die Handarbeit mit einem Grafikprogramm an oder man verwendet einen Sprite-Generator wie zum Beispeil den von Project Fondue. Dieser erzeugt nach dem Hochladen aller Bilder auch gleich ein passendes css. Wobei ich jedoch – bei einfachen Sprite-Tableaus – zur guten, alten Handarbeit tendiere.

Als Beispiel verwende ich hier einen Ausschnitt des Sprite-Tableaus von AOL. Diese Grafik ist ziemlich praktisch, da alle Bilder in gleichem Abstand und vertikal untereinander angeordnet sind. Dadurch ist es spääter leichert, die einzelnen Bilder mit einem css-Befehl anzusprechen. Man soll also schon vorher nachdenken, wie man sich später das Leben leichter machen kann.

2. Die css-Datei

Nun benötigen wir eine  passende css-Definition. Zuerst müssen alle notwendigen Navigationselement mit der Hintergrundgrafik (unser Sprite Tableau) versorgt werden.

1
2
3
4
5

.nav1, .nav2, .nav3, .nav4, .nav5, .nav6, .nav7, .nav8  {
	background:transparent url("aolSprite.png") no-repeat 4px 0;
	float: left;
	padding: 10px;
}

Nun würde aber auf allen acht Element die gesamte Grafik sichtbar sein. Daher müssen wir das css noch ein wenig anpassen:

1
2
3
4
5
6
7
8

.nav1, .nav2, .nav3, .nav4, .nav5, .nav6, .nav7, .nav8  {
	background:transparent url("aolSprite.png") no-repeat 4px 0;
	float: left;
	padding: 10px;
	height: 10px;
	width: 10px;
	overflow: hidden;
}

Jetzt müssen wir für jedes Element die passende Grafik anzeigen.

1
2
3
4
5
6
7
8

.nav1 {	background-position: 4px 8px;}
.nav2 {	background-position: 4px -32px;}
.nav3 {	background-position: 4px -70px;}
.nav4 {	background-position: 4px -108px;}
.nav5 {	background-position: 4px -146px;}
.nav6 {	background-position: 4px -184px;}
.nav7 {	background-position: 4px -222px;}
.nav8 {	background-position: 4px -260px;}

Durch das verschieben der Hintergrundposition wird nur mehr der Ausschnitt des Tabelaus angezeigt, der für das Element notwendig ist. Alle restlichen Teile der Grafik liegen ausserhalb des DIV-Tags und werden durch das Attribut overflow: hidden und die Definition der Größe und Höhe des DIV-Tags ausgeblendet.

3. HTML-Code

Der HTML-Code ist relativ leicht, da nur mehr die Klassen zugewiesen werden müssen.

1
2
3
4
5
6
7
8

<div class="nav1">&nbsp;</div>
<div class="nav2">&nbsp;</div>
<div class="nav3">&nbsp;</div>
<div class="nav4">&nbsp;</div>
<div class="nav5">&nbsp;</div>
<div class="nav6">&nbsp;</div>
<div class="nav7">&nbsp;</div>
<div class="nav8">&nbsp;</div>

weiterführende Links

• Dr. Web: css-Sprites Quellensammlung
• Project Fondue: css-Sprite Generator
• phpPerformance: css-Sprites
• webSite Optimization: css-Sprites [EN]
• Alistapart: Image Slicing’s Kiss of Death [EN]
• css-Tricks: What They Are, Why They’re Cool, and How To Use Them [EN]
  
• PeachPit: What are CSS-Sprites? [EN]
• Magnet: All about css-Sprites and a faster Web [EN]

ähnliche Posts:

• Sternenhimmel – 3D Hintergrund mit Parallax mit reinem CSS
• Daily Code Poem #7
• Ein wenig Dynamik mit Scriptaculous
• Daily Code Poem #25
• bessere Links = bessere Usability

Dieser Eintrag wurde

• am Sonntag, 19. April 2009 um 11:36 erstellt und wurde unter CSS, Tutorials zum mehr Wissen abgelegt.
• Der Post besitzt diese Tags: CSS, Grafiken, Navigation, Sprites, Tutorial
• Du kannst alle Antworten darauf mit dem RSS 2.0 Feed verfolgen.
• Du kannst eine Antwort schreiben.
• Du kannst einen TrackBack von Deinem eigenen Blog setzen.
•  drucken

Der Artikel hat Dir geholfen?

Warum spendierst Du mir nicht einen Kaffee?