Wolfgang.Schmidetzki.Net

Fotos und mehr ...

Adaptive/Responsive Images

Bis vor einigen Jahren war es üblich und normal, daß eine Website an jeden Besucher in identischer Form ausgeliefert wurde. Alle erhielten das gleiche Layout, den gleichen Inhalt und die gleichen Bilder. Dies hat sich insbesondere mit der Einführung mobiler Arbeitsgeräte wie Smartphones und Tablets geändert. Aufgrund der teilweise geringen Bildschirmgröße versucht man heute, jedem Besucher eine für sein Gerät optimierte Version der Webseite auszuliefern.

optimized-images-400.jpg

Dieser Artikel beschreibt den aktuellen Stand der Diskussionen und beleuchtet, welche Rolle Content Management Systeme (CMS) dabei spielen können und sollten.

Responsive Design

Mit „Responsive Designs“ existiert heute ein weit verbreitetes Verfahren, das Problem zumindest teilweise zu lösen. Dabei definiert der Web-Designer unterschiedliche Stylesheets für unterschiedliche Bildschirmbreiten oder Displayauflösungen und der Browser des Endgeräts verwendet die jeweils für ihn geeigneten Stile. Verändert sich die Bildschirmbreite z. B. indem ein Smartphone von Portrait nach Landscape gedreht wird, werden dynamisch andere Stylesheets aktiviert und das Layout paßt sich den neuen Bildschirmdimension an.

Das CMS OpenWGA unterstützt Response Designs mit Hilfe des „Basic Website Kitts“. Websites, die auf dieser Basis realisiert werden, sind automatisch „responsive“ und passen das Layout dynamisch an die aktuelle Bildschirm- bzw. Fensterbreite an.

Responsive (adaptive) Images

Das Layout an die jeweils verfügbare Bildschirmbreite anzupassen ist aber nur die halbe Miete. Die ausgelieferten Inhalte sind immer noch für jedes Endgerät die gleichen. Sie werden nur in angepaßten Layouts angezeigt. Ärgerlich ist dies insbesondere für die Bilder der Website. Alle Endgeräte erhalten die gleichen Bilder. Selbst dann, wenn ein Gerät das Bild überhaupt nicht in der ausgelieferten Auflösung darstellen kann. Das ist letztlich eine Verschwendung von Netz-Bandbreiten und ist insbesondere dann ärgerlich, wenn die Website über langsame und u. U. teure Funkverbindungen an ein Smartphone ausgeliefert wird. Aus diesem Grund ist es wünschenswert, nicht jedem Besucher das gleiche Bild auszuliefern.

Eine weitere Motivation dafür, unterschiedliche Bilder an Endgeräte auszuliefern sind hochauflösende Bildschirme. Moderne Bildschirme besitzen eine hohe Pixeldichte und sind in der Lage, Bilder in hoher Auflösung auf geringen Flächen in „Druck-Qualität“ darzustellen. Wer solche modernen Bildschirme wie sie z. B. in Apples’s iPhone und iPad eingesetzt werden unterstützen will, muß heute alle Bilder der Website in maximaler Auflösung zur Verfügung stellen. Weil aber längst nicht jeder Bildschirm hochaufgelöst ist, werden dadurch an die Mehrzahl der Besucher viel zu große Bilder ausgeliefert.

Anwendungsfälle

Es existieren hautsächlich 3 Anwendungsfälle für „adaptive Bilder“ - also Gründe dafür, unterschiedliche Bilder unter unterschiedlichen Bedingungen auszuliefern.

  • Fall 1 - Bildschirmgröße:
    Je nach verfügbarem Platz auf der Seite sollen kleinere oder größere Varianten eines Bildes ausgeliefert werden

  • Fall 2 - Bildschirmauflösung:
    Hochauflösende Displays sollen höher aufgelöste Bilder erhalten, als weniger hochauflösende Displays

  • Fall 3 - „Art Direction“:
    Je nach aktueller Bildschirmbreite (und -höhe) sollten komplett unterschiedliche Bilder ausgeliefert werden, etwa mit anderen Seitenverhältnissen oder es soll ein anderer Ausschnitt des Bildes angezeigt werden, wenn der verfügbare Platz nicht ausreicht.

Während es in den Fällen 1 und 2 darum geht, das gleiche Bild in unterschiedlichen Varianten auszuliefern, bei denen jedoch Bildausschnitt und Seitenverhältnis identisch sind, geht es im letzten Fall darum, vollkommen unterschiedliche Bilder auszuliefern.

Was ist heute möglich ?

Zunächst sollte klar sein, daß eine notwendige Voraussetzung dafür, unterschiedliche Bilder in unterschiedlichen Situationen auszuliefern ist, daß unterschiedliche Bildvarianten überhaupt verfügbar sind. Natürlich kann man das Erzeugen von Bildvarianten dem Website-Autor überlassen - und im Fall 3 „Art Direction“ ist das wohl auch gar nicht anders möglich. Die Realität ist jedoch die, daß Autoren mit dieser Aufgabe in der Regel überfordert sind. Jedenfalls würde ein manueller Prozeß aber den Aufwand für jede einzelne Webseite deutlich erhöhen. Erst recht problematisch wird es bei "user generated content", wenn beliebige User Bilder in Seiten einfügen können.

Wünschenswert ist daher, daß ein CMS, mit dem die Website gepflegt wird, automatisch zu jedem hochgeladenen Bild mehrere Varianten in unterschiedlichen Auflösungen erstellt und verwaltet.

Das CMS OpenWGA erfüllt dieser Grundvoraussetzung: Für jedes ins CMS eingefügte Bild erstellt OpenWGA transparent für den Autor im Hintergrund mehrere Varianten des Bildes in unterschiedlichen Auflösungen.

Eine weitere Notwendigkeit zur Lösung des Problems ist, daß irgendwie zum Ausdruck gebracht werden kann, welches Bild in welcher Situation verwendet werden soll.

OpenWGA Image Derivate

Das CMS OpenWGA erzeugt nicht nur automatisch die notwendigen Bildvarianten („Derivate“) sondern bietet auch ein Mittel, um zum Ausdruck zu bringen, welche Variante wann verwendet werden soll. Dies geschieht entweder am <tml:image> Tag für ein einzelnes Bild oder an einem umliegenden <tml:range> Tag für alle Bilder eines ganzen Bereichs der Website - etwa die schmale rechte Teaserspalte. Beide Tags besitzen dafür ein Attribut, in dem eine „Wunschgröße“ für das Bild angegeben werden kann. Beim Ausliefern einer Webseite wählt OpenWGA selbstständig für jedes Bild die kleinste Bildvariante aus, die gerade noch größer als die angegebene Wunschgröße ist.

Mit Hilfe dieser Technik kann bereits heute Anwendungsfall 1 mit OpenWGA gelöst werden. Die Größe der ausgelieferten Bilder hängt von der Position und vom dort verfügbaren Platz auf der Seite ab. Für den Autor der Website ist dieser Prozeß dabei vollkommen transparent.

Der HTML5 <picture> Tag

Um alle 3 Anwendungsfälle abzudecken werden derzeit unterschiedliche Erweiterungen des HTML Standards diskutiert. Eine dieser Erweiterungen ist ein neuer HTML Tag <picture>. Im Picture-Tag wird eine Liste von Bild-URLs angegeben zusammen mit Informationen darüber, welches Bild in welcher Situationen verwendet werden soll. Die Informationen basieren auf „Media-Queries“, die bereits heute bei der Definition von Stylesheets für Responsive Designs verwendet werden.

Der neue <picture> Tag ist noch nicht vollständig abgestimmt und die Definition ändert sich derzeit noch regelmäßig. So ist es nicht verwunderlich, daß der neue Tag noch von keinem Browser unterstützt wird.

Das HTML5 srcset Attribut

Mindestens für die Anwendungsfälle 1 und 2 wird derzeit eine zum <picture> Tag wesentlich einfachere Variante diskutiert. Dabei geht es um ein neues Attribut am HTML <img> Tag namens „srcset“. Das srcset Attribut enthält eine Komma-separierte Liste von URLs zusammen mit einem „Verwendungszweck“.

Als „Verwendungszweck“ kann beispielsweise die Bildschirmauflösung angeben werden:

<img src=„default.jpg“ srcset=„default.jpg 1x, large.jpg 2x“>

Die Angabe 1x und 2x bezeichnet dabei die „Device Pixel Ratio“, also die Pixeldichte des Displays, auf dem die Website angezeigt wird.

Grundsätzlich entscheidet der Browser, welches der angegebenen Bild-URLs er lädt und anzeigt. Im obigen Beispiel würde ein Browser, der auf einem Endgerät mit Retina-Display läuft das Bild „large.jpg“ anzeigen, während andere Browser „default.jpg“ anzeigen. Dieser Verwendungszweck löst somit Anwendungsfall 2.

Um zusätzlich Anwendungsfall 1 zu lösen kann als „Verwendungszweck“ alternativ - zusammen mit einem weiteren neuen Attribut „sizes“ - angegeben werden, bei welcher Bildschirmbreite welches Bild geladen werden soll.

Das neue HTML5 srcset Attribut mit Verwendungszweck „Device Pixel Ratio“ wird bereits heute von Google Chrome unterstützt. Sowohl Apple’s Safari als auch Mozilla’s Firefox werden mit großer Wahrscheinlichkeit bald folgen - in Safari ist das Attribut bereits in „Nightly Builds“ implementiert.

Der Verwendungszweck „Bildschirmbreite“ ist dagegen nach wie vor noch nicht vollständig abgestimmt und wird daher auch bisher von keinem Browser unterstützt.

Das CMS OpenWGA erzeugt das neue srcset Attribut mit Verwendungszweck „Bildschirmauflösung“ selbstständig für alle <tml:image> Tags mit Derivats-Angabe. Darüber hinaus erzeugt auch das Inhaltsmodul „Bild“ das neue srcset Attribut selbstständig, ohne daß Autoren oder Designer Einfluß nehmen müssen.

src-N

Als Alternative sowohl zum <picture> Element als auch zum srcset Attiribut wird im Netz seit einiger Zeit eine weiterer Alternative zur Lösung aller 3 Anwendungsfälle für adaptive Bilder diskutiert. Dabei handelt es sich ebenfalls um neue Atribute am <img>-Tag. Diese Attribute werden mit src-1, src-2 … angegeben - daher der Name „src-N“.

Eine Implementierung in einem real verfügbaren Browser existiert derzeit nicht. Ob sich dieses Konzept gegenüber den Alternativen durchsetzen wird ist unklar und wird an dieser Stelle nur der Vollständigkeit halber erwähnt.

HTTP Client-Hints

Eine weitere bei Browserherstellern diskutierte Möglichkeit, mindestens Anwendungsfall 1 zu lösen, liegt in einer Erweiterung des HTTP Protokolls um einen zusätzlichen HTTP-Header. Dabei teilt der Browser dem Server bei jeder Anfrage mit, mit welcher Pixeldichte das Display des Clients arbeitet. Der Server entscheidet darauf hin, in welcher Auflösung Bilder ausgeliefert werden.

Derzeit werden diese sogenannten „Client-Hints“ ausschließlich von Google Chrome gesendet - und auch nur dann, wenn dies in den Einstellungen des Browsers explizit aktiviert ist. Ob Client-Hints zukünftig auch in weiteren Browsern unterstützt werden, ist derzeit unklar.

Unabhängig davon unterstützt das CMS OpenWGA diese „Client Hints“ bereits heute und multipliziert die im Design angegebene „Wunschgröße“ der Bilder in diesem Fall selbstständig mit der per HTTP-Header mitgeteilten Device Pixel Ratio des Clients.

Fazit

Die Anwendungsfälle 1 (Bildauswahl basieren auf dem verfügbaren Platz) sowie Fall 2 (Bildauswahl basierend auf der Bildschirmauflösung des Endgeräts) werden bereits heute „out of the box“ vom CMS OpenWGA unterstützt. Einerseits erzeugt OpenWGA selbstständig das srcset-Attribut, andererseits wertet OpenWGA per HTTP gesendete Client-Hints aus und paßt Bildgrößen entsprechend an.

Damit stellt bereits heute Google Chrome die Bilder einer OpenWGA Website optimal auf Retina Displays dar, ohne dabei Bandbreite für andere Endgeräte zu verschwenden.

Durch die Angabe von „Wunschgrößen“ im Design liefert OpenWGA bereits heute an alle Endgeräte und Browser Bilder passend zur verwendeten Position auf der Website aus. Das spart nicht nur Bandbreite und machte die Website schneller, es entlastet auch die Autoren einer Website im Umgang mit dem Thema „Bildgrößen“.

Links:

Kommentare:

Gerd 08:49 Uhr MESZ

Sehr schöner Beitrag (seit langer, langer Zeit) mal wieder von Dir. ;-)

LG, Gerd

betzj@esv.de 09:56 Uhr MEZ

Hallo,

ich bin Ausbilder im Berufsbildungswerk der Evangelischen Stiftung Volmarstein und habe ein Foto von Ihnen im Netz gefunden. Scater in Ratingen. Gerne würde ich das Bild für einen Flyer verwenden. Es geht um das Thema Chance Zukunft. Dort sollen Langzeitarbeitslose junge Menschen spielerisch wieder an eine Ausbildung oder Beruf herangeführt werden. Der Flyer soll in einer Auflage von 100 St. erscheinen und nur von unserem Integrationsdienst und unserem Psychologen benutzt werden. Können Sie uns das Foto zur Verfügung stellen? Kostet das etwas? Da wir es etwas eilig haben, bitte ich um eine möglichst zügige Antwort und vielen Dank im voraus.

LG

Betz

Bitte geben Sie hier Ihren Kommentar ein:

Verwende Markdown Syntax

Powered By

  • OpenWGA Blogs 2.4.1 Build 131
    Running on:
    womodo CMS Server 7.4.5 Maintenance Release (Build 663)
    www.openwga.com