Schritt 2: Optimierung von Bildern und Grafiken

In dem zweit­en Schritt der Opti­mierung des Themes wur­den die Ansatzpunk­te und Maß­nah­men zur Verbesserung der einge­bun­de­nen Bilder und Grafiken umge­set­zt.

Die Bild-Ele­mente inner­halb des Inhalts­bere­ich­es und des Ban­ners des Tem­plates der Unter­seit­en wiesen eine fest­gelegte Bre­ite von 990 Pix­eln auf und wur­den für alle Endgeräte in der voll­ständi­gen Auflö­sung aus­geliefert. Infolgedessen musste der Brows­er diese Bilder, entsprechend der Def­i­n­i­tio­nen in dem Stylesheet, herun­ter­skalieren. Um eine Reduzierung des zu über­tra­gen­den Daten­vol­u­mens zu erre­ichen, wur­den weit­ere Auflö­sun­gen für die Bilder des Inhalts­bere­ich­es, mit ein­er Bre­ite von 720 Pix­eln und 480 Pix­eln, erstellt.

<img src="small.jpg" srcset="small.jpg 480w, medium.jpg 720w, big.jpg 990w" />

Anhand der Def­i­n­i­tion des src­set-Attrib­ut­es ist der Brows­er in der Lage, eigen­ständig das passende Bild zur Darstel­lung auf dem jew­eili­gen Endgerät auszuwählen. Es wird somit eine Reduzierung des Daten­vol­u­mens erzielt und gle­ichzeit­ig erfol­gt die Aus­liefer­ung passender Bilder für hochau­flösende Dis­plays. 

Das Bild in dem Ban­ner der Unter­seit­en-Tem­plates wurde in ein­er exak­ten Auflö­sung von 703 x 228 Pix­eln gespe­ichert, da das Ban­ner nur in dem Lay­out mit der max­i­malen Bild­schirm­bre­ite dargestellt und bei gerin­geren Auflö­sun­gen aus­ge­blendet wird.

Zur Reduzierung der Dateigröße des Logos wurde der trans­par­ente Hin­ter­grund durch die Farbe weiß erset­zt und die Kom­prim­ierung von PNG24 zu PNG8 mit 32 Far­ben geän­dert. Ein zusät­zlich­es Logo für hochau­flösende Reti­na-Dis­plays wurde erstellt und mit Hil­fe des src­set-Attrib­ut­es in den Tem­plates einge­bun­den.

<img src="logo.png" srcset="logo.png 1x, logo@2x.png 2x" />

Alle Ele­mente und Icons zur grafis­chen Gestal­tung der Tem­plates wur­den in ein­er CSS-Sprite zusam­menge­fasst. Diese wurde in ein­er hohen Auflö­sung für Reti­na-Dis­plays angelegt und gespe­ichert. Anschließend wurde die Auflö­sung der CSS-Sprite hal­biert und eine zweite Datei für die Darstel­lung auf nor­malen Dis­plays erstellt. Auf einen trans­par­enten Hin­ter­grund wurde auch hier verzichtet und als Kom­prim­ierung PNG8 mit 16 Far­ben gewählt. Um die CSS-Sprite für hochau­flösende Dis­plays zu laden, wurde in dem Stylesheet, neben dem back­ground-image, auch die back­ground-size der nor­mal aufgelösten CSS-Sprite in einem Media Query angegeben. Weit­ere Anpas­sun­gen waren zur Aus­gabe der hochau­flösenden CSS-Sprite nicht erforder­lich.

@media only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-device-pixel-ratio: 2) {
  .phone, .rss, .arrow {
    background-image: url(images/sprite@2x.png);
    background-size: 18px 43px;
  }
}

Im Rah­men der Bil­dop­ti­mierun­gen wurde, neben dem genutzten Dateifor­mat, auch die Kom­prim­ierung über­prüft. Alle JPEG-Bild­dateien wur­den pro­gres­siv mit ein­er Qual­ität zwis­chen 40 und 50 Prozent gespe­ichert. Abschließend erfol­gte, vor der Über­tra­gung auf den Web­serv­er, eine weit­ere Opti­mierung der Kom­prim­ierung und die Ent­fer­nung von nicht erforder­lichen Meta­dat­en bei allen Dateien durch die Soft­ware Ima­geop­tim. Dies führte zu ein­er Reduzierung des Daten­vol­u­mens aller Bilder und Grafiken des Tem­plate um 35 Prozent für Desk­top-Rech­n­er und um 47 Prozent für mobile Endgeräte (siehe Tabelle 4.3). Darüber hin­aus kon­nte die Anzahl der Grafik-Dateien von 14 auf 6 Stück durch die Nutzung von CSS-Sprites reduziert wer­den.

Tabelle 4.3: Ergeb­nisse der Opti­mierun­gen bei der Inte­gra­tion von Bildern und Grafiken

Opti­mierung Schritt 1 Schritt 2 Verbesserung
Anfra­gen – Tem­plate Start­seite 15 14 1 7 %
Anfra­gen – Tem­plate Unter­seit­en 13 11 2 15 %
Anzahl der Grafiken-Dateien des Tem­plate 14 6 8 57 %
Daten­vol­u­men der Grafiken – Mobil (Reti­na) 553 KB 293 KB 260 KB 47 %
Daten­vol­u­men der Grafiken – Desk­top 548 KB 355 KB 193 KB 35 %
YSLOW (Punk­te / Note) 80 / B 81 / B 1 -
Page­Speed Insights (Mobil / Desk­top) 71 / 85 71 / 86 - / 1 -