Zeige alle Blogbeiträge

Responsive Bilder - ein Überblick

 (Kommentare: 4) | Beitrag empfehlen auf 

Responsive Grafiken in Blink
Responsive Grafiken in Opera

Contao unterstützt seit Version 3.4 die Auslieferung von responsiven Bildern im Core. Die Umsetzung von Martin Auswöger und Yanick Witschi ist ziemlich pfiffig, aber die Benutzung fällt deutlich leichter, wenn man die wichtigsten Infos zum Thema responsive Bilder kennt.

Dieser Blogbeitrag gibt einen kurzen Überblick. 

HTML und responsive Grafiken

Im CSS gibt es Media Queries, mit denen man je nach Browserumgebung das Layout und Hintergrundbilder anpassen kann, aber für mit <img> im HTML eingebundene Bilder gab es bisher keine Möglichkeit, unterschiedliche Bilder auszuliefern. Grafikintensive, responsive Webseiten sind deshalb mobil manchmal etwas langsam, weil sie für alle Browser dieselben großen Grafiken im Gepäck haben. 

Nach einer intensiven jahrelangen Diskussion gab es in 2014 mit der picture-Spezifikation der Responsive Image Group so etwas wie einen Durchbruch. Zum ersten Mal gelang es allen Beteiligten, sich auf einen Nenner zu einigen.  

Die picture-Spezifikation erweitert das img-Element

Grafiken werden im HTML mit <img> eingebunden, und daran ändert sich auch in der schönen neuen Welt der responsiven Grafiken nichts. Jede Grafik, die im Browserfenster erscheint, wird mit <img> dorthin befördert. Immer. 

Die picture-Spezifikation erweitert <img> lediglich um neue Möglichkeiten, und dabei gibt es zwei Varianten: 

  • Neue Attribute: Für <img> gibt es die neuen Attribute srcset und sizes
  • Neue Elemente: <picture> und <source> können <img> ergänzen. 

Oft reichen <img> und die neuen Attribute. Die neuen Elemente wie <picture> und <source> braucht man nur in bestimmten Situationen, die mit dem Begriff »art direction« umschrieben werden.

Anwendungsfälle für responsive Bilder

Es gibt drei wichtige Anwendungsfälle, für die es unterschiedliche Lösungen gibt: 

  1. Unterschiedliche Pixeldichte
    Für normale und hochauflösende Bildschirme sollen unterschiedliche Grafiken ausgeliefert werden. Dazu wird <img> um das Attribut srcset mit x-Werten erweitert.
  2. Unterschiedliche Viewportbreite 
    Für unterschiedliche Viewportbreiten soll dieselbe Grafik in unterschiedlichen Versionen ausgeliefert werden. Dazu wird <img> um das Attribut srcset mit w-Werten und das Attribut sizes erweitert.
  3. Unterschiedliche Bildmotive
    Je nach Browserumgebung sollen unterschiedliche Bildausschnitte ausgeliefert werden (»art direction«). Dazu benötigt man die neuen Elemente <picture> und <source>

Die picture-Spezifikation ermöglicht es auch, unterschiedliche Dateiformate auszuliefern, aber das ist momentan wohl eher ein Sonderfall. In diesem Blogbeitrag möchte ich die ersten beiden Anwendungsfälle kurz erläutern. 

Browser und Autor zusammen haben alle benötigten Informationen, um responsive Grafiken ausliefern zu können. Die folgende Tabelle zeigt das im Überblick. 

Tabelle 1: Autor und Browser ergänzen sich perfekt.
Nr. Benötigte Information Autor Browser
1. Pixeldichte des Bildschirms nein ja
2. Viewportbreite nein ja
3. Breite der Grafikdatei ja nein
4. gewünschte Darstellungsbreite ja nein

1. Grafiken nach Pixeldichte: img und srcset x

Im ersten Anwendungsfall geht es darum, Bildschirmen mit unterschiedlichen Auflösungen jeweils passende Bilddateien zu geben. Dazu wird das img-Element um das Attribut srcset erweitert. Hier ein Beispiel: 

<img src="small.jpg"
  srcset="small.jpg 1x, large.jpg 2x">

Das Attribut srcset enthält einen Satz (engl. set) von Grafikdateien und der x-Wert dahinter gibt die Pixeldichte des Bildschirms an. 2x heißt also doppelte Pixeldichte, wie z. B. bei Apples Retina-Bildschirmen in iPhone und iPad. 

Diese Syntax ist recht simpel und die Browserunterstützung ist recht gut (sogar Safari 8), aber mit responsiv hat das nicht viel zu tun, da die Viewport-Breite keine Rolle spielt. 

2. Grafiken nach Viewport: img und srcset w

Wer sich mit responsiven Bilder beschäftigt, lernt bald neue Einheiten kennen. In diesem Abschnitt wird in srcset das x durch ein w ersetzt. 

<img src="small.jpg"
     srcset="small.jpg 650w, 
             medium.jpg 1000w, 
             large.jpg 1600w">

Mit dem w-Wert teilt der Autor der Webseite dem Browser die tatsächliche Breite der Grafikdatei mit. Dadurch kennt der Browser die Breite der Grafiken, ohne dass er die Dateien herunterladen muss. Der Browser kann dann je nach Viewportbreite eine andere Grafik laden: 

  • Bis inklusive 650px erscheint small.jpg
  • Bis inklusive 1000px erscheint medium.jpg
  • Ab 1600px nimmt der Browser large.jpg.  

Brad Frost hat einen kurzen Blogbeitrag zu responsiven Grafiken und auf Codepen ein Beispiel zur Syntax mit srcset w veröffentlicht.

Zum Testen am besten den Firefox nehmen und nach dem Ändern der Viewportbreite die Seite neu laden. Zum Testen in Chrome oder Opera diesen Blogbeitrag lesen. Safari 8 und IE11 können das nicht. 

Der Browser ergänzt sizes="100vw"

Bis jetzt ist ja noch alles ganz einfach, aber keine Bange, das bleibt nicht so. Es fängt damit an, dass der Browser im obigen Beispiel automatisch das Attribut sizes mit dem Wert 100vw ergänzt, sodass das Beispiel komplett wie folgt aussieht:

<img src="small.jpg"
     srcset="small.jpg 650w, 
             medium.jpg 1000w, 
             large.jpg 1600w"
      sizes="100vw">

Richtig gelesen. Einhundert Vau-Weh. Damit ist hier aber nichts "das Auto" gemeint, sondern die gar nicht so neue aber bisher eher unbekannte Einheit viewport width1vw entspricht dabei genau einem Prozent der Viewportbreite, 100vw heißt also volle Breite vom Browserfenster. Für den Browser liefert das Attribut sizes die Berechnungsgrundlage für die gewünschte Bildbreite.

Die Pixeldichte ist schon mit drin

Der Clou an der Sache ist, dass die Pixeldichte in dieser Kombination bereits mit enthalten ist, auch ohne den x-Wert aus dem ersten Anwendungsfall: 

  • Der Browser kennt die Pixeldichte des Bildschirms. 
  • Bei doppelter Pixeldichte veranschlagt er einfach doppelt so viele Pixel.  
  • Ein Viewport von 768px (iPad im Hochformat) würde also eine 1536px breite Grafik erfordern. 

Der Browser berücksichtig bei der Auswahl der Grafik also Viewportbreite UND Pixeldichte. 

Das Attribut »sizes« kann Media Queries enthalten

Wenn die Grafik die gesamte Breite des Browserfensters (100vw) einnehmen soll, ist das Problem gelöst, aber das ist natürlich nicht immer der Fall. Enter Media Queries. 

<img src="small.jpg"
     srcset="small.jpg 650w, 
             medium.jpg 1000w, 
             large.jpg 1600w"
      sizes="(min-width:600px) 500px, 100vw">

Und schon muss der Browser ein bisschen mehr rechnen: 

  • Ist der Viewport breiter als 600px soll die Grafik 500px breit sein.
  • Darunter, also bis 599px, soll die Grafik die volle Viewportbreite einnehmen.

In beiden Fällen berücksichtigt der Browser bei der Auswahl des Bildes quasi nebenbei auch die Pixeldichte. 

An dieser Stelle wird bereits deutlich, dass man sich als Autor der Webseite genau überlegen muss, welche Grafiken wann wo wie breit sein sollen, bevor man in Contao die entsprechenden Einstellungen vornehmen kann. 

Der Browser hat mit w-Wert und sizes alle Informationen

Mit den Attributen srcset, dem w-Wert und dem Attribut sizes übermitteln wir dem Browser die Informationen, die er benötigt, um eine Entscheidung treffen zu können. 

Aber die Entscheidung, welche Grafik genommen wird, trifft der Browser, denn nur der hat alle benötigten Informationen, die er zum Teil von uns als Autoren der Webseite bekommen hat. 

Tabelle 2: Der Browser hat alle benötigten Informationen
Nr. Benötigte Information Autor Browser
1. Pixeldichte des Bildschirms nein ja
2. Viewportbreite nein ja
3. Breite der Grafikdatei ja ja, srcset mit w-Wert
4. gewünschte Darstellungsbreite ja ja, mit sizes

Responsive Bilder in Contao

Wenn man sich dann überlegt hat, welche Grafiken wann wo und wie dargestellt werden sollen, dann kann man das in Contao ab Version 3.4 recht leicht festlegen. Wie das geht hat Martin in einem ausführlichen Blogbeitrag gezeigt: 

In dem Blogbeitrag wird dann auch gleich der dritte Anwendungsfall gezeigt: Responsive Bilder mit art direction. Contao erzeugt in dem Fall automatisch die benötigte Syntax mit <picture> und <source>. Schaut euch das später ruhig mal im Quelltext an und stellt euch kurz vor, ihr müsstest das von Hand schreiben. Dann beginnt ihr zu verstehen, wie genial diese von Martin und Yanick programmierte Funktion ist.

Weitere Quellen

Wer mehr über responsive Grafiken wissen möchte, kann sich folgende Werke von mir einmal näher anschauen: 

In English, but highly recommended is the following series of articles:

Und jetzt wünsche ich euch viel Spaß mit der Responsifizierung eurer Grafiken. 

Peter Müller - Autor und Dozent

Mein Name ist Peter Müller. Ich bin Autor diverser Fachbücher und Videotrainings, Dozent und Webworker.

Ab und an schreibe ich hier im Blog Beiträge zu den verschiedensten Themen, aber meistens hat es was mit dem Web zu tun. 

Zeige alle Blogbeiträge

Kommentare

Kommentar von Sven |

Schöne übersichtliche Zusammenfassung Peter!

Eines möchte ich allerdings ergänzen. Der Satz „Ist der Viewport breiter als 600px soll die Grafik 500px breit sein. Darunter soll die Grafik die volle Viewportbreite einnehmen.“ stimmt nicht ganz denke ich.

Ich meine es sollte heißen: „Darunter wählt der Browser anhand der Viewportbreite (hier also max 599px) und wählt dafür das passende Bild (inkl. Pixel-Density-Faktor) für die Darstellung.“ Oder?

Antwort von Peter Müller

Danke für das Kompliment! Ich habe deinen Kommentar leicht editiert und ein "und wählt dafür" gestrichen, weil der Satzbau irgendwie nicht stimmte. Falls das so nicht stimmt, sag bitte kurz Bescheid, dann ändere ich das entsprechend.  

Ansonsten sehe ich keinen Unterschied, außer dass deine Version etwas präziser formuliert ist. Mein Satz "Darunter soll die Grafik die volle Viewportbreite einnehmen" bezieht sich ja auf den Wert von sizes:

  • Zuerst kommt die Media Query mit (min-width: 600px) 500px 
  • Ist die nicht erfüllt, gilt der Wert nach dem Komma, also 100vw (volle Viewportbreite).

Das "Darunter" in meinem Satz enstpricht bei dir dem "max. 599px", und dass der Browser die Pixeldichte berücksichtigt ist ja klar. Das macht er immer, auch bei der Media Query davor. 

Ich habe die Stelle oben im Beitrag aber mal etwas präziser formuliert und das mit der Pixeldichte ergänzt. 

Kommentar von Gruenfisch |

Schöne Zusammenfassung! Danke :)

Antwort von Peter Müller

Gern geschehen. Freut mich, dass es hilfreich war. 

Kommentar von kiumars |

Guten Abend!
ich habe anderes Problem:
ich hab 8 Bilder je (400px x 400px) in 2 Reihen nebeneinander. Inner-wrap beträgt 1600px. wie bekomme ich diese Responsive mittels <image src="" srcset="" size="">? in srcset stehen alternative Bilder: 200 w und 300 w.

mfg
kiumars

Antwort von Peter Müller

Ich verstehe nicht wirklich was Sie erreichen möchten, könnte mir aber vorstellen, dass hier ein kleines Missverständnis vorliegt: 

  • Um statt 4 Bildern nur 2 oder 1 in einer Reihe zu haben, benötigen Sie einfach nur Media Queries und ein flexibles Layout. Steht unter anderem in "Flexible Boxes" wie sowas geht. 
  • Die in diesem Beitrag beschriebenen "responsiven Bilder" dienen dazu, abhängig von bestimmten Umständen *andere* Grafiken zu servieren. Die würden aber ohne flexibles Layout immer noch in einer Reihe stehen. 

Falls meine Vermutung nicht stimmt, wäre eine Spezifizierung der Fragestellung und ein Link zur fraglichen Seite hilfreich. 

Kommentar von Thomas |

Sehr geehrter Herr Müller,

tolle Erklärung. Wie aber gehe ich vor beim Einsatz in Contao?
Muß man in Photoshop 3 x das gleiche Bild in unterschiedlichen Größen erstellen, also das Bild als
small.jpg mit 650px ,
medium.jpg mit 1000px,
large.jpg 1600px
erstellen ??

Oder rechnet Contao da selber irgendwas im Hintergrund?

Gibt es irgendwo mal ein Beispiel, wie man ein Bild Schritt für Schritt mit Contao umsetzt / in Contao einbindet?

Wie verhält es sich mit dem Inhaltselement Bild bei Contao, muß man da die Breite noch angeben, oder wird das über Media-Queries im CSS geregelt?

Hab mir auch den Beitrag hier angeschaut:
http://rocksolidthemes.com/de/contao/blog/responsive-images-picture-contao

Finde aber nicht wirklich als Laie da nen richtigen Anfang. :-(

MFG

Thomas

Antwort von Peter Müller

Vielen Dank für das Kompliment zur Erklärung. 

Sie müssen Contao nicht drei fertige Bilder liefern, sondern nur ein großes. Den Rest macht Contao für Sie, und dazu definieren Sie in "Theme - Bildgröße" eine "Neue Bildgröße".  

"Name" erscheint später bei der Auswahl für den Redakteur. Bemerkenswert ist dabei das Zusammenspiel zwischen den Feldern "Sizes-Attribut" und "Pixeldichte/Skalierungsfaktor": 

  • Ist nur Pixeldichte ausgefüllt, erzeugt Contao <img srcset x> 
  • Werden beide Felder ausgefüllt, erzeugt Contao ein <img srcset w mit sizes>

Mit dem oben stehenden Beitrag zu responsiven Bildern, der Erklärung bei RockSolid zur Contao-Funktion und der Online-Hilfe mit dem Warndreieck sollte das klappen. Probieren Sie es einfach aus und studieren Sie anschließend im Entwicklungstool der Browser, welche Grafiken geladen werden. 

Damit erreicht man schon eine ganze Menge und ist auf dem Stand von Brad Frost's 80/20-Vorschlag: 

Nachdem Speichern der "Bildgröße" können Sie optional zusätzlich ein oder mehrere "Neues Bildgrößen-Media-Query" erstellen, aber das müssen Sie nur, wenn Sie einen "Wichtigen Teil" des Bildes zeigen wollen. Contao erzeugt dann das Element <picture>. Eine komplett andere Grafikdatei servieren kann Contao momentan nicht. 

Hope it helps. 

 

Einen Kommentar schreiben

Bitte füllen Sie alle Formularfelder mit einem Sternchen aus.