19. Oktober 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

Multi-Project Development Environment Setup<br/>
The Developer’s Nightmare: Multi-Project Development Environment Setup

If you are a developer, you have had to set up your development environment for any of your projects. Database, application server, index, and so on. That might go smoothly… or not. If the first applies, CONGRATULATIONS! And get to work ;) but if not, then welcome to the non-smooth environment setup problem. Even worse, what if you need to have different environments for different projects (e.g. database versions)? And what if you need to reset one, but keep the others untouched?

Mehr erfahren
aikido 750x410
Digitales Aikido in der Finanzindustrie

Technologische Fortschritte wie Automatisierung und künstliche Intelligenz gehen auch am Private Banking nicht vorbei. Matthias Plattner plädiert für eine Verbindung alter Werte und neuer Technologien und zieht eine Analogie zur Kampfsportart Aikido.

Mehr erfahren
2017_07_HCE-payment
How Does HCE Address the EMV Goals?

Not a day goes by without new mobile payment apps popping up or the Original Equipment Manufacturers, also called OEMs, launching their own mobile wallets (Apple Pay, Samsung Pay, Android Pay) in additional countries. Especially Switzerland plays an interesting role by focusing on the payment solution TWINT to solve the local mobile payment needs. However, regardless of the payment app and underlying technology, all solutions need to balance usability and security in order to justify a valid business case.

Mehr erfahren
Mobile-Applikationen: Sicherer als gedacht <br/>
Mobile-Applikationen: Sicherer als gedacht

Mobile-Applikationen haftet immer noch der Ruf an, weniger sicher zu sein als ihre webbasierten Gegenstücke. In der Realität verhält es sich jedoch genau umgekehrt. Mobile-Applikationen sind aufgrund moderner Sicherheitskonzepte mobiler Betriebssysteme bedeutend sicherer als jeder PC oder jedes Notebook. Dies selbst dann, wenn manche Sicherheitsvorkehrungen vom Benutzer durch so genanntes Jailbreaking bzw. Rooting der Geräte aktiv unterwandert worden sind.

Mehr erfahren
Helsana+ App
Ab in die Cloud – wie ti&m Helsana+ in die Cloud brachte

Das App-basierte Bonusprogramm Helsana+ belohnt gesundes Verhalten und Treue der Nutzer. Mit ti&m und der Cloud machte Helsana dieses fit für die Zukunft. Dazu haben wir das bestehende Back-end komplett neu als cloud-native Applikation geschrieben.

Mehr erfahren
Lead_boxer
Wer gewinnt den Kampf der hybriden Multi-Clouds?

Durch die hybride Multi-Cloud wird sich die IT-Welt, wie wir sie kennen, grundlegend verändern. Obwohl das Konzept noch am Anfang steht, gibt es in dieser neuen Cloud-Welt bereits einen großen Konkurrenzkampf. In diesem Blogeintrag untersuchen wir, worin sich die verschiedenen Konkurrenten unterscheiden und was ihre Stärken und Schwächen sind.

Mehr erfahren