Blog zu den Themen Webentwicklung, technisches Online Marketing und Suchmaschinenoptimierung

Website Speed: Bilder & Icons durch Sprites optimieren

In der Welt der Webentwickler ist es eines der Trending Topics dieses Jahres: Website Speed. Kaum ein anderes Thema erlebt in Zeiten der zunehmenden Breidband-Zugänge eine so starke Renaissance wie die Optimierung von Webseiten auf eine kürzere Ladezeit. Der Anstoß zum Speed-Wahn kam dabei aus einer ganz anderen Ecke: Im Frühling 2010 entschied sich Google dafür, Page Speed zum Rankingfaktor zu machen. Und obwohl laut eigener Aussage nur ein Bruchteil der SERPS betroffen sind, ist das Thema Website Speed in den Köpfen vieler Suchmaschinenoptimierer (und somit auch Webentwickler) angekommen.

Außerdem ist das Thema auch auf Ebene der Webseiten-Besucher höchst interessant. Aktuelle Studien beweisen eindrucksvoll, dass Online-Shop-Betreiber und Affiliates ihrer Ladegeschwindigkeit wenigstens eines kurzen Blickes würdigen sollten. So gab der Webperformance-Spezialist gomez.com in einer Untersuchung vom Juni 2010 an, dass zwei Drittel der Befragten in der letzten Woche auf einer langsamen Webseite gesurft hätten. Über ein Drittel stellte fest, sie würden nur ungern zur langsamen Webseite zurückkehren und immerhin 27% gaben sogar an, sie hätten lieber auf die Webseite eines Mitbewerbers gewechselt. In einem Online-Shop mittlerer Größe kommt man mit diesen Prozenten schnell auf einen monatlichen Umsatzverlust in fünfstelliger Höhe.

Artikelserie: Website Speed

Da ich in den letzten Wochen in fast allen sozialen Netzwerken einen großen Bedarf an diesem Thema aufgefasst habe und die Nachfrage nach Anleitungen groß war, habe ich mich kurzum entschlossen, mit einer Artikelserie zum Thema Website Speed zu starten. Aufgegriffen werden in jedem Artikel mal mehr, mal weniger schwierige Vorgänge, mit denen sich die Ladegeschwindigkeit eurer Webseite Stück für Stück erhöhen lässt. Anfangen möchte ich heute mit der Optimierung von Bildern, Icons und anderen Grafiken durch den Einsatz von Sprites.

Was sind Sprites?

Da ich praktisches Lernen bevorzuge möchte ich euren Blick auf meine Blog-Sidebar lenken. Dort findet ihr unter dem „Wer schreibt hier„-Text fünf Icons: Google+, Twitter, Facebook, XING und Skype. Fahrt ihr mit der Maus über ein Icon, öffnet sich eine zweite Hover-Variante. Somit kommen wir auf insgesamt zehn verschiedene Einzelgrafiken, die vom Server geladen werden müssen.

Natürlich könnten wir jetzt zehn einzelne Bilder auf den Server laden und an der jeweiligen Stelle einbinden – oder wir setzen Sprites ein. Der Hintergrund-Gedanke ist, alle zehn Grafiken auf einer einzigen Bilddatei nebeneinander zu platzieren.

Warum sind Sprites sinnvoll?

Die Frage nach dem Sinn ist natürlich gestattet. Bilder (egal ober per img-Tag oder CSS-background eingebunden) werden vom Server separat geladen, was bedeutet, sie stellen einen eigenen HTTP-Request dar. Im Zuge der Optimierung von Webseiten auf kürzere Ladezeiten sollte man die Zahl der nötigen HTTP-Requests aber unbedingt auf ein Minimum reduzieren. Denn bei jeder Anfrage an den Server wird neben der eigentlichen Datei noch ein zusätzlicher Overhead an Informationen erzeugt, der mit geladen werden muss.

Funktionsweise von Sprites

Generell gibt es zwei bekannte Möglichkeiten, Bilder in ein HTML-Dokument einzubetten:

Bei Variante A wird mit einem klassischen img-Element gearbeitet, welches das Bild direkt aufruft. Bei Variante B öffnen wir im HTML-Code ein leeres div-Element und vergeben diesem eine ID. Per CSS können wir dieses Block-Element nun entsprechend formatieren und setzen in unserem Beispiel eine feste Höhe & Breite und definieren per CSS-Eigenschaft background ein Hintergrundelement.

Um mit Sprites zu arbeiten, ist die Variante A nicht gut geeignet, da sie nur beschränkte Formatierungsoptionen bietet. Wir müssen für unser Vorhaben innerhalb eines Bildes einen bestimmten Bereich selektieren, weshalb wir auf die CSS-Eigenschaft background-position und somit auf Variante B zurückgreifen müssen.

Aufbau einer Sprite-Grafik

Bevor wir uns den entsprechenden Quellcode anschauen, möchte ich euch als erstes die Ausgangs-Grafik präsentieren:

Wir haben also eine 400 Pixel breite und 100 Pixel hohe Sprite-Grafik, in der sich wiederum drei Einzelgrafiken verstecken. Diese haben jeweils eine Abmessung von 100×100 Pixeln und befinden sich an folgenden Positionen:

  • rot: 0 / 0
  • blau: 150 / 0
  • grün: 300 / 0
Unser Ziel ist es nun, drei div-Container mit den jeweils verschiedenen Hintergrundbildern zu erstellen.

Der HTML-Code

Schauen wir uns dazu zunächst den HTML-Code an, welcher recht unspektakulär ausfallen dürfte.

Der CSS-Code

In Sachen Sprites passiert der spannende Teil im CSS-Quellcode. Denn hier definieren wir die Informationen zum Hintergrundbild und das ist oft gar nicht so einfach.

In der CSS-Klasse .sprite definieren wird Eigenschaften, die auf alle drei Boxen zutreffen. Das ist neben der Breite und Höhe das einheitliche Hintergrundbild.

Interessant wird es dann in den Definitionen der drei IDs #red, #blue und #green. Könnten wir bei #red den Wert noch weglassen, da die Position eines CSS-Hintergrundbildes automatisch bei 0px/0px liegt, müssen wir bei #blue und #green aktiv werden. Hier geben wir mit dem ersten Wert die Verschiebung auf der X-Achse und mit dem zweiten Wert die Verschiebung auf der Y-Achse an.

Da wir im Falle von #blue das Hintergrundbild erst bei 150 Pixel beginnen lassen möchten, müssen wir einen negativen Wert verwenden. Das gleiche bei #green: Mit der Definition background-position: -300px 0px; legen wir fest, dass das Hintergrundbild auf der X-Achse bei 300px und auf der Y-Achse bei 0px starten soll.

Übung macht den Sprite-Meister

Somit hätten wir bereits unsere vielleicht erste Sprite-Grafik fertiggestellt. Wie bereits oben beschrieben, wird nur ein HTTP-Request erzeugt, da in der CSS-Klasse .sprite nur eine einzige Grafik vom Server geladen werden muss. Dies kommt der Ladezeit zur Gute.

Die Verwendung von Sprite-Grafiken ist eine Technik, die leicht zu lernen aber schwer zu meistern ist. Auch ich persönlich muss mir eingestehen, dass ich noch viel zu selten die vollen Potentiale dieser Website Speed – Optimierung ausnutze ;-)

Dieser Artikel wurde am 29.11.2011 veröffentlicht

Wer schreibt hier?

Torben Leuschner - Webentwickler

Hi, ich bin Torben und baue leidenschaftlich gerne Webseiten. Also habe ich mein Hobby zum Beruf gemacht und bin seit 2008 als Webentwickler Selbständig tätig. Obwohl ich schwerpunktmäßig für Kunden arbeite habe ich auch sehr viel Freude an der Realisierung eigener Projekte. Daraus resultierend hat sich eine große Affinität zu den Themen Online Marketing und Suchmaschinenoptimierung entwickelt. Gelegentlich schreibe ich auf Twitter, viel aktiver bin ich allerdings auf Facebook. Gerne können wir uns dort vernetzen!

Wie stehst du dazu?

  1. Also ich hab auch schon ein paar mal sprites genutzt. Und würde statt eines div eher auf einer transparenten grafik zurückgreifen. Wieso? Weil man bei einer Grafik das ALT/TITLE – Atttribute anlegen kann. Desweiteren kann man Grafiken einfach besser verlinken gerade, wenn man auf sauberes HTML/XHTML achtet hat man mit DIV’s hier die ersten Probleme.

    Und dann noch zu deinem Code hier eine kleine Verbesserung.

    .sprite {
    background: url(sprite.png) no-repeat;
    }
    .sprite.blue {
    width : 100px;
    height 100px;
    background-position: 0px 0px;
    }
    ...


    Warum diese Änderung im CSS.
    Blue gibt es nur noch in Kombination mit der CLASS sprites zudem kann nun jedes Element seine eigene Größe haben. Wozu man das braucht sieht man hier z.B. http://www.google.de/images/nav_logo95.png

  2. Ich bin ein Fan von Sprites, einen Haken hats aber dann doch: der Anteil an Bildern sinkt rechnerisch gesehen. Das kann besonders für kleine Seiten nachteilig sein.

  3. @Hans: Warum sollte der geringere Anteil an Bildern, nachteilig für die Seiten sein? In einer Sprite sollten ja auch die gestalterischen Bildelemente zusammengefast werden und nicht die „inhaltlichen Bilder“ die für Bilder-SEO relevant sein sollten.

  4. Hallo Torben,

    eine kurze Frage – nach deinem ersten Beispiel für die Einsatzmöglichkeiten von Bildern im html schreibst du:
    „Um mit Sprites zu arbeiten, ist die Variante B nicht gut geeignet, da sie nur beschränkte Formatierungsoptionen bietet. Wir müssen für unser Vorhaben innerhalb eines Bildes einen bestimmten Bereich selektieren, weshalb wir auf die CSS-Eigenschaft background-position und somit auf Variante B zurückgreifen müssen.“
    Diese Aussage ist für mich ein Widerspruch Variante B kann ja nicht falsch & richtig sein … Daher vermute ich, dass du hier einmal die falsche Variante genannt hast. Meine Frage: Wie lautet der Absatz denn richtig?

    Danke & Liebe Grüße,
    Lisa

    Ps.: Sonst ist der Artikel super :)

  5. Hey Torben,

    ich habe noch eine weitere Frage:

    Wie würdest du deine Sprites in eine Webseite einarbeiten, wenn diese responsive ist? Bei einer responsive Webseite wird die Arbeit in px ja eigentlich vermieden und es würden hauptsächlich %-Werte genutzt werden. Oder wäre das hier zu vernachlässigen?

    Danke nochmal :)

    Liebe Grüße,
    Lisa

  6. Hallo Lisa,

    zu deiner ersten Frage:
    Du hast natürlich absolut Recht. Es müsste „Um mit Sprites zu arbeiten, ist die Variante A nicht gut geeignet“ lauten. Ist korrigiert.

    Zu deiner zweiten Fragen:
    Bei der Umsetzung einer responsiven Webseite muss man nicht zwingend auf Pixel-Angaben verzichten. Du nutzt Sprites ja nicht für „inhaltliche Bilder“, sondern für gestalterische Elemente wie Icons usw. Diese haben ja in der Regel eine feste Größe, weshalb nichts gegen den Einsatz von Pixel-Werten spricht.

    Im großen und ganzen kann man allerdings schon sagen, dass sich der Einsatz von Sprites auf responsiven Webseiten noch ein wenig schwieriger gestaltet. Hier gilt es im Vorfeld gut zu planen, welche Elemente man später wie einsetzen möchte.

    Liebe Grüße,
    Torben

  7. Hallo Torben,

    danke für die Informationen in diesem Post. Ich bin momentan auf einem random-klick-streak durch’s Web, um Wege zu suchen, meine Seite und mein CMS zu beschleunigen. Habe mich bei Dir auch ausgetobt, um mal zu schauen, ob mein Weg auch gängig ist.

    Auf Sprites bin ich natürlich schon gestoßen und habe auch mehrere in Verwendung. Allerdings arbeite ich mit verschiedenen Klassen pro Bild.

    Zum einen benutze ich die Klasse „sprite“, die dem Bild dann die Hintergrundgrafik und die Maße zuweist. (Vorausgesetzt, alle Grafiken der Sprite haben die gleichen Maße!)
    Zum anderen benutze ich dann die Klassennamen s[iconname], also beispielsweise „suser“

    Der IMG-Tag sieht dan wiefolgt aus:

    Meine Frage nun ist, ob das auf diese Art nicht einfacher ist, als im Markup mit IDs zu hantieren (weil man diese ja nur ein Mal vergeben soll).

    Nette Grüße
    Jan G

  8. Hallo Jan,
    vielen Dank für dein Feedback.

    Dieser Beitrag ist ja nun auch schon über zwei Jahre alt.
    Bei heutigen Projekten verwende ich IDs zur CSS-Formatierung so gut wie gar nicht mehr. Von daher ist dein beschriebener Weg über modulare Klassen sicher der bessere :-)

    Beste Grüße,
    Torben

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.

* Die Checkbox für die Zustimmung zur Speicherung ist nach DSGVO zwingend.

Ich stimme zu.