Responsive Images

Methoden zur Handhabung von Bilder mit

dem "Mobile First" Ansatz

Statistiken

Das mobile Internet wächst 8x so schnell als das

Desktop Internet zu seinen besten Zeiten

Statistiken

Es werden mittlerweile mehr Smartphones

als Desktops Computer verkauft

Statistiken

Jeder fünfte nutzt täglich mobiles Internet

Statistiken

Jeden Tag wird das Smartphone durchschnittlich

mehr als 30 Minuten genutzt

Statistiken

In den nächsten 4 Jahren wird die Nutzung des

mobilen Internets um das 26fache steigen

Statistiken

Anzahl weltweit verkaufter mobiler Internetgeräte von

2008 bis 2012* in Millionen

0.00

50.00

100.00

150.00

200.00

250.00

300.00

350.00

400.00

450.00

2008 2009 2010 2011 2012

Financial Times Deutschland, 07.08.09, Seite 8

Statistiken

Absatz von Smartphones weltweit vom 1. Quartal 2009 bis zum 4.

Quartal 2011 nach Betriebssystem (in Milllionen Stück)Die Quelle veröffentlichte keine Daten für das vierte Quartal 2009.* Die Quelle macht nicht in allen Quartalen Angaben zum Absatz von Bada-Smartphones.

gartner .com Mai 2012

0.00

20.00

40.00

60.00

80.00

100.00

120.00

140.00

160.00

Q1 '09 Q2 '09 Q3 '09 Q1 '10 Q2 '10 Q3 '10 Q4 '10 Q1 '11 Q2 '11 Q3 '11 Q4 '11

Andere

Microsoft

Bada*

RIM

Symbian

iOS

Android

http://vinningaskolan.files.wordpress.com/2010/12/mobiler.jpg

Gerätefifivielfalt

http://2.bp.blogspot.com/-NP8PI2AoG_g/TwBKKeVSKKI/AAAAAAAAHh0/6NxVhZCxPWM/s1600/Tablet%2BPCs.JPG

Gerätefifivielfalt

Eine Webanwendung

für alle Geräte?

Mobile First

1. GROWTH = OPPORTUNITY

2. CONSTRAINTS = FOCUS

3. CAPABILITIES = INNOVATION

Luke Wroblewski | http://www.lukew.com/

Verschiedene Bildschirmgrößen / Auflflösungen

Reduzierte Bandbreiten

Andere Nutzung

Eine Webanwendung

für alle Geräte?

Eine Webanwendung jeweils

optimiert für alle Geräte?

Responsive Webdesign ist die Lösung!

Responsive Webdesign

Media QueriesCSS3

Flexible FormatierungLayout + Schrift

Flexible BilderGröße + Ausschnitt

Probleme

1. Verschiedene Bildschirmgrößen / Auflflösungen

2. Reduzierte Bandbreiten

Problemlösung

Media QueriesFlexible Formatierung Flexible Bilder

1. Verschiedene Bildschirmgrößen / Auflflösungen

Problemlösung

Optimierte Bandbreite

Optimierte Darstellung

Optimiert für kleiner Bandbreiten

Optimiert für die verfügbare Bandbreite

Jeweils eine Version für jede Bildschirmgröße bzw. Auflösung

Optimiert für kleiner Bandbreiten

Keine Möglichkeit die Bandbreitenverfügbarkeit abzufragen

Optimiert für kleiner Bandbreiten

GLEICHSTELLUNG

kleine Bildschirmgröße/Auflösung = kleine Bandbreite

Adaptive Images

1. Speichert über ein kleines Javascript die Bildschirmauflösung

in einer Session Cookie

2. Der Browser fragt die <img> ab und sendet einen Request

inkl. der Session Cookie

3. .htaccess leitet die Anfrage in ein PHP-File um die die Bilder

im richtigen Format zu erzeugen bzw. auszuliefern

4. Die verschiedenen Formate werden am Server gecached

Apache 2

PHP 5.x

GD-LIB

http://adaptive-images.com/

Adaptive Images

DEMO

http://adaptive-images.com/

Adaptive Images

Nachteile

Es funktioniert nur für Bilder

Vorteile

Funktioniert für bestehende Webanwendungen

Einfach Einzubinden

Ideal für Bilder

http://adaptive-images.com/

Responsive Images

Bemühungen der WHATWG(Web Hypertext Application Technology Working Group)

http://www.whatwg.org/

Responsive Images

Juli 2011

http://www.whatwg.org/

• Kompatibel mit älteren Browsern

• Einfache Syntax

• Ansteuerung über CSS3 @media-queries

• Nachteil: src wird auf jeden fall geladen –

Möglicherweise höhere Datenmengen

WHATWG

Responsive Images

Februar 2012

http://www.w3.org/community/respimg/

• Liste von Bildern

• Ansteuerung über CSS3 @media-queries

• Fallback für ältere Browser

• Nachteil: geht nur auf Auflösung –

Möglicherweise höhere Datenmengen bspw.

iPad3

Gründung W3C Community Group "Responsive images"

Responsive Images

13. Mai 2012

http://www.w3.org/community/respimg/2012/05/13/an-alternative-proposition-to-and-srcset-with-wider-scope/

• Lösungsansatz für Geräte mit höheren

Auflösungen

• Templateansatz

• Ansteuerung mittels @media-queries

Gründung W3C Community Group "Responsive images"

Statt:

nun:

Responsive Images

15. Mai 2012

http://www.whatwg.org/

• 600w 200h ist nicht die Größenangebe sondern

der Viewport

• @1 ist die Auflösung mit 96ppi muss @2

automatisch mit 192ppi sein

• Nachteil:

keine Standardkomforme Syntax

hohe Fehlerqullen

WHATWG

Eigener Ansatz

Ansatz: • Austausch der Bilder nach dem Laden der

Webseite mittels Javascript

• Anzeige einer Verpixelten Version

• Auch für andere Medien (Videos) möglich

• Nachteil:

kleinste Version wird auf jeden Fall geladen

mehrere Requests notwendig

<img src="picture-xs.jpg" alt="alternativetext"data-small="picture-s.jpg"data-medium="picture-m.jpg"data-large="picture-l.jpg" />

Syntax

img {min-width: 100%;max-width: 100%

}

FRAGEN