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

Digital Onboarding - Startschuss der digitalen Kundenbeziehung
Digital Onboarding – der Startschuss für die digitale Kundenbeziehung

Die Finanzindustrie steckt mitten im Prozess einer tiefgreifenden Transformation. Die Welt wird digital. Extrem leistungsfähige mobile Geräte, Onlinefähigkeit zu jeder Zeit und an jedem Ort sowie die Sammlung und Echtzeitanalyse von riesigen Datenmengen verändern die traditionellen Spielregeln im Markt.

find more information
Data isn’t valuable. Information is!<br/>
Data isn’t valuable. Information is!

Banks spend a vast amount of time researching and collecting data about clients, but often lack the bigger picture of connecting these separate data piles from various systems. Data alone is worthless, but connected and turned into information using an identity database, new possibilities such as reducing the cost per client, increasing quality of service and anticipating a client's actions are possible.

find more information
Rüesch_Conrad_Special
Digitalisation calls for Agile strategy processes

Traditional strategy cycles no longer meet the requirements of today’s digital world. Transformation processes place completely new demands on the approaches for developing corporate strategy. Continuous iterations make the difference between success and irrelevance.

find more information
Interview
“The law doesn’t distinguish between domestic and foreign clouds”

Many banks have only just begun to take a closer interest in the cloud. They continue to have reservations, first and foremost about the compatibility of the cloud with banking secrecy. Martin Hess, Head of Digitalization and Economic Policy and Board Member of the Swiss Bankers Association, has the answers.

find more information
Axpo Agile Workshop Lead Image
Wie man mit dem Bau eines Marsrovers agiles, skaliertes Vorgehen lernt

Wie man agiles Arbeiten auch spielerisch erlernen kann, haben wir bei der Axpo gezeigt. Wir bauten einen Marsrover mit agilen Methoden. Was gar nicht so einfach war, jedoch gut gemeistert wurde.

find more information
Homeoffice_work_business
Banking – made in Swiss Homeoffices

Wandelt sich das Homeoffice nun auch für die Schweizer Bankenwelt zur Normalität? Zumindest ist sicher, dass die Covid-Krise langfristige Auswirkungen auf die Bankenkultur haben wird. Anhand von vier Hypothesen zeigen wir mögliche Veränderungen auf.

find more information