Eine neue Möglichkeit der Art Direction bei responsiven Bildern

Von Simon Bächler - 19. Oktober 2016

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 sorgt sich als Frontend-Engineer darum, dass unsere Webapplikationen auf allen Geräten perfekt aussehen und blitzschnell laden. 

Kommentieren

* Erforderliche Angaben