Der Anteil von Bildern an dem übertragenen Datenvolumen der Top-1000 Websites beträgt gemäß HTTP Archive vom 15.09.2015 durchschnittlich 57 Prozent [Htt15]. Daraus lässt sich ableiten, dass Bilder einen wesentlichen Anteil zur Reduzierung des Datenvolumens beitragen können und Maßnahmen zur Optimierung in diesem Bereich einen hohen Einfluss auf die Ladezeit versprechen.
In diesem Kapitel werden verlustbehaftete und verlustfreie Methoden zur Optimierung von Bildern vorgestellt. Bei der verlustbehafteten Bildoptimierung erfolgt eine Reduzierung der Qualität oder der Farbpalette einer Bilddatei, während bei den verlustfreien Methoden überflüssige oder doppelt vorhandene Bildinformationen entfernt werden sowie die optimale Kompression für das jeweilige Dateiformat gewählt wird [Leu15]. Anschließend werden neue HTML-Elemente zur Einbindung von Bildern vorgestellt, die eine Differenzierung zwischen verschiedenen Endgeräten ermöglichen und die An-fragen an den Webserver vermindern.Der Einfluss durch Bilder und Grafiken im Bezug auf die Performanceoptimierung von Frontend-Templates wird gesondert in dem Kapitel 3.6.6 betrachtet. Dort werden CSS-Techniken zur Integration und Verbesserungspotentiale durch Vektorgrafiken angeführt.
Dateiformate und Komprimierung
Zur Speicherung von Grafiken und Bildern stehen verschiedene Dateiformate und verlustbehaftete Komprimierungsmethoden zur Auswahl, die vorwiegend von dem Grad der Komplexität der darzustellenden Inhalte abhängig sind.
Einfache Animationen und Grafiken mit einem geringen Farbumfang lassen sich in dem Dateiformat GIF speichern, das neben der Darstellung von Transparenz maximal 256 Farben wiedergibt. Für Fotografien und fotorealistische Bilder mit hohem Farbumfang eignet sich das Dateiformat JPEG, bei dem die Dateigröße abhängig von der gewählten Qualität bei der Komprimierung ist. Die Qualität kann von 0 bis 100 Prozent angegeben und so gewählt werden, dass keine optischen Einbußen durch Artefakte in Erscheinung treten. Mit dem Dateiformat PNG wurde versucht, die Vorteile von GIF und JPEG zu vereinen. Während sich die Komprimierung PNG8 aufgrund einer geringen Farbpalette für Grafiken eignet, kann PNG24 zur Speicherung von Bildern mit Transparenzeffekten und vielen Farbinformationen genutzt werden [CIW15]. Bei der Wahl des Dateiformates für Bilder und Grafiken sollte jeweils geprüft werden, welches Format die geringste Dateigröße bei der besten Qualität liefert. Zum Teil kann ein Wechsel der Farbtiefe die Dateigröße reduzieren, ohne die Qualität sichtbar zu verschlechtern [CIW15].
Um eine Skalierung von Bildern zu vermeiden, können diese vor der Einbindung in die Webseite anhand der vom Layout vorgesehenen Auflösungen erstellt und gespeichert werden. Wird ein hochauflösendes Bild durch die Attribute height und weight mittels CSS oder HTML auf die passende Größe herunterskaliert, muss das Bild unnötigerweise in der vollen Dateigröße übertragen werden [CIW15]. Die Angabe der Attribute height und weight sollte bei der Einbindung von Bildern erfolgen und der tatsächlichen Auflösung des Bildes entsprechen. Nur so kann der Browser den erforderlichen Platz bei dem Rendering der Webseite reservieren und ein Verschieben anderer Inhalte nach dem vollständigen Laden des Bildes wird vermieden [Koc12]. Bei dem Speichern von Bildern in dem JPEG-Format kann die Option Progressive aktiviert werden. Diese bewirkt, dass beim Laden des Bildes zu Beginn eine Version mit geringer Auflösung angezeigt wird und sich die Auflösung des Bildes mit steigendem Ladefortschritt verbessert, bis die Bilddatei vollständig geladen wurde.
Entfernung der Metadaten
Bilder und Grafiken enthalten oftmals Bildinformationen in Form von Metadaten, die bei der Darstellung einer Webseite keine weitere Relevanz haben und die Dateigröße unnötig erhöhen. Diese Informationen lassen sich mit Hilfe spezieller Programme wie ImageOptim am Mac oder Radical Image Optimization Tool (RIOT) unter Windows verlustfrei aus den Bilddateien entfernen [Gri14]. Gleichzeitig wird überprüft, ob die optimale Kompression für das jeweilige Dateiformat beim Speichern verwendet wurde. Ist dies nicht der Fall, wird die Datei neu komprimiert und anschließend mit der reduzierten Dateigröße gespeichert. Dazu kombinieren die Programme unter anderem die Bildkompressoren TinyPNG, TinyJPG und JPEGmini, die auch einzeln als Web-Dienste zur Verfügung stehen.
Srcset-Attribut
Das Attribut srcset kann mit den HTML-Elementen <img> und <picture> genutzt werden und ermöglicht es, verschiedene Bilder für bestimmte Bildschirmauflösungen zu definieren. Insbesondere beim Responsive Webdesign war die Auslieferung passender Bilder bisher ein Problem, diese wurden entweder über JavaScript nachgeladen oder mit Hilfe des Attributes max-width: 100%; im Stylesheet skaliert. Was dazu führte, dass bei mobilen Endgeräten und Desktop-Rechnern die gleichen Bilder mit identischer Auflösung und Dateigröße geladen werden.
<img src="small.jpg" srcset="small.jpg 480w, big.jpg 720w" />
Ältere Browser, die das srcset-Attribut nicht interpretieren können, laden wie bisher das im src-Attribut angegebene Bild herunter. Während aktuelle Browser, anhand der Angaben im srcset-Attribut, in der Lage sind eigenständig ein Bild auszuwählen, das am besten zu der Bildschirmauflösung und Pixeldichte des jeweiligen Endgerätes passt. Darüber hinaus kann bei der Wahl des Bildes durch den Browser die Bandbreite der genutzten Netzwerkverbindung berücksichtigt werden [Zil13].
Um die Bilder in verschiedenen Auflösungen ausliefern zu können ist es erforderlich, diese in den entsprechenden Größen zu erstellen. Innerhalb des srcset-Attributes erfolgt hinter dem Dateinamen die Definition der Breite des Bildes in Pixeln, wobei die Abkürzung w für width steht. Das zuvor angeführte Beispiel gestattet dem Browser die Wahl zwischen einem Bild mit einer Breite von 480 Pixeln, das sich beispielsweise für Smartphones eignet, und einem Bild mit einer Breite von 720 Pixeln für Tablet-PCs.
<img src="logo.png" srcset="logo.png 1x, logo@2x.png 2x" />
Ergänzend kann durch die Angabe von 1x oder 2x im srcset festgelegt werden, ob es sich um ein Bild in doppelter Auflösung für Retina-Displays handelt oder nicht [Zil13]. Retina-Displays haben gegenüber normalen Monitoren eine höhere Pixeldichte und profitieren daher von höher aufgelösten Bildern [Dav13]. Diese sollten jedoch, aufgrund der höheren Dateigröße, nur an Endgeräte ausgeliefert werden, die diese unterstützen.
Anhand des Versuchs in Abbildung 3.4 wird gezeigt, dass bei der Emulation des Abrufs eines iPhone 4 in den Entwickler-Tools von Google Chrome die Grafik logo@2x.png geladen wurde. Gleichzeitig erfolgte die Übertragung der Bilder in dem Inhaltsbereich der Webseite in der Größe small. Somit konnte das Datenvolumen um 72,5 Prozent, von 138 Kilobyte auf 38 Kilobyte, gegenüber dem Abruf eines Desktop-Rechners, verringert werden.
Picture-Element
Eine weitere Möglichkeit zur Einbindung von Bildern besteht über das neu eingeführte <picture>-Element, das ähnlich aufgebaut ist wie die bereits in HTML5 vorhandenen Container-Elemente <audio> und <video>. Die korrekte Darstellung der Bilder kann auf älteren Browsern durch die Integration des JavaScripts Picturefill [Dav13] und die ergänzende Angabe des <img>-Elements gewährleistet werden [Zil13].
<picture alt=“text“>
<source src=“small.jpg“ />
<source src=“big.jpg“ media=“min-width: 720px“ />
<img src=“small.jpg“ alt=“text />
</picture>
Über die Angabe des media-Attributes in dem <source>-Element lässt sich Einfluss auf die Gestaltung und das Layout einer Webseite, analog zu den Media Queries in den Stylesheets, nehmen. Das oben gezeigte Beispiel teilt dem Browser mit, dass das Bild big.jpg erst ab einer Displaybreite von mindestens 720 Pixeln geladen werden soll. Durch die Steuerung der Auslieferung von Bildern lassen sich die genannten Probleme beim Responsive Webdesign beheben. Bilder können so in einer passenden Auflösung und mit geringerer Dateigröße ausgeliefert werden [Zil13].
Das <picture>-Element hat gegenüber dem <img>-Element den Nachteil, dass zur Definition der einzelnen Bilder mehr Quellcode benötigt wird und die Dateigröße des HTML-Dokumentes ansteigt. In einem Versuch hat Tom Barker nachgewiesen, dass durch die Kombination von <img> und srcset der Quellcode für die Einbindung der Bilder um rund 60 Prozent reduziert werden kann, im Gegensatz zu der Verwendung von <picture> und <source>. Tom Barker gibt jedoch auch zu bedenken, dass das <picture>-Element umfassendere Möglichkeiten gegenüber dem <img>-Element bietet und eine höhere Abhängigkeit zwischen der Anzahl eingebundener Bilder und dem daraus resultierenden Einsparpotential besteht [Bar14].
