Kleine Bilder,
große Wirkung

Responsive Images in der Praxis

#webcon2015

Simon Praetorius

Simon Praetorius

2004: Erste Schritte in der Webentwicklung
2009: von Baden-Württemberg nach Aachen
2009–2012: FH Aachen, Bachelor-Studium
Communication and Multimedia Design
seit 2010: Webentwickler bei WiRo Consultants
TYPO3 • PHP • JavaScript • HTML • CSS

WiRo Consultants

wiro-consultants.com

  • Gegründet 1998 als Beraterhaus:
    Ingenieurbüro spezialisiert auf Energiethemen
  • Seit 2004 neue Unternehmensbereiche:
    Softwareentwicklung und Softwareconsulting
  • Firmensitz in Aachen
  • 12 Angestellte
  • Partner aus den Bereichen Energie, Industrie, Gewerbe, Handel, Dienstleistungen, Krankenhauswesen und Kommunen

Responsive Images

  • Teil von HTML5
  • Problem: Designs sind responsive, Bilder nicht
  • Content-Bilder (≠ CSS-Hintergrundbilder)
  • Browser-Support durchwachsen
  • Polyfills vorhanden: picturefill.js & respimage.js

→ Warum?

Warum Responsive Images?

  • begrenzte (mobile) Bandbreite
  • begrenztes (mobiles) Datenvolumen
  • höherer Speicherverbrauch bei größeren Bildern
  • Bilder für High DPI-Screens gratis
  • Ziel: optimales Bild für Umgebung des Nutzers

→ Wie?

Wie funktionieren
Responsive Images?

  1. Attribute für <img>:
    srcset="…"
    sizes="…"
  2. Neuer HTML-Tag:
    <picture>
  3. Client Hints
  4. Element Queries

Beispiel

body { max-width: 960px; margin: auto }
img { width: 100% }
Beispielbild

<img>-Tag

<img
	src="lousberg-960.jpg"
	alt="Lousberg"
>
Client Dargestellt Geladen
iPhone 5 640 960 ✖︎
iPad 2 768 960 ✖︎
iPad Air 1536 960 ✖︎
MacBook Air 960 960 ✔︎
MacBook Pro 1920 960 ✖︎

High DPI-Bilder mit srcset

<img
	src="lousberg-960.jpg"
	alt="Lousberg"
	srcset="lousberg-1920.jpg 2x"
>
Client Dargestellt Geladen
iPhone 5 640 1920 ✖︎
iPad 2 768 960 ✖︎
iPad Air 1536 1920 ✖︎
MacBook Air 960 960 ✔︎
MacBook Pro 1920 1920 ✔︎

Responsive Images mit srcset

<img
	src="lousberg-960.jpg"
	alt="Lousberg"
	srcset="
		lousberg-640.jpg 640w,
		lousberg-800.jpg 800w,
		lousberg-960.jpg 960w,
		lousberg-1100.jpg 1100w,
		lousberg-1400.jpg 1400w,
		lousberg-1700.jpg 1700w,
		lousberg-1920.jpg 1920w
	"
	sizes="
		(min-width: 960px) 960px,
		100vw
	"
>

Responsive Images mit srcset

Client Dargestellt Geladen
iPhone 5 640 640 ✔︎
iPad 2 768 800 ✔︎
iPad Air 1536 1700 ✔︎
MacBook Air 960 960 ✔︎
MacBook Pro 1920 1920 ✔︎

Art Direction mit <picture>

  • Auslieferung unterschiedlicher Bildversionen
    • Angepasster Bildausschnitt
    • Angepasstes Seitenverhältnis
  • Auslieferung unterschiedlicher Dateiformate
  • Browser muss passende Bildversion laden (≠ srcset)

→ Beispiel: Auf mobilen Geräten 1:1, sonst 4:3

Art Direction mit <picture>

body { max-width: 960px; margin: auto }
img { width: 100% }
Beispielbild Beispielbild

Art Direction mit <picture>

<picture>
	
	<source
		srcset="
			lousberg-640.jpg 640w,
			[…]
			lousberg-1920.jpg 1920w
		"
		sizes="
			(min-width: 960px) 960px,
			100vw
		"
		media="(min-width: 420px)"
	>
	
	<source
		srcset="
			lousberg-square-640.jpg 640w,
			lousberg-square-840.jpg 840w
		"
		sizes="100vw"
	>
	
	<img src="lousberg-960.jpg" alt="Lousberg">
</picture>

Art Direction mit <picture>

Client Dargestellt Geladen
iPhone 5 640* 640* ✔︎
iPad 2 768 800 ✔︎
iPad Air 1536 1700 ✔︎
MacBook Air 960 960 ✔︎
MacBook Pro 1920 1920 ✔︎

SBK leben

Kundenmagazin der Siemens-Betriebskrankenkasse

  • Online-Version des Printmagazins
  • Bildlastige Website
    • Große Bilder im Header und Content
    • Viele Bilder in Teasern
  • CMS generiert Bilddateien

→ Responsive Images und Art Direction

Demo

leben.sbk.org

Auswertung

Verhältnis der Dateigrößen

Auswertung

Dateigrößen aller Bilder im Artikel
Tipps gegen Sommerhitze

Vielen Dank für die Aufmerksamkeit!

Fragen?