UX Audit

Wir trainieren dein Team? Buch unsere Workshops, Trainings und Coachings.

Zeigt her!
Close

Hochauflösende Bilder auf Webseiten einbinden

20. Juni 2013, von stephan

Während klassische Desktop-Monitore in den letzten Jahren kaum an Auflösung hinzugewonnen haben, sind gerade Tablets und Smartphone mit ihren hochauflösenden Bildschirmen die „Treiber“ in der technischen Weiterentwicklung von Displays. Herkömmliche Desktop-Monitore haben meist eine Auflösung von ~72-100 ppi (Erklärung zu Pixeldichte auf Wikipedia). Tablets und Smartphones hingegen haben oft eine mehr als doppelt so hohe Pixeldichte, also 250 – 350 ppi.
Derart hochaufgelöste Displays stellen natürlich eine besondere Herausforderung für die visuelle Gestaltung und Darstellung einer Webseite dar. In einem meiner letzten Beiträge bin ich auf die Möglichkeit eingegangen, Grafiken die sonst als PNG oder GIF ausgeliefert werden, durch moderne, vektorbasierte Grafiken im SVG-Format zu ersetzen. In diesem Blogeintrag werde ich mich mit der Auslieferung von hochauflösenden Grafiken und Bildern beschäftigen, die wegen ihrer Beschaffenheit nicht als Vektorgrafik ausgeliefert werden können.
highres

Warum keine Vektoren?

Natürlich macht der Einsatz von vektorbasierten Grafiken überall dort Sinn, wo bereits das Ausgangsmaterial vektorbasiert ist. Diest ist vor allem bei Icons, Logos und anderen, einfachen Grafiken der Fall die meist in Vektorprogrammen wie z.B. Adobe Illustrator erstellt werden.
Daneben gibt es aber viele visuelle Elemente einer Webseite, die nicht oder nur schwer als Vektoren bereitgestellt werden können. Dazu zählen aufwendige Grafiken und natürlich vor allem Fotos und Bilder.
Google liefert statistische Daten, die zeigen wie wichtig grafische Inhalte auf Webseiten geworden sind. Durchschnittlich enthält eine Webseite laut Google ~29 einzigartige Bilder – eine Zahl die in Zukunft sicherlich noch steigen wird. Nicht zuletzt durch Responsive Webdesign und die damit einhergehende Optimierung von Seiten auf kleine und große Bildschirme bekommen Bilder und Fotos also immer mehr Relevanz.

Vor- und Nachteile von hochauflösenden Bildern

Immer öfter wird natürlich daher der Wunsch geäußert, vorhandenen Foto und Bildcontent neben einer Standard- auch (sofern vorhanden) in einer hochauflösenden Variante anzubieten. Der Vorteil davon ist natürlich gestochen scharfe Bilder auch auf Tablets, Smartphone und hochauflösende Displays ausliefern zu können um so die visuelle Erscheinung der Seite um ein vielfaches zu verbessern.
Neben dem Vorteil gibt es aber natürlich auch einige Nachteile, vor allem die deutlich größere Dateigröße eines Bildes. Um ein Standardbild von 1000 x 1000 Pixel in einer hochauflösenden Variante ausliefern zu können, muss das High-Resolution-Bild 2000 x 2000 Pixel haben – d.h. theoretisch ist die High-Res Variante eines Bildes vier mal so groß. Bedenkt man weiters, dass viele High-Res Devices unterwegs mit (potentiell langsamen) Mobilnetz benutzt werden, fällt dieser Umstand doppelt ins Gewicht. Dem kann nur mit sorgfältiger und starker Bildkomprimierung entgegengewirkt werden, die pro Bild und Grafik ganz individuell festgesetzt werden muss.
Der zweite Große Nachteil ist, dass es noch kein standardisiertes Verfahren gibt, hochauflösende Varianten von Bildern auszuliefern. In den momentan in Entwicklung befindlichen Spezifikationen für CSS 4 findet sich das „image-set“-Attribut (Link), welches zumindest für Bilder, die per CSS eingebunden werden eine Besserung verspricht. Wichtiger ist natürlich eine zukünftige Änderung im HTML <img>-Attribut, welches den Großteil aller dynamisch eingebundenen Bilder (z.B. über das CMS) abwickelt. Ohne diesen neuen Standard muss bisher noch auf Hacks zurückgegriffen werden, um hochauflösende Bilder anzuzeigen.
Ein nicht zu unterschätzender Faktor liegt nicht in der technischen Einbindung sondern auch in der Aufbereitung des Bildcontents. Das Ausgangsmaterial muss in visuell sehr guter Qualität vorliegen, damit die Einbindung als hochauflösendes Bild überhaupt Sinn macht. Weiters erfordert die Aufarbeitung von Fotos und Bildern in verschiedenen Auflösungen und Qualitäten natürlich auch einiges an Arbeitszeit.

Bibliotheken und Libraries für die Einbindung

Fast alle Libraries, die Bilder in Standardauflösung durch Hochauflösende ersetzen, arbeiten rein mit JavaScript. Die bekannteste Library ist RetinaJS, welche beim Seitenstart alle Bilder in einem <img>-Attribut  auf eine höheraufgelöste Variante am Server prüft und diese dann ggf. nachlädt.
Eine andere vielversprechende Library, Adaptive Images,  greift tiefer ins System ein und erfordernt neben einem PHP-Skript und der Modifikation der .htaccess ebenfalls Javascript. Der Zusatznutzen bei Adaptive Images ist die Möglichkeit, andere Bilder für kleinere Devices auszuliefern um so Bandbreite zu sparen.

Zusammenfassung und Ausblick

Neue Standards etablieren sich im Web langsam, deshalb wird es noch lange dauern, bis ein standardisierter und von allen Browsern akzeptierter Weg gefunden ist, um hochauflösende Bilder intelligent ausliefern zu können.
Die Methoden und Techniken um hochauflösende Bilder anzuzeigen werden bis dahin mit Sicherheit vielfältiger, resourcensparender und intelligenter werden – die zusätzliche Arbeit den Content für hochauflösende Displays aufzubereiten wird weiterhin aufwendig bleiben und viel Auge fürs Detail erfordern.

Du willst mit jemanden über das Thema plaudern?

Einen kostenlosen Termin mit CEO Susanne vereinbaren!

Stephan

Meine Rolle bei Liechtenecker: langgedienter Frontend-Veteran Wenn es weder IT noch Digitalisierung gäbe, wäre mein Beruf: Förster ohne Kontakt zu Menschen! Mein Herz schlägt für: die Arterien.
Keine Kommentare vorhanden.
Kommentar verfassen
Name
Mail
Web
Captcha
Erfolgreich!
Fehler!
Technologie – Blogbeitrag

Die Macht von PHPStan: Fehlererkennung und Codequalität in der PHP-Entwicklung

21. März 2024, von Daniel

In der Welt der Webentwicklung ist die Qualität des Codes von entscheidender Bedeutung. Schlecht geschriebener Code kann zu Bugs, Sicherheitslücken und ineffizienter Leistung führen. PHPStan ist ein leistungsstarkes statisches Analysetool, das dazu beitragen kann, die Codequalität zu erhöhen und Bugs frühzeitig zu erkennen. In diesem Beitrag werden wir uns genauer ansehen, welche Arten von Fehlern PHPStan erkennen kann und welche Aufgaben möglicherweise andere Tools übernehmen müssen.

Jetzt lesen
Liechtenecker Leseliste #62 mit Susanne Liechtenecker
Inspiration – Podcasts

Folge #62 mit Susanne Liechtenecker

27. November 2020

In Folge 62 besinnt sich Susanne auf die Anfänge dieses Podcasts und begrüßt keinen Gast, sondern erzählt über das Buch "Jäger, Hirten, Kritiker" von Richard David Precht und warum es sie inspiriert hat.

Jetzt anhören
Close