Google Page Speed – CSS Sprites vs. Image-Maps (Teil 2)
Teil 2 unserer Serie – Page Speed Optimierung:
Im ersten Teil unserer Page-Speed Optimierungsreihe sind wir auf den Umgang von CSS – Dateien in einer Website und die dadurch hervorgerufene Minimierung von HTTP – Requests (s. Round-trip time ) eingegangen, um die Ladezeit einer Website zu verringern. CSS selbst lässt sich aber auch wunderbar zur Minimierung dieser HTTP – Requests nutzen. Hintergrund hierbei ist, wie auch bereits im vorherigen Teil beschrieben, dass der Browser die meisten Dateien einer Website nicht parallel, sondern nur nacheinander herunterladen kann und für jede neue Datei eine separate Anfrage an den Server stellen muss. Um diese Begebenheit zu umgehen, sollte man gerade bei Websites bzw. Shopsystemen mit einer großen Anzahl an Bildern auf CSS Sprites oder Image Maps zurückgreifen.
Google selbst empfiehlt über sein Firebug-Addon die Verwendung von CSS Sprites, um eine Verbesserung der Ladezeit zu erwirken.
„CSS Sprites“
Bereits vor einigen Jahren wurden CSS Sprites in Computerspielen verwendet und sind somit nicht zur Verwendung im Web entwickelt worden. Schon damals hatte man erkannt, dass man die Geschwindigkeit der Grafikdarstellung erhöhen kann, indem man unterschiedliche Bilder zusammenfügt und anschließend die einzelnen Bildbereiche anzeigt.
Durch die Entwicklung und die ständige Erweiterung von CSS kann man diese Technik mittlerweile auch ideal zur Verbesserung der Ladezeit von Websites nutzen. Ebenso wie bei den Computerspielen werden hierbei Bilder zu einem Bild zusammengefasst und über die Angabe von Größe und Position wird der gewünschte Bildbereich definiert.
Zum Einsatz kommen solche CSS Sprites oftmals in Websites, in denen viele Bilder mit unterschiedlichen Linkverweisen verwendet werden. (Social-Bookmarks, Landkarten, Weihnachtskalender etc..)
Aufbau von einem CSS Sprite:
CSS Sprite – HTML:
[html] <a href=“Linkziel“ class=“bookmark“ id=“sprite-blogger“ ></a><a href=“Linkziel“ class=“bookmark“ id=“sprite-delicious“ ></a>
<a href=“Linkziel“ class=“bookmark“ id=“sprite-facebook“ ></a>
[/html]
Im Hyperlink ist eine CSS-Klasse definiert, die für jeden Link die gleiche Bezeichnung haben muss bzw. eine CSS-ID (Klasse ebenfalls möglich), die jeweils eine andere Bezeichnung führen muss.
CSS Sprite – CSS:
[html] .bookmark {background: url(bookmark.png) no-repeat;
padding: 0 0 0 24px;
}
[/html]
Über die CSS-Klasse wird nun das betreffende Bild für den jeweiligen Link eingefügt und der Abstand definiert.
[html] #sprite-blogger{background-position: 0 0;
}
#sprite-delicious{
background-position: -24px 0;
}
#sprite-facebook{
background-position: -48px 0;
}
[/html]
Über die CSS-ID wird über die Angabe der Hintergrundposition der entsprechende Teilbereich gewählt.
„Image Maps“
Über einen Image Map oder auch verweissensitive Grafik genannt, können ebenfalls Bereiche einer Grafik separiert und mit Hyperlinks versehen werden. Anders als bei den oben beschriebenen CSS Sprites können hierbei nicht nur rechteckige, sondern auch runde bzw. frei wählbare Verweisbereiche in einer einzigen Bilddatei definiert werden. Somit kann man bestimmte Bereiche in einer Grafik besser abgrenzen und flexibler auf im Bild enthaltene Begebenheiten reagieren.
Beispiel einer Imag Map:
[html] <img src=“bookmark.png“ width=“285″ height=“24″ usemap=“#bookmark“><map name=“bookmark“>
<area shape=“rect“ coords=“10,10,20,20″ href=“#“>
<area shape=“rect“ coords=“11,10,59,29″ href=“#“>
</map>
[/html]
Image Maps werden über ein Image-Tag direkt im HTML definiert. Das Einbinden einer solchen Image Map geschieht über das Attribut usemap im oben erwähnten Image-Tag, welches darüber hinaus auf die Image Map verweist.
[html] <img src=“bookmark.png“ usemap=“#bookmark“ … >[/html]
Die Image Map besteht wiederum aus einem Map-Tag und einzelnen Area-Tags, womit die einzelnen Verweisbereiche definiert werden.
[html] <map name=“bookmark“><area shape=“rect“ coords=“x1,y1,x2,y2″ href=“Linkverweis“>
</map>
[/html]
Die Größe und die Form der verschiedenen Verweisbereiche werden schlussendlich über die Zusätze shape und coords im jeweiligen Map-Tag definiert. Zur Auswahl stehen hier die folgenden Möglichkeiten:
Definition von einem Viereck (shape=“rect“):
[html] <area shape=“rect“ coords=“x1,y1,x2,y2″ href=“Linkverweis „>[/html]
Mit shape=“rect“ kann eine viereckige Fläche über die Angabe der Eckpunktkoordinaten erzeugt werden. x ist hierbei der Abstand in Pixel von der linken Bildseite nach rechts gerichtet. y beschreibt den Abstand in Pixel zwischen der oberen Bildseite nach unten gerichtet.
Definition von einem Kreis (shape=“circle“):
[html] <area shape=“circle“ coords=“x,y,r“ href=“Linkverweis“>[/html]
Mit shape=“circle“ kann ein Kreis erzeugt werden. x ist hierbei der Abstand in Pixel von der linken Bildseite nach rechts gerichtet. y beschreibt den Abstand in Pixel zwischen der oberen Bildseite nach unten gerichtet. Diese beiden Koordinaten bilden den Mittelpunkt des Kreises und unter Angabe von r wird der Radius vom Kreis festgelegt.
Definition von einem Polygon (shape=“poly“):
[html] <area shape=“poly“ coords=”x1,y1,x2,y2 … xn,yn“ href=“Linkverweis“>[/html]
Mit shape=“circle“ kann ein Polygon über die Angabe der verschiedenen Eckpunktkoordinaten erzeugt werden. x ist hierbei der Abstand in Pixel von der linken Bildseite nach rechts gerichtet. y beschreibt den Abstand in Pixel zwischen der oberen Bildseite nach unten gerichtet.
Verfasst von Christian Grzeschik, Key Account SEO Consultant