Bei der optischen Gestaltung einer Website finden überwiegend Bilder und Grafiken in den Templates Verwendung, deren Integration und Abruf über CSS-Techniken erfolgt. In diesem Kapitel werden die Möglichkeiten einer Optimierung der Ladezeit durch CSS-Sprites, Vektorgrafiken und Icon Fonts näher betrachtet. Die bereits in Kapitel 3.5.2 vorgestellten Maßnahmen zur Wahl eines geeigneten Dateiformates und der optimalen Komprimierung sind auch für diese Grafikdateien relevant. Darüber hinaus wird auf die besondere Bedeutung von Favicons im Hinblick auf die Ladezeit eingegangen.
CSS-Sprites
Der Einsatz von CSS-Sprites unterstützt eine Reduzierung der HTTP-Anfragen an den Webserver. Einzelne Grafiken, vorwiegend Gestaltungselemente wie Icons, werden zu einer großen Sprite kombiniert und über CSS in die Webseite eingebunden (siehe Abbildung 3.8). Anstelle von mehreren Grafikdateien erfolgt die Übertragung einer einzigen Datei. Mit Hilfe des Attributs background-position und von festen Werten für Größenangaben wird der anzuzeigende Ausschnitt innerhalb der Sprite, für die Darstellung der Grafiken in HTML-Elementen, per CSS festgelegt.
Zur automatisierten Erstellung von Sprites existieren Web-Dienste wie SpriteMe oder CSS Sprite Generator. Diese erstellen aus einzelnen Grafiken eine Sprite und liefern die CSS-Attribute und Koordinaten zur Einbindung [WH15]. Um für eine bestehende Sprite die Koordinaten zu erhalten bietet sich der Web-Dienst Sprite Cow an [Zil13]. Des Weiteren lässt sich eine solche Sprite auch mit einem Grafikprogramm erstellen.
Vektorgrafiken und Icon Fonts für grafische Elemente
Vektorgrafiken lassen sich für die Darstellung im Browser als Scalable Vector Graphics (SVG) speichern und können in dem HTML-Dokument mit Hilfe des <img>-Elements eingebunden werden. Für das Responsive Webdesign bieten textbasierte Vektorgrafiken den Vorteil einer uneingeschränkten Skalierbarkeit bei gleichbleibender Dateigröße. Es ist daher bei SVG nicht erforderlich mehrere Versionen einer Grafik für normale und hochauflösende Displays bereitzustellen [Hog15]. Das SVG-Dateiformat eignet sich vorwiegend zur Darstellung möglichst einfacher, plakativer Grafiken [Zil13].
„Vektoren spielen immer dann ihre Stärke aus, wenn die abgebildeten Formen aus Kurven und Füllungen bestehen, deren Aufbau sich mit möglichst wenig mathematischem Aufwand beschreiben lässt“ [Zil13].
Diesen Vorteil macht sich Google mit dem am 1. September 2015 vorgestellten neuen Unternehmens-Logo zu eigen [Yeh15]. Während die alte Version des Logos eine Größe von 6380 Bytes aufwies (siehe Abbildung 3.9), ist das neue Logo durch eine geschickt gewählte Kombination einfach zu berechnender Formen, wie in Abbildung 3.10 dargestellt, als Vektorgrafik nur noch 305 Bytes groß [Kum15].
Eine Optimierung von SVG-Dateien kann durch die Reduzierung des Detailgrades der Formen und eine Entfernung der Metadaten erreicht werden [Zil13]. Des Weiteren lässt sich das Datenvolumen textbasierter SVG-Dateien per GZIP komprimieren [Sou15].
CSS-Sprites werden zunehmend durch vektorbasierte Icon Fonts ersetzt. Bei Icon Fonts handelt es sich um verlustfrei skalierbare Schriftdateien, die Icons als Schriftzeichen enthalten und sich mittels CSS-Definitionen in der optischen Darstellung beeinflussen lassen [Zil13]. Die Integration erfolgt über die @font-face Deklaration im Stylesheet. Gegenüber Icon Fonts bietet SVG den Vorteil, dass sich Icons mehrfarbig gestalten und animieren lassen. Icon Fonts können, aufgrund der eingeschränkten Eigenschaften von Schriftarten, ausschließlich monochrom dargestellt werden [Sou15]. Bei der Auszeichnung von SVG-Dateien im HTML-Dokument können zudem weitere Bildformate als Rückfall-Lösung hinterlegt werden, falls ein Browser das SVG-Format nicht unterstützt. Scalable Vector Graphics werden im Grafikprogramm erstellt und können nachträglich editiert werden, während Icon Fonts über externe Drittanbieter bezogen werden, die eine individuelle Anpassung der Icons nicht ermöglichen [Sou15].
Favicons
Bei einem Favicon handelt es sich um das kleine Icon, das neben der Titelanzeige der Webseite im Browser dargestellt wird. Für die Performanceoptimierung ist das Favicon von besonderer Bedeutung, da es bei jedem Abruf einer Webseite durch den Browser automatisch angefordert wird. Wurde kein Favicon hinterlegt, wirkt sich dies negativ auf die Ladezeit aus, da der Webserver eine entsprechende 404-Fehlermeldung an den Browser zurücksendet [Koc12].
Favicons lassen sich mit Web-Diensten wie dem Realfavicongenerator oder dem X‑Icon editor aus den verschiedenen Bildformaten generieren. Die beiden Generatoren bieten mehrere Auflösungen der Favicons für unterschiedliche Anwendungsfälle, wie zum Beispiel für Retina-Displays mit einer höheren Pixeldichte, an. Aus Sicht der Performance sollte die Auflösung des Favicons 16 x 16 Pixel betragen und die Datei nicht größer als 1 Kilobyte sein [Sou09].
