In dem zweiten Schritt der Optimierung des Themes wurden die Ansatzpunkte und Maßnahmen zur Verbesserung der eingebundenen Bilder und Grafiken umgesetzt.
Die Bild-Elemente innerhalb des Inhaltsbereiches und des Banners des Templates der Unterseiten wiesen eine festgelegte Breite von 990 Pixeln auf und wurden für alle Endgeräte in der vollständigen Auflösung ausgeliefert. Infolgedessen musste der Browser diese Bilder, entsprechend der Definitionen in dem Stylesheet, herunterskalieren. Um eine Reduzierung des zu übertragenden Datenvolumens zu erreichen, wurden weitere Auflösungen für die Bilder des Inhaltsbereiches, mit einer Breite von 720 Pixeln und 480 Pixeln, erstellt.
<img src="small.jpg" srcset="small.jpg 480w, medium.jpg 720w, big.jpg 990w" />
Anhand der Definition des srcset-Attributes ist der Browser in der Lage, eigenständig das passende Bild zur Darstellung auf dem jeweiligen Endgerät auszuwählen. Es wird somit eine Reduzierung des Datenvolumens erzielt und gleichzeitig erfolgt die Auslieferung passender Bilder für hochauflösende Displays.
Das Bild in dem Banner der Unterseiten-Templates wurde in einer exakten Auflösung von 703 x 228 Pixeln gespeichert, da das Banner nur in dem Layout mit der maximalen Bildschirmbreite dargestellt und bei geringeren Auflösungen ausgeblendet wird.
Zur Reduzierung der Dateigröße des Logos wurde der transparente Hintergrund durch die Farbe weiß ersetzt und die Komprimierung von PNG24 zu PNG8 mit 32 Farben geändert. Ein zusätzliches Logo für hochauflösende Retina-Displays wurde erstellt und mit Hilfe des srcset-Attributes in den Templates eingebunden.
<img src="logo.png" srcset="logo.png 1x, logo@2x.png 2x" />
Alle Elemente und Icons zur grafischen Gestaltung der Templates wurden in einer CSS-Sprite zusammengefasst. Diese wurde in einer hohen Auflösung für Retina-Displays angelegt und gespeichert. Anschließend wurde die Auflösung der CSS-Sprite halbiert und eine zweite Datei für die Darstellung auf normalen Displays erstellt. Auf einen transparenten Hintergrund wurde auch hier verzichtet und als Komprimierung PNG8 mit 16 Farben gewählt. Um die CSS-Sprite für hochauflösende Displays zu laden, wurde in dem Stylesheet, neben dem background-image, auch die background-size der normal aufgelösten CSS-Sprite in einem Media Query angegeben. Weitere Anpassungen waren zur Ausgabe der hochauflösenden CSS-Sprite nicht erforderlich.
@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 Rahmen der Bildoptimierungen wurde, neben dem genutzten Dateiformat, auch die Komprimierung überprüft. Alle JPEG-Bilddateien wurden progressiv mit einer Qualität zwischen 40 und 50 Prozent gespeichert. Abschließend erfolgte, vor der Übertragung auf den Webserver, eine weitere Optimierung der Komprimierung und die Entfernung von nicht erforderlichen Metadaten bei allen Dateien durch die Software Imageoptim. Dies führte zu einer Reduzierung des Datenvolumens aller Bilder und Grafiken des Template um 35 Prozent für Desktop-Rechner und um 47 Prozent für mobile Endgeräte (siehe Tabelle 4.3). Darüber hinaus konnte die Anzahl der Grafik-Dateien von 14 auf 6 Stück durch die Nutzung von CSS-Sprites reduziert werden.
Tabelle 4.3: Ergebnisse der Optimierungen bei der Integration von Bildern und Grafiken
| Optimierung | Schritt 1 | Schritt 2 | Verbesserung | |
| Anfragen – Template Startseite | 15 | 14 | 1 | 7 % |
| Anfragen – Template Unterseiten | 13 | 11 | 2 | 15 % |
| Anzahl der Grafiken-Dateien des Template | 14 | 6 | 8 | 57 % |
| Datenvolumen der Grafiken – Mobil (Retina) | 553 KB | 293 KB | 260 KB | 47 % |
| Datenvolumen der Grafiken – Desktop | 548 KB | 355 KB | 193 KB | 35 % |
| YSLOW (Punkte / Note) | 80 / B | 81 / B | 1 | - |
| PageSpeed Insights (Mobil / Desktop) | 71 / 85 | 71 / 86 | - / 1 | - |
