Spritegrafiken in der Webprogrammierung

1

Auch wenn die Anzahl von benötigten Bildern auf einer Webseite dank neuer Techniken in der Webprogrammierung immer geringer wird, so kann man doch nicht ganz auf den Einsatz von Grafiken verzichten. Zwar können heute zum Beispiel Schatten und abgerundete Ecken problemlos über entsprechende Eigenschaften im Stylesheet erstellt werden, aber bei Logos und Icons kommt kommt man nicht um die Verwendung von Bildern herum. Diese muss der Browser jedoch zunächst vom Server herunterladen, bevor er sie auf der Seite anzeigen kann. Das kostet zum einen viel Zeit, da Bilddateien häufig sehr groß sind, zum anderen müssen viele Anfragen via HTTP-Protokoll an den Server gesendet werden (sogenannte HTTP-Requests), was wiederum einen zusätzlichen Zeitaufwand bedeutet.

Sprite-Grafik mit Hintergrund und Hilfslinien

Um dieses Problem zu umgehen, gibt es eine einfache Lösung, die man Sprite-Grafik nennt. Hierbei werden alle auf der Seite verwendeten Grafiken statt in Einzelbildern in eine einzigee große Bilddatei eingefügt. Wie das aussehen kann, sieht man anhand der Sprite-Grafik, die ich für die Icons in der Fußleiste meines Themes verwende. Der schwarze Hintergrund mit den Streifen wurde nur zur Orientierung eingefügt, in der richtigen Grafik ist der Hintergrund transparent. Solche Grafiken kann man entweder selbst anfertigen oder aus dem Internet herunterladen.

Der Trick liegt nun darin, die Grafik als Hintergrund für die gewünschten Elemente (in der Regel Anchor-Elemente) in CSS zu definieren und ihre Position so zu verändern, dass für jedes Element der richtige Ausschnitt der Sprite-Grafik angezeigt wird.

Im Folgenden möchte ich die Vorgehensweise beim Einsatz von Spritegrafiken anhand einiger einfacher Icons erläutern. Zunächst werden im HTML-Dokument die benötigten <a>-Element im Conteiner mit der id icons erstellt.

<div id="icons">
    <a class="icon1" href="#">Icon1</a>
    <a class="icon2" href="#">Icon2</a>
    <a class="icon3" href="#">Icon3</a>
</div>

Anschließend wird den Anchor-Elementen folgender CSS-Code zugeordnet. Dieser weist den Elementen die Blockeigenschaft zu, sodass für diese eine Höhe und eine Breite von 32 Pixeln festgelegt werden kann. Mittels text-indent wird der Beschriftungstext aus dem sichtbaren Bereich des Browserfensters geschoben, bleibt aber für Screenreader, wie sie z.B. von Sehbehinderten benutzt werden, erkennbar.

#icons a {
    display: inline-block; /*Blockeigenschaft zuweisen*/
    height: 32px;
    width: 32px;
    text-indent: -100%; /*Text aus dem Viewport schieben*/
}

Weiter geht es mit der eigentlichen Spritegrafik. Diese wird über das CSS-Attribut background zugewiesen.

#icons a {
    background-color: #000000; /*Farbe festlegen (schwarz)*/
    background-image: url('pfad/zur/spritegrafik.png'); /*Spritegrafik einfügen*/
    background-repeat: no-repeat; /*Hintergrundgrafik wird einmal eingefügt und nicht wiederholt*/
}

Jetzt erst kommt man zum eigentlichen Trick der Spritegrafik, denn diese wurde zunächst für jedes Element gleichsam fesgelegt und zeigt somit überall den gleichen Ausschnitt der Grafik (bei meiner Grafik wäre das das RSS-Icon). Deshalb verschiebt man die Hintergrundgrafik mittels background-position nun an die gewünschte Stelle, sodass das jeweilge Icon sichtbar wird.

#icons .icon1 {
    background-position: 0 0; /*Ausgangszustand für das erste Icon*/
}
#icons .icon2 {
    background-position: -32px 0; /*Hintergrundgrafik um 32px nach links schieben, um das nächste Icon anzuzeigen*/
}
#icons .icon3 {
    background-position: -64px 0; /*Hintergrundgrafik um 64px nach links schieben, um wiederum das nächste Icon anzuzeigen*/
}

Natürlich kann man auch wie in meinem Fall eine mehrzeilige Spritegrafik erstellen. Hier müsste man dann neben der horizontalen auch die vertikale Verschiebung der Hintergrundgrafik berücksichtigen, welche über den zweiten Wert von background-position erfolgt.

Alles in allem bringt der Einsatz von Spritegrafiken eine deutliche Reduzierung der nötigen HTTP-Anfragen mit sich und erhöht somit die Performance der Webseite. Der Aufwand lohnt sich allerdings erst, wenn man auf seiner Webseite viele Grafiken, z.B. in Form von Social-Meida-Buttons, etc. verwendet.

Hinterlasse eine Antwort

Ihre Email-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert.

*

Kommentare umschalten

1 Kommentar zu "Spritegrafiken in der Webprogrammierung"

  • [...] länger benötigt, bis sie vollständig geladen ist. Zwar gibt es hier die Möglichkeit sogenannte CSS-Sprites zu verwenden, jedoch bleibt das Problem der geringen Flexibilität dadurch [...]