Responsive Images

Ein Überblick

Vortrag von Peter Singewald
Erstellt in reveal.js von Hakim El Hattab / @hakimel

Was ist Responsive Webdesign?

  • Das Layout passt sich der Breite des Browsers an.
  • Dies geschieht aufgrund von nicht-fixen Größenangaben (%, em, rem) im Gegensatz zu fixen (px, pt)
  • Nicht zu verwechseln mit Adaptive (misst Browsergröße und liefert entsprechendes Layout) oder Fluid Design (RD ist fluid).
  • Allerdings vergessen das auch gute Designer und Benenner von Methoden.
  • Ein Beispiel von einer Responsive-Webdesing-Seite
  • Deshalb werde ich auch nur "Responsive" verwenden.

Was sind Responsive Images?

  • Ein Bild passt sich der Größe des Browserfensters an, d.h. dem Bild wird keine feste Größe gegeben.
  • Oder: Ein Bild passt sich dem veränderten Layout an, welches von der Größe des Browserfensters abhängig ist.
  • Ein Bild ohne Angaben außerhalb einer HTML-Datei wäre entsprechend immer Responsive: Chrysanthemum.jpg
  • Innerhalb einer HTML-Datei muss man genauer sein: Drei Bilder

Wozu brauchen wir Responsive Images?

  • Geräte mit einer schlechten Verbindung sollten Bilder mit geringerem Datenvolumen bekommen.
  • Innerhalb eines Responsive-Layouts muss man evtl. unterschiedliche Bilder ausliefern, gemäß dem, wie sich die Seite gerade aufbaut.
  • Retina-Displays erfordern Bilder mit einer besseren Auflösung.

Welche Möglichkeiten gibt es für RI?

  • Browser / Device-Abfrage
  • View-Port-Abfrage
  • Picture-Tag
  • img-srcset

Browser / Device-Abfrage

Wir fragen das Gerät selbst ab, d.h. wir lesen den Browserstring aus und erfahren anhand dieses Strings, um welches Gerät es sich handelt.

  • Wir brauchen Kenntnis über die Geräte und ihre Fähigkeiten. Dazu gibt es u.a. Listen und Bibliotheken.
  • Listen veralten und nur, weil uns eine Liste sagt, dass es sich bei etwas um ein Android-Gerät handelt, wissen wir immer noch nicht, welche Auflösung es hat.
  • Wir wissen nicht, ob Landscape oder Portrait-Darstellung.

Viewport-Abfrage

Wir fragen die die aktuelle Größe des Browser-Fensters ab.

  • Dies kann nur mit JavaScript, d.h. nach dem Laden der ersten Seite geschehen.
  • Die Information wird mit einem Re-load der Seite an das Backend zurückgegeben, für zukünftige Seitenaufrufe in einem Cookie vermerkt.

Picture-Tag

Moderner HTML-Tag, der derzeit vorgeschlagen ist, aber noch nicht durchgesetzt:

<picture>
  <source media="(min-width: 650px)" srcset="images/kitten-stretching.png">
  <source media="(min-width: 465px)" srcset="images/kitten-sitting.png">
  <img src="images/kitten-curled.png" alt="a cute kitten">
</picture>

Img-Tag mit srcset

Erweiterung des Img-Tags.

<img sizes="100vw" srcset="Chrysanthemum.jpg 480w, 
                             Desert.jpg 768w, 
                             Jellyfish.jpg 968w,
                             Koala.jpg 1024w"
				src="Lighthouse.jpg" alt="Bilderanzeige"> 

Was tut WordPress?

  • Neu hochgeladene Bilder werden gleich in mehreren Formaten angelegt (Einstellung unter EINSTELLUNGEN / MEDIEN)
  • WordPress stellt neue PHP-Funktionen zur Verfügung, um mit den Bildern umgehen zu können: Codex
  • Wird ein Bild in einen Text eingefügt, wird das Bild gleich mit srcset in den vorgegebenen Größen angelegt.

Fragen?

  • ENDE