19. October 2016

Eine neue Möglichkeit der Art Direction bei responsiven Bildern

Eine neue Möglichkeit der Art Direction bei responsiven Bildern

Das Jahr 2015 markiert ein Meilenstein in der digitalen Medienlandschaft. Zum ersten Mal verwendeten mehr Leute das Internet über mobile Geräte als über Desktop-Browser. Die Webseitenbetreiber haben deshalb ihre Webseiten responsive gestaltet. Je nach Gerät und Bildschirmgrösse wird das Layout der Seite anders dargestellt, so dass der Inhalt immer optimal sichtbar ist.

Ein wichtiger Teil der Webseiten wird bisher allerdings nicht berücksichtigt: Die Bilder. Je nach Bildinhalt reicht es nicht, das Bild einfach auf Smartphone-Grösse zu verkleinern. Es kann sein, dass relevanter Bildinhalt aufgrund der Grösse nicht mehr sichtbar ist. Es kann auch sein, dass unwichtige Elemente plötzlich dominant werden. Besonders Bilder von Personen in einer bestimmten Umgebung sind davon betroffen. Ein gutes Beispiel zeigte Jason Grigsby bereits 2012 in seinem Blog:

Auf Desktop-Browsern erkennt man im Hintergrund eine Autofabrik. Der Hintergrund ist unscharf und deshalb nicht störend. Er hilft aber, das Bild in einen Kontext zu bringen.

Wenn wir jetzt eine kleine Version dieses Bildes anschauen, wird aus dem unscharfen Hintergrund plötzlich das Hauptmotiv:

Obama ist kaum noch zu erkennen. In diesem Fall macht es Sinn, für kleine Auflösungen nur noch einen Ausschnitt des Bildes anzuzeigen.

Dies wird Art Direction genannt und ist das Thema meiner Bachelor-Arbeit an der ZHAW.

Mittlerweile ist es möglich, auf Webseiten je nach Bildschirmgrösse unterschiedliche Varianten eines Bildes anzuzeigen. Alle Browser ausser dem IE11 unterstützen diese Technologie nativ. Der Hauptanwendungsfall des Picture-Tags ist es zwar, für Retina-Displays hochaufgelöste Varianten eines Bildes zu laden, aber die Tags werden auch für Art Direction eingesetzt.

Browserseitig ist die Technologie also bereit. Auf der Seite der Inhalt-Anbieter hingegen scheint man von Art Direction noch nie etwas gehört zu haben.

Aktuell muss ein Redaktor alle Varianten eines Bildes von Hand erstellen und die Regeln, wann welches anzuzeigen ist selbst definieren. Wenn also ein Pressebild auf 100 News-Webseiten angezeigt wird, dann muss diese Aufgabe 100-mal ausgeführt werden.

Eine Umfrage unter Fotografen hat ausserdem gezeigt, dass jeder einen anderen Ausschnitt für die mobile Version wählen würde. Dies bedeutet auch, dass wenn ein Online-Redaktor ein Bild zuschneidet, dieses vermutlich nicht so zugeschnitten wird, wie der Fotograf es sich vorgestellt hätte.

Hinzu kommt, dass der Fotograf als Urheber des Bildes sich gegen jegliche Veränderung desselben wehren kann. Die Antwort auf die Frage, ob ein reiner Zuschnitt ein Werk genügend verändert, das das Urheberrecht greift, ist von Land zu Land unterschiedlich.

All die oben genannten Probleme können gelöst werden, wenn es einem Fotografen möglich wäre, für jedes seiner Bilder angeben zu können, ob und wie das Bild für mobile Geräte zugeschnitten werden darf.

Ein Bild, egal in welchem Format es gespeichert ist, enthält unsichtbare Metadaten, welche Informationen zum Bild beinhalten. Dazu gehören beispielsweise Informationen darüber wer der Fotograf ist, wann das Bild aufgenommen worden ist, oder welche Agentur das Copyright an dem Bild hält. Wenn responsive Informationen ebenfalls als Metadaten gespeichert wären, bräuchte es nur noch einen Webserver, der diese Metadaten interpretieren kann und das Bild korrekt zuschneidet. Redaktoren und Content-Provider müssten sich nicht mehr darum kümmern.

Da es bisher keinen solchen Standard gibt, wird mithilfe einer W3C Community Gruppe ein Standard entwickelt, mit dem es möglich ist die nötigen Informationen als Metadaten in ein Bild zu speichern. Der Standard basiert auf dem XMP-Format, welches selbst auf XML basiert und somit beliebig erweiterbar ist. Der Standard wurde am 17. April 2016 unter dem Titel «Responsive Metadata XMP Standard» als W3C First Public Working Draft veröffentlicht.

Dieser Standard ermöglicht, folgende Informationen direkt in der Bilddatei zu definieren:

  • Ob, und unter welchen Umständen das Bild zugeschnitten werden darf.
  • Die Definition einer Fläche, die unter keinen Umständen angeschnitten werden darf.
  • Die Definition eines Standard-Beschnitts. Damit ist es möglich, ein grösseres Bild als das angezeigte Bild zu speichern. Somit kann ein Zuschnitt mit einem Seitenverhältnis definiert werden, das in seiner Achse über den Ursprungs-Beschnitt hinausgeht.
  • Die Definition mehrere Beschnitte für fest definierte Bildschirmgrössen.
  • Die Information, ob die Beschneidung linear skaliert, oder nur in festgelegten Schritten erfolgen darf

Visualisiert auf einem Bild sieht das folgendermassen aus:

Da die Zielgeräte unterschiedliche Auflösungen haben, funktioniert das Bildschirmpixel als Einheit nicht. Ein iPad hat zum Beispiel eine höhere Auflösung als ein HD-Fernseher mit 2m Bilddiagonale. Deshalb wird als Referenz-Einheit das CSS-Pixel verwendet. Dieses basiert auf einem Winkel und ist somit unabhängig von der effektiven Auflösung des Gerätes.

Es werden zwei Prototypen erstellt. Ein Plug-In für Photoshop mit dem es möglich ist, über ein GUI die responsiven Regeln zu definieren und bestehende Regeln im Bild anzeigen zu lassen. Ausserdem ein Server-Middleware, welche die Metadaten ausliest und das korrekt zugeschnittene Bild für jede Screengrösse ausliefert. Dies reicht bereits, um den ganzen Workflow durchzuspielen. Das Ergebnis ist auf der Demo-Seite sichtbar.

Obwohl das Photoshop-Plug-In nur ein Proof-of-Concept mit minimalem Funktionsumfang ist, wird es über 2400-mal vom Adobe Store heruntergeladen. (Photoshop-Plug-Ins können nur noch über den Adobe Store installiert werden.)

Dies zeigt, dass ein gewisses Interesse für das Thema vorhanden ist. Denn aktuell gibt es ausser dem Web-Service Thumbor noch keine Software, die diese Metadaten interpretieren kann.

Es herrscht das bekannte Huhn und Ei Problem: Es braucht genügend Bilder mit Metadaten, damit mehr Web-Frameworks die Daten interpretieren können. Nutzer machen sich aber erst die Mühe, Metadaten zu einem Bild hinzuzufügen, wenn genügend Web-Frameworks vorhanden sind, die diese verwenden können.


Simon Bächler
Simon Bächler

Simon Bächler sorgt sich als Frontend-Engineer darum, dass unsere Webapplikationen auf allen Geräten perfekt aussehen und blitzschnell laden. 

Ähnliche Artikel

Authentication vs. Authorization with OAuth, Does It Really Matter?
Authentication vs. Authorization with OAuth, Does It Really Matter?

While in the security field the terms authentication and authorization have a clearly defined definition, with the introduction of concepts such as “delegated authorization” ambiguity might arise. However, it seems that we know what we intend and therefore should we even bother with such discussions?

find more information
Digitalisierung total - die Vernetzung der Dinge
Digitalisierung total - die Vernetzung der Dinge

Editorial: 1 Milliarde PCs, 5 Milliarden Smartphones und geschätzt zwi­schen 50 und 100 oder mehr Milliarden vernetzte Dinge, das sind die prognostizierten Zahlen per 2020. Die neue Ausgabe vom ti&m special beleuchtet, inwiefern sich reale und virtuelle Welt immer mehr vermischen und welchen Einfluss FinTech-Unternehmen und Start-ups dabei haben.

find more information
UX Design 750x410
UX Designer vs. UX Design

find more information
Dog 750x410
On the Internet, Nobody Knows You're a Dog – Identification with OpendIDConnect, the Prelude to Unique OAuth Authorization

When considering authentication, the first thing people think of is identity. However, with the use of new authentication frameworks applied to current business cases, essential security requirements seem to get neglected. Thus, it might just happen that we lose our identity on the internet. This article is part of a series based on different user’s feedback dealing with fundamental security concepts applied to the applicability of authentication and authorization protocols such as OAuth and OpenIDConnect.

find more information
Wird der Zero Moment of Truth von Versicherern berücksichtigt?
Wird der Zero Moment of Truth von Versicherern berücksichtigt?

Mit dem Zero Moment of Truth bezeichnete Google 2011 den Moment in dem eine Entscheidung für ein ganz bestimmtes Produkt oder eine Marke gefällt wird, also die Recherche vor dem tatsächlichen Kauf. Wenn Versicherer diesen Moment nicht berücksichtigen, fehlt ihnen ein wesentlicher Teil der Marketingstrategie und sie laufen Gefahr, die Kundenschnittstelle an andere Player zu verlieren.

find more information
Am 31. Oktober haben wir die Vernissage von art@work in Zürich gefeiert.
Das war art@work 2019 in Zürich

Am 31. Oktober haben wir in Zürich die 14. Auflage von art@work gefeiert. Rund 300 Gäste kamen in unser Büro, um sich von den Grafiken und Ombros des Künstler DRÜ EGG verzaubern zu lassen.

find more information