Foto: congerdesig / Pixabay.com
Einen wesentlichen Bestandteil vieler Websites – vor allem im Nachrichtenbereich – stellen Grafiken und Bilder dar. Im Hinblick auf die Größe der Grafiken, insbesondere im Zusammenhang mit der Website-Performance, sind dabei viele Dinge zu beachten:
Datenmenge und Übertragungsrate
Auf separaten mobilen Websites werden für gewöhnlich gesonderte Bilder und Grafiken in einem für kleinere Geräte passenden Format bereitgehalten. Da die Seite dabei ohnehin über eine dedizierte Codebasis ausgegeben wird, stellt auch die Auslieferung jener mobiloptimierten Grafiken keine besondere technische Anforderung oder gar Hürde dar – obgleich die Probleme mit grafischen Elementen mit zunehmender Gerätevielfalt auch hier zum Tragen kommen (vgl. Maurice 2012b). Im Bereich des Responsive Webdesigns stößt man jedoch eher auf Schwierigkeiten: Zwar ist die flexible Anpassung von Bildern durch CSS width/height Angaben leicht umsetzbar – allerdings bedeutet dies zunächst eine rein browserseitige Skalierung. Da mit einer vollständig anpassungsfähigen Website alle möglichen Geräteklassen – auch große Monitore mit Auflösungen jenseits der 1920x1080px – bedient werden, müssen entsprechend große Grafiken hinterlegt sein. Auch bei verkleinerter Bilddarstellung auf Smartphones bleibt jedoch die ursprüngliche Dateigröße bestehen. Dabei ist es also völlig unerheblich, ob die Ursprungsdatei mit einer Breite von 200px, 400px oder 1000px Breite angezeigt wird. Insbesondere im mobilen Netz ist die Datenverbindung vielerorts noch nicht optimal, sodass große Bilddateien die Ladezeiten erheblich verlängern können. Hinzu kommt ein unnötig erhöhtes Datenaufkommen (engl. Traffic), was ggf. auch beim Anbieter zu vermeidbaren Mehrkosten führen kann. Darüber hinaus kann sich das ständige Skalieren von Bildern auf rechenschwachen oder älteren mobilen Endgeräten merklich auf die Geschwindigkeit des Seitenaufbaus auswirken (vgl. Zillgens 2013, S. 332f).
Schwierigkeiten unterschiedlicher Pixeldichten
Im Zusammenhang mit Bildern verdient die Displayauflösung besondere Aufmerksamkeit. Verdoppelt sich die Pixeldichte, so halbiert sich die Darstellungsgröße des Bildes. Im Browser wird dieser Effekt dadurch kompensiert, dass Bilder mit einer zu geringen Auflösung gezoomt werden, damit sie trotzdem in das jeweilige Layout passen. Dies hat den unschönen Nebeneffekt, dass die Grafiken und Bilder, vor allem im direkten Vergleich zu den vektorbasierten Schriften und CSS-Elementen einer Seite unscharf wirken, was in nachfolgender Abbildung deutlich wird:
Screenshot eines Ausschnitts von WN.de auf einem Retina Display: Im Vergleich zur gestochen scharfen Schrift wirken die Bilder verschwommen (Quelle: Eigene Aufnahme)
Während die Überschrift gestochen scharf erscheint, wirkt das Bild verschwommen. Noch stärker fällt dieser Effekt an den Kanten von Logos oder Icons auf. Speichert man die Bilddateien jedoch in doppelter Auflösung ab, wirken sie auf hochauflösenden Displays umso schärfer. Um Websites also auch für hohe Pixeldichten zu optimieren, welche besonders stark bei mobilen Endgeräten vertreten sind, müssen Grafiken in mindestens zwei Versionen hinterlegt und je nach Bedarf ausgeliefert werden (vgl. Zillgens 2013, S. 208f.):
Das Xbox Logo im Footer von Microsoft.com ist in zwei Auflösungen hinterlegt (vgl. Microsoft.com 2014c)
Probleme im Hinblick auf die Bildaussagekraft
Eine automatische Skalierung von Bildern kann dazu führen, dass die eigentliche Aussagekraft desselbigen verloren geht. Möglicherweise sind wesentliche Bildelemente nicht mehr erkennbar, was insbesondere bei Firmenlogos oder erklärenden Grafiken problematisch werden kann. Jakob Nielsen stellt es daher als unabdingbar heraus, Bilder für jedes Ausgabemedium individuell zuzuschneiden (vgl. Zillgens 2013, S. 196; Nielsen 2012).
In einem weiteren Blogbeitrag werde ich in Kürze mögliche Lösungsansätze für die hier aufgeführten Probleme aufzeigen.
