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

Lead Code Camp
Das dritte Code Camp stand ganz im Zeichen der künstlichen Intelligenz

Beim dritten Code Camp von ti&m drehte sich alles um das Thema künstliche Intelligenz (KI). Mehr als 20 Entwickler kamen zusammen, um ihr Wissen in der Technologie zu vertiefen. In 30 Stunden Programmieren lernten die Teilnehmer, was mit KI alles möglich ist.

Mehr erfahren
Welcome_Lead
Google Anthos – Die Cloud Platform der Zukunft

Niemand Geringeres als Urs Hölzle hat das Anthos-Projekt von Google in Zürich vorgestellt. Anthos soll nichts weniger als zum Linux für die Cloud werden. Unser Senior Software-Ingenieur Fabian Camenzind war dabei und gibt einen Einblick in die wesentlichen Features sowie die Vor- und Nachteile von Anthos.

Mehr erfahren
201708_Identität
Starke digitale Identität für Start-ups

Ein guter Tipp: Nutzen Sie die Eitelkeit des Individuums, um die digitale Identität Ihrer Organisation zu stärken und deren Visibilität zu erhöhen.

Mehr erfahren
Why Large Companies Need Small Garages
Why Large Companies Need Small Garages for Their Digitization Initiatives

Many established companies face the challenge of digitization and possible disruption by innovative startups or new market entrants.

Mehr erfahren
What Can Small Businesses Gain from Data Analytics?
What Can Small Businesses Gain from Data Analytics?

Small businesses need to change their general big data approach. The question they should ask themselves is not “what can we gain from the collected data?” but “what do we need to grow the business and how can data analytics help reach that goal?”.

Mehr erfahren
cloud_bank_now_aws_blog
Der ideale Workload für die Cloud – Buildprozesse mit Spot-Instanzen

Eine der ersten Fragen, die sich im Cloud Kontext stellt, ist: Welche Workloads eignen sich für den ersten Schritt in die Cloud? Lesen Sie im Folgenden, weshalb Build- und Test-Prozesse für Software-Artefakte besonders geeignet sind und was es basierend auf den Erfahrungen aus unserem Projekt mit der BANK-now zu beachten gilt.

Mehr erfahren