Die Bedeutung von Super-High-Resolution-Displays für Website-Content

Responsive Webdesign und 5K-Displays
2 Kommentare

Mit der wachsenden Anzahl an unterschiedlichen Devices, mit denen das Internet genutzt werden kann, steigen auch die Anforderungen an Webdesigner. Responsive Webdesign lautet hier die Lösung. Allerdings geht es beim Responsive Design um mehr als das reine Anpassen von Inhalten auf verschiedene Displaygrößen – es geht um die Optimierung von Design und Inhalt auf Anpassbarkeit, Erreichbarkeit und Performance. Gerade bei den neuen 5K-Displays spielt das eine große Rolle.

Mit der Einführung von Retina-Displays wurden Webdesigner vor eine neue Aufgabe gestellt: Bilder mussten an eine weitere Bildschirmgröße angepasst werden. Responsive Webdesign konnte zwar bei der Darstellung von Inhalten auf unterschiedlichen Bildschirmgrößen und Geräteabmessungen für Abhilfe sorgen, doch das richtige Pixelseitenverhältnis (engl. Pixel Aspect Ratio oder PAR) wurde jetzt zum Problem. Denn es gibt nicht nur verschiedene Displaygrößen, auch die Pixeldichte variiert. Dementsprechend ist Responsive Webdesign auf flexible Einheiten wie zum Beispiel Prozent angewiesen. Wird ein Element auf 50 Prozent Breite gesetzt, nimmt es immer die Hälfte des Displays ein – egal, wie groß das Display ist. Bei statischen Einheiten wie Pixel funktioniert das aber nicht.

Nachdem dieses Problem (meist) zur vollen Zufriedenheit gelöst wurde, setzt Apple mit seinen 5K-Displays nach – und das Spiel beginnt bei Auflösung von jetzt 5120 × 2880 Pixeln von vorne: Webdesigner stehen vor der Schwierigkeit, den Inhalt erneut hochskalieren zu müssen. Und das bedeutet, dass man Bilder in höherer Auflösung verwenden sollte.

Hello again, hochauflösende Displays

Um auf Retina-Displays Content ordentlich darzustellen, mussten Bilder in ihrer Größe verdoppelt werden. Mit der Einführung von 5K-Displays müssen sie erneut doppelt so groß sein – das bedeutet, Bilder für diese Displays sind mittlerweile viermal größer als die Ursprungsdatei. Diese riesigen Datenmenge führt zu zwei gravierenden Problemen:

Zum einen benötigen sehr große Bilddateien eine schnelle und stabile Internetverbindung. Das ist so lange kein Problem, wie man sich Websites nur am Desktop-PC betrachtet. Bedenkt man aber, dass inzwischen knapp die Mehrheit der Nutzer Websites mobil besuchen, sieht das Ganze schon anders aus. Die viermal größeren Bilddateien werden jede 3G- und 4G-Verbindung überfordern. Also müssen kleinere Bilder eingesetzt werden, um schnellere Ladezeiten anzubieten und so viel Bandbreite wie möglich zu sparen.

Zum anderen müssen Webdesigner jetzt an eine weitere Bildgröße denken. Baut man eine Website, sollte allen Geräten Rechnung getragen werden – das heißt, eine Bildgröße muss festgelegt werden, die sich für alle Devices eignet. Falls Webdesigner nun Bedenken wegen ressourcenschonendem Arbeiten haben: Ja, das ist ein Problem. Denn eine Handvoll von 1 bis 4 MB großen Bildern ist an sich nicht problematisch, aber was passiert bei tausenden von Bildern?

Die Probleme angehen

Webdesigner sollten jetzt nicht den Mut verlieren, denn es gibt bereits einige Lösungen, um mit der neuen Displaygröße und ihren Anforderungen umzugehen. So erlaubt es beispielsweise Photoshop, ein Bild in einem Vorgang zeitsparend in verschiedenen Größen zu exportieren. Allerdings ist das Feature derzeit nur für 4K- und noch nicht für 5K-Displays verfügbar. Die Einführung einer 5K-Option dürfte jedoch nur eine Frage der Zeit sein.

Auch Media Queries können bei der Bildauswahl helfen: Mit ihnen lassen sich verschiedene Bilder für verschiedene Devices mit unterschiedlichen Pixelseitenverhältnissen bereitstellen. Auf diese Weise erhalten Webdesigner etwas mehr Kontrolle über die richtige Bilddarstellung. Ein weiteres Tool ist PictureFill, das es ermöglicht, ein Bild für jeden User und jedes Device optimiert bereitzustellen. PictureFill kümmert sich dabei automatisch um Bildschirmgröße, Viewportgröße, Bildschirmauflösung etc. Zudem ermöglicht es die Nutzung des element-Features und Workarounds für Browser, die das Feature nicht unterstützen.

Den Übeltäter bekämpfen

Allerdings beseitigen diese Tricks nicht das eigentliche Problem: die unverhältnismäßig großen Bilddateien. Diese führen nämlich zu einem regelrechten Aufblähen der Website, sodass zum einen aus Entwicklersicht die Hosting-Kosten und zum anderen aus Nutzersicht die Ladezeit und somit das Frustrationslevel ansteigen. Mittlerweile hat die Durchschnittswebsite eine Größe von 2 MB überschritten – zwei Drittel davon machen Bilder aus. Die optimale Größe einer Site sollte laut Experten bestenfalls 1 MB nicht überschreiten. Deswegen ist es ratsam, sich stets an folgende Tipps zu halten:

  1. Sind wirklich alle Bilder nötig? Wenn nein, runter damit!
  2. Datengröße verringern. Dabei helfen Tools wie Shrink O’Matic.
  3. Bilder vorladen. Das verringert zwar nicht die Downloadzeit, beschleunigt aber die Ladezeit anderer Unterseiten, die das Bild auch verwenden.

Des Weiteren bietet es sich an, SVG als Bildformat zu verwenden. Denn SVGs weisen eine geringe Dateigröße auf und sorgen so für eine leichtgewichtigere Website. Responsive SVGs sind in der Lage, dasselbe Bild immer wieder neu zu skalieren, damit es für verschiedene Bildschirmgrößen und Geräte geeignet ist.

Bildkompression ist ein weiterer Weg, um die Größe einer Website zu reduzieren. Denn nur, weil Bilder hochaufgelöst dargestellt werden sollen, müssen sie trotzdem nicht in ihrer vollen Größe vorliegen. Tools, die sich zur Datenkompression anbieten, sind zum Beispiel Brotli, TinyPNG und Optimizilla. Im Bildbeispiel unten wurde das Bild um 82 Prozent verkleinert, ohne dass es zu einem merklichen Qualitätsverlust kam.

Bildkompression mit Optimizilla

Screenshot: http://optimizilla.com/de/

Aus Entwicklersicht bietet sich auch das Speichern und Hosten von Bildern in einer Cloud, beispielsweise per Amazon Web Services, an. Denn hier zahlt man nur für den tatsächlich genutzten Platz und kann unter Umständen Content schneller bereitstellen.

Fazit

Damit User nicht abspringen oder die Site ständig neu laden müssen, empfiehlt es sich, auf zumindest eine der genannten Techniken zur Reduzierung der Bildgröße zurückzugreifen. Auch wenn man denkt, dass die modernen Devices ja bereits über eine bessere und schnellere Internetverbindung verfügen – sich aus diesem Grund keine Gedanken über die Webseitengröße zu machen ist ein Fehler:

In 2012, the average page took 7.1 seconds to load in Chrome 20. In 2015, the average load time had increased to 10.4 seconds for pages tested in Chrome 40.

Entwickler sollten darauf achten, ihre Website nicht zu überfrachten. In Zukunft werden die Displaygrößen und –auflösungen weiter anwachsen. Die Bildschirmauflösung der ersten Macs betrug maximal 1024 x 768 Pixel, während die modernen 5K-Displays der neuen Macs mit 5120 × 2880 Pixeln protzen. Sicher wird es auch bald ein solides System geben, das das Handling und Bereitstellen von verschiedenen Bildern für unterschiedliche Bildschirmgrößen und Pixelseitenverhältnisse übernimmt. Bis es soweit ist, sollten sich Entwickler und Designer daran halten, eine Website so clean und leichtgewichtig wie möglich zu halten. Dabei helfen die vorgestellten Tipps.

ML Conference 2019

Workshop: Machine Learning 101++ using Python

mit Dr. Pieter Buteneers (Chatlayer.ai)

Honey Bee Conservation using Deep Learning

mit Thiago da Silva Alves, Jean Metz (JArchitects)

Python Summit 2019

Daten analysieren und transformieren mit Python

mit Doniyor Jurabayev (Freelancer)

Advanced Flow Control

mit Oz Tiram (noris network AG)

Aufmacherbild: 4K television display with comparison of resolutions von Shutterstock / Urheberrecht: scyther5

Unsere Redaktion empfiehlt:

Relevante Beiträge

Hinterlasse einen Kommentar

2 Kommentare auf "Responsive Webdesign und 5K-Displays"

avatar
400
  Subscribe  
Benachrichtige mich zu:
trackback

[…] picture und img gerade für die Verringerung von Ladezeiten an. Genauso ist RWD unabdingbar für hochauflösende Displays, denn der Webseiten-Content muss gemäß der Auflösung hochskaliert werden – und das kann bei […]

trackback

[…] sind es vor allem die sogenannten Large-Screen-Displays, die bei der Gestaltung von Websites für eine Herausforderung sorgen. Jon Yablonski hat einige der […]

X
- Gib Deinen Standort ein -
- or -