Bilder und Grafiken in Templates

Bei der optis­chen Gestal­tung ein­er Web­site find­en über­wiegend Bilder und Grafiken in den Tem­plates Ver­wen­dung, deren Inte­gra­tion und Abruf über CSS-Tech­niken erfol­gt. In diesem Kapi­tel wer­den die Möglichkeit­en ein­er Opti­mierung der Ladezeit durch CSS-Sprites, Vek­tor­grafiken und Icon Fonts näher betra­chtet. Die bere­its in Kapi­tel 3.5.2 vorgestell­ten Maß­nah­men zur Wahl eines geeigneten Dateifor­mates und der opti­malen Kom­prim­ierung sind auch für diese Grafik­dateien rel­e­vant. Darüber hin­aus wird auf die beson­dere Bedeu­tung von Fav­i­cons im Hin­blick auf die Ladezeit einge­gan­gen.

CSS-Sprites

Der Ein­satz von CSS-Sprites unter­stützt eine Reduzierung der HTTP-Anfra­gen an den Web­serv­er. Einzelne Grafiken, vor­wiegend Gestal­tungse­le­mente wie Icons, wer­den zu ein­er großen Sprite kom­biniert und über CSS in die Web­seite einge­bun­den (siehe Abbil­dung 3.8). Anstelle von mehreren Grafik­dateien erfol­gt die Über­tra­gung ein­er einzi­gen Datei. Mit Hil­fe des Attrib­uts back­ground-posi­tion und von fes­ten Werten für Größe­nangaben wird der anzuzeigende Auss­chnitt inner­halb der Sprite, für die Darstel­lung der Grafiken in HTML-Ele­menten, per CSS fest­gelegt.

Abbil­dung 3.8: Zusam­men­fas­sung von drei Icons in ein­er einzi­gen Datei als CSS-Sprite

Zur automa­tisierten Erstel­lung von Sprites existieren Web-Dien­ste wie SpriteMe oder CSS Sprite Gen­er­a­tor. Diese erstellen aus einzel­nen Grafiken eine Sprite und liefern die CSS-Attribute und Koor­di­nat­en zur Ein­bindung [WH15]. Um für eine beste­hende Sprite die Koor­di­nat­en zu erhal­ten bietet sich der Web-Dienst Sprite Cow an [Zil13]. Des Weit­eren lässt sich eine solche Sprite auch mit einem Grafikpro­gramm erstellen.

Vektorgrafiken und Icon Fonts für grafische Elemente

Vek­tor­grafiken lassen sich für die Darstel­lung im Brows­er als Scal­able Vec­tor Graph­ics (SVG) spe­ich­ern und kön­nen in dem HTML-Doku­ment mit Hil­fe des <img>-Elements einge­bun­den wer­den. Für das Respon­sive Web­de­sign bieten textbasierte Vek­tor­grafiken den Vorteil ein­er uneingeschränk­ten Skalier­barkeit bei gle­ich­bleiben­der Dateigröße. Es ist daher bei SVG nicht erforder­lich mehrere Ver­sio­nen ein­er Grafik für nor­male und hochau­flösende Dis­plays bere­itzustellen [Hog15]. Das SVG-Dateifor­mat eignet sich vor­wiegend zur Darstel­lung möglichst ein­fach­er, plaka­tiv­er Grafiken [Zil13].

„Vek­toren spie­len immer dann ihre Stärke aus, wenn die abge­bilde­ten For­men aus Kur­ven und Fül­lun­gen beste­hen, deren Auf­bau sich mit möglichst wenig math­e­ma­tis­chem Aufwand beschreiben lässt“ [Zil13].

Diesen Vorteil macht sich Google mit dem am 1. Sep­tem­ber 2015 vorgestell­ten neuen Unternehmens-Logo zu eigen [Yeh15]. Während die alte Ver­sion des Logos eine Größe von 6380 Bytes aufwies (siehe Abbil­dung 3.9), ist das neue Logo durch eine geschickt gewählte Kom­bi­na­tion ein­fach zu berech­nen­der For­men, wie in Abbil­dung 3.10 dargestellt, als Vek­tor­grafik nur noch 305 Bytes groß [Kum15].

Abbil­dung 3.9: Logo von Google bis 01.09.2015 aus Bézi­er-Kur­ven als Vek­tor­grafik nach [Kum15]
Abbil­dung 3.10: Schema­tis­che Darstel­lung des neuen Logos aus ein­fachen For­men nach [Kum15]

Eine Opti­mierung von SVG-Dateien kann durch die Reduzierung des Detail­grades der For­men und eine Ent­fer­nung der Meta­dat­en erre­icht wer­den [Zil13]. Des Weit­eren lässt sich das Daten­vol­u­men textbasiert­er SVG-Dateien per GZIP kom­prim­ieren [Sou15].

CSS-Sprites wer­den zunehmend durch vek­tor­basierte Icon Fonts erset­zt. Bei Icon Fonts han­delt es sich um ver­lust­frei skalier­bare Schrift­dateien, die Icons als Schriftze­ichen enthal­ten und sich mit­tels CSS-Def­i­n­i­tio­nen in der optis­chen Darstel­lung bee­in­flussen lassen [Zil13]. Die Inte­gra­tion erfol­gt über die @font-face Dekla­ra­tion im Stylesheet. Gegenüber Icon Fonts bietet SVG den Vorteil, dass sich Icons mehr­far­big gestal­ten und ani­mieren lassen. Icon Fonts kön­nen, auf­grund der eingeschränk­ten Eigen­schaften von Schrif­tarten, auss­chließlich mono­chrom dargestellt wer­den [Sou15]. Bei der Ausze­ich­nung von SVG-Dateien im HTML-Doku­ment kön­nen zudem weit­ere Bild­for­mate als Rück­fall-Lösung hin­ter­legt wer­den, falls ein Brows­er das SVG-For­mat nicht unter­stützt. Scal­able Vec­tor Graph­ics wer­den im Grafikpro­gramm erstellt und kön­nen nachträglich edi­tiert wer­den, während Icon Fonts über externe Drit­tan­bi­eter bezo­gen wer­den, die eine indi­vidu­elle Anpas­sung der Icons nicht ermöglichen [Sou15].

Favicons

Bei einem Fav­i­con han­delt es sich um das kleine Icon, das neben der Tite­lanzeige der Web­seite im Brows­er dargestellt wird. Für die Per­for­manceop­ti­mierung ist das Fav­i­con von beson­der­er Bedeu­tung, da es bei jedem Abruf ein­er Web­seite durch den Brows­er automa­tisch ange­fordert wird. Wurde kein Fav­i­con hin­ter­legt, wirkt sich dies neg­a­tiv auf die Ladezeit aus, da der Web­serv­er eine entsprechende 404-Fehler­mel­dung an den Brows­er zurück­sendet [Koc12].

Fav­i­cons lassen sich mit Web-Dien­sten wie dem Real­fav­i­con­gener­a­tor oder dem X‑Icon edi­tor aus den ver­schiede­nen Bild­for­mat­en gener­ieren. Die bei­den Gen­er­a­toren bieten mehrere Auflö­sun­gen der Fav­i­cons für unter­schiedliche Anwen­dungs­fälle, wie zum Beispiel für Reti­na-Dis­plays mit ein­er höheren Pix­eldichte, an. Aus Sicht der Per­for­mance sollte die Auflö­sung des Fav­i­cons 16 x 16 Pix­el betra­gen und die Datei nicht größer als 1 Kilo­byte sein [Sou09].