CSS Sprites erstellen

von

Kundenprojekt: Tabelle, 40 Produkte die in 40 Zeilen der Tabelle untergebracht wurden und dazu 40 Vorschaubilder. Die Webseite ist fertig, der Kunde zufrieden, und der Browser arbeitet klaglos beim Öffnen der Webseite 40 Zugriffe zum jeweiligen Image ab. Dank schnellem Server und guter Internetanbindung ist die Seite verhältnismäßig schnell aufgebaut. Doch ist dies der richtige Weg? Und was sagt Google Page Speed?

Was sind Sprites?

sprite beispiel
Ein CSS Sprite ist eine einzige Grafik, die viele verschiedene Grafiken enthält. Diese Sammlung wird nur einmal geladen – jede einzelne Grafik steht dann zur Anzeige bereit.

Wer beim Begriff „Sprite“ nur an mit Zucker versetztes Wasser denkt, hat Nachholbedarf. Wem beim Begriff „Sprite“ der Commodore C64 mit seinen Sprite-Grafiken in den Sinn kommt, ist schon ein wenig näher am Thema.  Doch mit den „Geister-Grafiken“, die damals die Spielewelt revolutionierten, hat das CSS-Sprite wenig zu tun. Unter einem CSS-Sprites versteht man eine einziges Grafikelement, das viele einzelne Grafiken enthält; also eine Art Grafiksammlung.

Warum ist der Einsatz von CSS-Sprites sinnvoll?

Wie oben beschrieben hatte ich in einem Kundenprojekt 40 einzelne, jeweils 70x70px große Bilder, die alle auf einer Seite angezeigt werden sollten. Dies bedeutet, dass der Browser beim Aufruf der Seite mindestens 41 Requests, also Zugriffe auf den Quellserver, sendete. Der Webserver wiederum musste 41 einzelne Dateien zum aufrufenden Kunden senden. Dies bedeutet zum einen Last für den Server, aber auch Wartezeit für den aufrufenden Kunden, da ein Browser nur eine begrenzte Anzahl von parallelen Anfragen verarbeiten kann. In meinem Praxisbeispiel habe ich die 40 kleinen Images in zwei Grafiken zu je 20 Teilgrafiken zusammengefasst. Nun hat der Browser nur noch drei Requests (also die eigentliche Seite sowie zwei Sprite-Grafiken) nachzuladen.

Sinkt auch die Dateigröße bei CSS-Sprites?

Nach meiner Erfahrung eher: Nein. Zumeist ist das CSS-Sprite ungefähr so groß wie die Summe der Einzelgrafiken. Wenn viele unterschiedlichen Grafiken (Stil und Farbe) zusammengefasst werden, kann die Dateigröße der gesamten Grafik sogar deutlich größer sein als die Summe der Einzelgrafiken, da eine Reduzierung der Farbpallette bei unterschiedlichen Grafiken in einem Gesamtimage nur schwer erreicht werden kann. Hier kann es sinnvoll sein, Grafiken mit gleicher Farbpallette zu gruppieren.
Beim Einsatz von Sprites geht es nicht um eine weitere Reduktion der Größe der nachzuladenden Grafiken, sondern um die Reduzierung der Serveranfragen. Dies rechtfertigt sogar eine Erhöhung der Imagegröße in der Summe oder das Laden von vielleicht nie anzuzeigenden Images (Hover Effekt)

CSS Sprite erstellen

mit gimp einfach ein sprite erstellen
Mittels Generator kann ein Sprite einfach erstellt werden. Aber auch manuell kann ein Sprite erstellt werden. Hier wird mittels GIMP eine Grafiksammlung generiert. Hilfslinien helfen beim Zusammenbau des Sprites.

Ein CSS Sprite zu erstellen ist kein Hexenwerk. Aber es ist mühselig. Vor allem, wenn die Grafiken in unterschiedlichen Größen vorliegen. Sind es nur eine Handvoll Grafiken jeweils in der gleichen Größe, können die Bilder einfach nacheinander oder untereinander mittels eines Grafikprogrammes wie beispielweise GIMP „zusammengeklebt“ werden.
Im Netz werden zahlreiche Generatoren angeboten, die das Sprite und sogar noch den dazugehörenden CSS-Code erstellen.

CSS-Sprite Beispiele

Beispiel 1: Transparentes Bild
Die folgende Möglichkeit, ein CSS-Sprite anzuzeigen ist recht einfach, zeigt aber eine Schwäche: Es wird ein IMG-Tag verwendet, der zu einem transparenten Pixel linkt. Dies bedeutet einen Request mehr (nicht pro Bild, da der Browser diese Abfrage nur einmal durchführt), also das Image cached. Mir ist in der Praxis jedoch aufgefallen, dass das Sprite-Image jedoch auf mobilen Browsern nicht immer angezeigt wird.
CSS:

img.mysprite {
/* Die Größe des angezeigten Image und Pfadangabe definieren */
	width: 70px;
	height: 70px;
	background-image: url(Pfad_zum_Sprite);
}

/* Das einzelne Image wird positioniert – Ausschnitt aus der Grafiktabelle */
img.sprite1 {
	background-position: 0 0;
}

img.sprite2 {
	background-position: -70px 0;
}

Aufruf im HTML-Code

<img class="mysprite sprite1"  src="img_trans.gif" width="1" height="1" />

Zu beachten ist, dass das „img_trans.gif“ auch wirklich vorhanden sein muss, da sonst der Browser ein fehlerhaftes Bild einblendet. Das transparente Gif wird einfach einmal mit Gimp angelegt (1×1 Pixel, transparent).

Beispiel 2: Hyperlink
Wenn dem Image ein Link mitgegeben werden soll, ist diese Möglichkeit von Vorteil. Allerdings kann der Link auch – wie hier – auf die eigene Seite zeigen.

.sprite {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
	width: 70px;
	height: 70px;
        background: url(Pfad_zum_Image);
}

.wss1 {
    background-position: 0 0;
}

.wss2 {
    background-position: -70px 0;
}

HTML-Aufruf

<a class="sprite wss1" href="#"></a>

Beispiel 3: Wechselndes Sprite Image beim „Überfahren“ des Image mit der Maus
Bilder, die sich ändern, wenn sie mit der Maus „überfahren“ werden, sind schon recht alt, aber immer wieder schön anzusehen. Eventuell ändert sich die Hintergrundfarbe, das Bild verschiebt oder vergrößert sich – all das ist möglich. Bisher hat man solche Effekte per JavaScript via MouseOver generiert. Dank CSS-Sprite wird einfach per Hover ein anderer Teil des Sprite angezeigt:

CSS

#mysprite {
width: 70px;
height: 70px;
text-decoration: none;
display: block;
background: url(PFAD_zum_IMAGE.png) 0 0;
}

# mysprite:hover, # mysprite:active {
background-position: 70px 0;
}

HTML:

<a id="mysprite" href="#"></a>

 

Schreibe einen Kommentar