SlideShare ist ein Scribd-Unternehmen logo
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
450.00


400.00
                                                                       Statistiken
350.00


300.00


250.00


200.00


150.00


100.00


 50.00


  0.00
             2008      2009       2010      2011       2012




         Anzahl weltweit verkaufter mobiler Internetgeräte von
         2008 bis 2012* in Millionen



                                                              Financial Times Deutschland, 07.08.09, Seite 8
160.00


140.00                                                                                                                                 Statistiken
120.00

                                                                                                                      Andere
100.00
                                                                                                                      Microsoft
                                                                                                                      Bada*
 80.00
                                                                                                                      RIM

 60.00                                                                                                                Symbian
                                                                                                                      iOS
 40.00                                                                                                                Android


 20.00


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




         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
Gerätefifivielfalt




                     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
Eine Webanwendung
     für alle Geräte?
Mobile First




   Verschiedene Bildschirmgrößen / Auflflösungen
   Reduzierte Bandbreiten
   Andere Nutzung

1. GROWTH = OPPORTUNITY
2. CONSTRAINTS = FOCUS
3. CAPABILITIES = INNOVATION




                                                   Luke Wroblewski | http://www.lukew.com/
Eine Webanwendung
     für alle Geräte?
Eine Webanwendung jeweils
    optimiert für alle Geräte?
Responsive Webdesign ist die Lösung!
Responsive Webdesign


Flexible Formatierung
Layout + Schrift




Flexible Bilder
Größe + Ausschnitt




Media Queries
CSS3
Probleme




1. Verschiedene Bildschirmgrößen / Auflflösungen
2. Reduzierte Bandbreiten
Problemlösung



Flexible Formatierung         Flexible Bilder          Media Queries




    1. Verschiedene Bildschirmgrößen / Auflflösungen
Problemlösung

  Optimierte Darstellung



  Optimierte Bandbreite
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
                                                                        Apache 2
                                                                         PHP 5.x
                                                                         GD-LIB




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




                                                               http://adaptive-images.com/
Adaptive Images




DEMO


               http://adaptive-images.com/
Adaptive Images



Vorteile
Funktioniert für bestehende Webanwendungen
Einfach Einzubinden
Ideal für Bilder


Nachteile
Es funktioniert nur 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

WHATWG




Juli 2011   • Kompatibel mit älteren Browsern
            • Einfache Syntax
            • Ansteuerung über CSS3 @media-queries

            • Nachteil: src wird auf jeden fall geladen –
              Möglicherweise höhere Datenmengen
                                                            http://www.whatwg.org/
Responsive Images


Gründung W3C Community Group "Responsive images"




Februar 2012   • 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


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

         Gründung W3C Community Group "Responsive images"




Statt:

nun:

         13. Mai 2012   • Lösungsansatz für Geräte mit höheren
                          Auflösungen
                        • Templateansatz
                        • Ansteuerung mittels @media-queries
                         http://www.w3.org/community/respimg/2012/05/13/an-alternative-proposition-to-and-srcset-with-wider-scope/
Responsive Images

WHATWG




15. Mai 2012   • 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
                                                           http://www.whatwg.org/
Eigener Ansatz
Syntax
<img src="picture-xs.jpg" alt="alternativetext"
     data-small="picture-s.jpg"
     data-medium="picture-m.jpg"
     data-large="picture-l.jpg" />

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

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
FRAGEN

Weitere ähnliche Inhalte

Andere mochten auch

Alberto Barba
Alberto BarbaAlberto Barba
Alberto Barba
School
 
Le passé composé
Le passé composéLe passé composé
Le passé composé
Marlène Fert
 
Lieblingssängerin evi kai lina ppt
Lieblingssängerin evi kai lina pptLieblingssängerin evi kai lina ppt
Lieblingssängerin evi kai lina pptMaria Chatzigiossi
 
4 el bloc comunista
4 el bloc comunista4 el bloc comunista
4 el bloc comunistaToni Guirao
 
!Yo mi región y cultura ! Fabián Ledesma
!Yo mi región y cultura ! Fabián Ledesma!Yo mi región y cultura ! Fabián Ledesma
!Yo mi región y cultura ! Fabián Ledesma
Fabian Ledesma
 
Présentation d'ADH5
Présentation d'ADH5Présentation d'ADH5
Présentation d'ADH5
Guillaume Rose
 
V foro de formadores de la industria farmacéutica beyond the pill
V foro de formadores de la industria farmacéutica beyond the pillV foro de formadores de la industria farmacéutica beyond the pill
V foro de formadores de la industria farmacéutica beyond the pill
Jordi Dominguez Sanz
 
Manualidades para niños
Manualidades para niñosManualidades para niños
Manualidades para niños
Centro Educativo de Sistemas Uparsistem
 
Silva florencia trabajo final
Silva florencia trabajo finalSilva florencia trabajo final
Silva florencia trabajo final
PabloPereira
 
François Seppey, Fondation The Ark pour journée e-health 2013
François Seppey, Fondation The Ark pour journée e-health 2013François Seppey, Fondation The Ark pour journée e-health 2013
François Seppey, Fondation The Ark pour journée e-health 2013Thearkvalais
 
Barack Obama et le rappel des facteurs de la défaite de novembre 2010
Barack Obama et le rappel des facteurs de la défaite de novembre 2010Barack Obama et le rappel des facteurs de la défaite de novembre 2010
Barack Obama et le rappel des facteurs de la défaite de novembre 2010
Newday
 
Raquel del Amo, parlez-vous français?
Raquel del Amo, parlez-vous français?Raquel del Amo, parlez-vous français?
Raquel del Amo, parlez-vous français?
School
 
Nativos e inmigrantes digitales cintia
Nativos e inmigrantes digitales   cintiaNativos e inmigrantes digitales   cintia
Nativos e inmigrantes digitales cintia
cintiamoreira
 

Andere mochten auch (17)

Alberto Barba
Alberto BarbaAlberto Barba
Alberto Barba
 
Le passé composé
Le passé composéLe passé composé
Le passé composé
 
Lieblingssängerin evi kai lina ppt
Lieblingssängerin evi kai lina pptLieblingssängerin evi kai lina ppt
Lieblingssängerin evi kai lina ppt
 
4 el bloc comunista
4 el bloc comunista4 el bloc comunista
4 el bloc comunista
 
!Yo mi región y cultura ! Fabián Ledesma
!Yo mi región y cultura ! Fabián Ledesma!Yo mi región y cultura ! Fabián Ledesma
!Yo mi región y cultura ! Fabián Ledesma
 
Présentation d'ADH5
Présentation d'ADH5Présentation d'ADH5
Présentation d'ADH5
 
Gat2
Gat2Gat2
Gat2
 
V foro de formadores de la industria farmacéutica beyond the pill
V foro de formadores de la industria farmacéutica beyond the pillV foro de formadores de la industria farmacéutica beyond the pill
V foro de formadores de la industria farmacéutica beyond the pill
 
Manualidades para niños
Manualidades para niñosManualidades para niños
Manualidades para niños
 
Silva florencia trabajo final
Silva florencia trabajo finalSilva florencia trabajo final
Silva florencia trabajo final
 
François Seppey, Fondation The Ark pour journée e-health 2013
François Seppey, Fondation The Ark pour journée e-health 2013François Seppey, Fondation The Ark pour journée e-health 2013
François Seppey, Fondation The Ark pour journée e-health 2013
 
Barack Obama et le rappel des facteurs de la défaite de novembre 2010
Barack Obama et le rappel des facteurs de la défaite de novembre 2010Barack Obama et le rappel des facteurs de la défaite de novembre 2010
Barack Obama et le rappel des facteurs de la défaite de novembre 2010
 
Raquel del Amo, parlez-vous français?
Raquel del Amo, parlez-vous français?Raquel del Amo, parlez-vous français?
Raquel del Amo, parlez-vous français?
 
Les 12 3
Les 12 3Les 12 3
Les 12 3
 
Nativos e inmigrantes digitales cintia
Nativos e inmigrantes digitales   cintiaNativos e inmigrantes digitales   cintia
Nativos e inmigrantes digitales cintia
 
MW3 VS Battlefield 3
MW3 VS Battlefield 3MW3 VS Battlefield 3
MW3 VS Battlefield 3
 
5-Cm29
5-Cm295-Cm29
5-Cm29
 

Ähnlich wie Responsive Images

Responsive Webdesign - Unter der Haube
Responsive Webdesign - Unter der HaubeResponsive Webdesign - Unter der Haube
Responsive Webdesign - Unter der Haube
falconwhite
 
Responsive Images
Responsive ImagesResponsive Images
Responsive Images
Sven Wolfermann
 
WP Camp 2012 Mobile First & Wordpress
WP Camp 2012 Mobile First & WordpressWP Camp 2012 Mobile First & Wordpress
WP Camp 2012 Mobile First & Wordpress
KirstenSchelper
 
Responsive Webdesign Process
Responsive Webdesign ProcessResponsive Webdesign Process
Responsive Webdesign Process
Sven Wolfermann
 
Cross-Apps-Entwicklung für iPhone, Android und Co.
Cross-Apps-Entwicklung für iPhone, Android und Co.Cross-Apps-Entwicklung für iPhone, Android und Co.
Cross-Apps-Entwicklung für iPhone, Android und Co.
GFU Cyrus AG
 
jQuery Mobile 1.3 - Das Kompendium mit 200 Seiten
jQuery Mobile 1.3 - Das Kompendium mit 200 SeitenjQuery Mobile 1.3 - Das Kompendium mit 200 Seiten
jQuery Mobile 1.3 - Das Kompendium mit 200 Seiten
die.agilen GmbH
 
Responsive Web Design - Ein Überblick
Responsive Web Design - Ein ÜberblickResponsive Web Design - Ein Überblick
Responsive Web Design - Ein Überblick
Amazee Labs
 
Vortrag HTML5, CSS3, PhoneGap
Vortrag  HTML5, CSS3, PhoneGapVortrag  HTML5, CSS3, PhoneGap
Vortrag HTML5, CSS3, PhoneGap
rene_peinl
 
SharePoint, HTML5 und mobile Geräte (SharePoint UserGroup Dresden 11/2011)
SharePoint, HTML5 und mobile Geräte (SharePoint UserGroup Dresden 11/2011)SharePoint, HTML5 und mobile Geräte (SharePoint UserGroup Dresden 11/2011)
SharePoint, HTML5 und mobile Geräte (SharePoint UserGroup Dresden 11/2011)
Christian Heindel
 
design
designdesign
Web Design Trends 2011
Web Design Trends 2011Web Design Trends 2011
Web Design Trends 2011
Vitaly Friedman
 
2011 - CMS-Inhalte für mobile Endgeräte / Responsive Design
2011 - CMS-Inhalte für mobile Endgeräte / Responsive Design2011 - CMS-Inhalte für mobile Endgeräte / Responsive Design
2011 - CMS-Inhalte für mobile Endgeräte / Responsive Design
Johannes Waibel
 
Mobile und Trends.
Mobile und Trends.Mobile und Trends.
Mobile und Trends.
Namics – A Merkle Company
 
CSS3 Media Queries
CSS3 Media QueriesCSS3 Media Queries
CSS3 Media Queries
Francesco Schwarz
 
Einfluss der Endgeräte-Innovationen auf technische Realisierung netzbasierter...
Einfluss der Endgeräte-Innovationen auf technische Realisierung netzbasierter...Einfluss der Endgeräte-Innovationen auf technische Realisierung netzbasierter...
Einfluss der Endgeräte-Innovationen auf technische Realisierung netzbasierter...Alexej Antropov
 
jQuery Mobile Kompakt - das Kompendium - über 150 Seiten (typovision)
jQuery Mobile Kompakt  - das Kompendium - über 150 Seiten (typovision)jQuery Mobile Kompakt  - das Kompendium - über 150 Seiten (typovision)
jQuery Mobile Kompakt - das Kompendium - über 150 Seiten (typovision)
die.agilen GmbH
 
Rich Internet Applications
Rich Internet ApplicationsRich Internet Applications
Rich Internet Applications
Oliver Belikan
 
Mobile Advertise Convention Jan 2007 / München - Mobile Plattformen im Vergleich
Mobile Advertise Convention Jan 2007 / München - Mobile Plattformen im VergleichMobile Advertise Convention Jan 2007 / München - Mobile Plattformen im Vergleich
Mobile Advertise Convention Jan 2007 / München - Mobile Plattformen im VergleichSIC! Software GmbH
 
Webinar: Responsive Design
Webinar: Responsive DesignWebinar: Responsive Design
Webinar: Responsive Design
kuehlhaus AG
 

Ähnlich wie Responsive Images (20)

Responsive Webdesign - Unter der Haube
Responsive Webdesign - Unter der HaubeResponsive Webdesign - Unter der Haube
Responsive Webdesign - Unter der Haube
 
Responsive Images
Responsive ImagesResponsive Images
Responsive Images
 
WP Camp 2012 Mobile First & Wordpress
WP Camp 2012 Mobile First & WordpressWP Camp 2012 Mobile First & Wordpress
WP Camp 2012 Mobile First & Wordpress
 
Responsive Webdesign Process
Responsive Webdesign ProcessResponsive Webdesign Process
Responsive Webdesign Process
 
Cross-Apps-Entwicklung für iPhone, Android und Co.
Cross-Apps-Entwicklung für iPhone, Android und Co.Cross-Apps-Entwicklung für iPhone, Android und Co.
Cross-Apps-Entwicklung für iPhone, Android und Co.
 
jQuery Mobile 1.3 - Das Kompendium mit 200 Seiten
jQuery Mobile 1.3 - Das Kompendium mit 200 SeitenjQuery Mobile 1.3 - Das Kompendium mit 200 Seiten
jQuery Mobile 1.3 - Das Kompendium mit 200 Seiten
 
Responsive Web Design - Ein Überblick
Responsive Web Design - Ein ÜberblickResponsive Web Design - Ein Überblick
Responsive Web Design - Ein Überblick
 
Vortrag HTML5, CSS3, PhoneGap
Vortrag  HTML5, CSS3, PhoneGapVortrag  HTML5, CSS3, PhoneGap
Vortrag HTML5, CSS3, PhoneGap
 
SharePoint, HTML5 und mobile Geräte (SharePoint UserGroup Dresden 11/2011)
SharePoint, HTML5 und mobile Geräte (SharePoint UserGroup Dresden 11/2011)SharePoint, HTML5 und mobile Geräte (SharePoint UserGroup Dresden 11/2011)
SharePoint, HTML5 und mobile Geräte (SharePoint UserGroup Dresden 11/2011)
 
design
designdesign
design
 
Web Design Trends 2011
Web Design Trends 2011Web Design Trends 2011
Web Design Trends 2011
 
2011 - CMS-Inhalte für mobile Endgeräte / Responsive Design
2011 - CMS-Inhalte für mobile Endgeräte / Responsive Design2011 - CMS-Inhalte für mobile Endgeräte / Responsive Design
2011 - CMS-Inhalte für mobile Endgeräte / Responsive Design
 
Mobile und Trends.
Mobile und Trends.Mobile und Trends.
Mobile und Trends.
 
CSS3 Media Queries
CSS3 Media QueriesCSS3 Media Queries
CSS3 Media Queries
 
Einfluss der Endgeräte-Innovationen auf technische Realisierung netzbasierter...
Einfluss der Endgeräte-Innovationen auf technische Realisierung netzbasierter...Einfluss der Endgeräte-Innovationen auf technische Realisierung netzbasierter...
Einfluss der Endgeräte-Innovationen auf technische Realisierung netzbasierter...
 
Html5 - Traum oder Wirklichkeit
Html5 - Traum oder WirklichkeitHtml5 - Traum oder Wirklichkeit
Html5 - Traum oder Wirklichkeit
 
jQuery Mobile Kompakt - das Kompendium - über 150 Seiten (typovision)
jQuery Mobile Kompakt  - das Kompendium - über 150 Seiten (typovision)jQuery Mobile Kompakt  - das Kompendium - über 150 Seiten (typovision)
jQuery Mobile Kompakt - das Kompendium - über 150 Seiten (typovision)
 
Rich Internet Applications
Rich Internet ApplicationsRich Internet Applications
Rich Internet Applications
 
Mobile Advertise Convention Jan 2007 / München - Mobile Plattformen im Vergleich
Mobile Advertise Convention Jan 2007 / München - Mobile Plattformen im VergleichMobile Advertise Convention Jan 2007 / München - Mobile Plattformen im Vergleich
Mobile Advertise Convention Jan 2007 / München - Mobile Plattformen im Vergleich
 
Webinar: Responsive Design
Webinar: Responsive DesignWebinar: Responsive Design
Webinar: Responsive Design
 

Responsive Images

  • 1. Responsive Images Methoden zur Handhabung von Bilder mit dem "Mobile First" Ansatz
  • 2. Statistiken Das mobile Internet wächst 8x so schnell als das Desktop Internet zu seinen besten Zeiten
  • 3. Statistiken Es werden mittlerweile mehr Smartphones als Desktops Computer verkauft
  • 4. Statistiken Jeder fünfte nutzt täglich mobiles Internet
  • 5. Statistiken Jeden Tag wird das Smartphone durchschnittlich mehr als 30 Minuten genutzt
  • 6. Statistiken In den nächsten 4 Jahren wird die Nutzung des mobilen Internets um das 26fache steigen
  • 7. 450.00 400.00 Statistiken 350.00 300.00 250.00 200.00 150.00 100.00 50.00 0.00 2008 2009 2010 2011 2012 Anzahl weltweit verkaufter mobiler Internetgeräte von 2008 bis 2012* in Millionen Financial Times Deutschland, 07.08.09, Seite 8
  • 8. 160.00 140.00 Statistiken 120.00 Andere 100.00 Microsoft Bada* 80.00 RIM 60.00 Symbian iOS 40.00 Android 20.00 0.00 Q1 '09 Q2 '09 Q3 '09 Q1 '10 Q2 '10 Q3 '10 Q4 '10 Q1 '11 Q2 '11 Q3 '11 Q4 '11 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
  • 9. Gerätefifivielfalt http://vinningaskolan.files.wordpress.com/2010/12/mobiler.jpg
  • 10. Gerätefifivielfalt http://2.bp.blogspot.com/-NP8PI2AoG_g/TwBKKeVSKKI/AAAAAAAAHh0/6NxVhZCxPWM/s1600/Tablet%2BPCs.JPG
  • 11. Eine Webanwendung für alle Geräte?
  • 12. Mobile First Verschiedene Bildschirmgrößen / Auflflösungen Reduzierte Bandbreiten Andere Nutzung 1. GROWTH = OPPORTUNITY 2. CONSTRAINTS = FOCUS 3. CAPABILITIES = INNOVATION Luke Wroblewski | http://www.lukew.com/
  • 13. Eine Webanwendung für alle Geräte?
  • 14. Eine Webanwendung jeweils optimiert für alle Geräte?
  • 15. Responsive Webdesign ist die Lösung!
  • 16. Responsive Webdesign Flexible Formatierung Layout + Schrift Flexible Bilder Größe + Ausschnitt Media Queries CSS3
  • 17. Probleme 1. Verschiedene Bildschirmgrößen / Auflflösungen 2. Reduzierte Bandbreiten
  • 18. Problemlösung Flexible Formatierung Flexible Bilder Media Queries 1. Verschiedene Bildschirmgrößen / Auflflösungen
  • 19. Problemlösung Optimierte Darstellung Optimierte Bandbreite
  • 20. Optimiert für kleiner Bandbreiten Optimiert für die verfügbare Bandbreite Jeweils eine Version für jede Bildschirmgröße bzw. Auflösung
  • 21. Optimiert für kleiner Bandbreiten Keine Möglichkeit die Bandbreitenverfügbarkeit abzufragen
  • 22. Optimiert für kleiner Bandbreiten GLEICHSTELLUNG kleine Bildschirmgröße/Auflösung = kleine Bandbreite
  • 23. Adaptive Images Apache 2 PHP 5.x GD-LIB 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 http://adaptive-images.com/
  • 24. Adaptive Images DEMO http://adaptive-images.com/
  • 25. Adaptive Images Vorteile Funktioniert für bestehende Webanwendungen Einfach Einzubinden Ideal für Bilder Nachteile Es funktioniert nur für Bilder http://adaptive-images.com/
  • 26. Responsive Images Bemühungen der WHATWG (Web Hypertext Application Technology Working Group) http://www.whatwg.org/
  • 27. Responsive Images WHATWG Juli 2011 • Kompatibel mit älteren Browsern • Einfache Syntax • Ansteuerung über CSS3 @media-queries • Nachteil: src wird auf jeden fall geladen – Möglicherweise höhere Datenmengen http://www.whatwg.org/
  • 28. Responsive Images Gründung W3C Community Group "Responsive images" Februar 2012 • 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 http://www.w3.org/community/respimg/
  • 29. Responsive Images Gründung W3C Community Group "Responsive images" Statt: nun: 13. Mai 2012 • Lösungsansatz für Geräte mit höheren Auflösungen • Templateansatz • Ansteuerung mittels @media-queries http://www.w3.org/community/respimg/2012/05/13/an-alternative-proposition-to-and-srcset-with-wider-scope/
  • 30. Responsive Images WHATWG 15. Mai 2012 • 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 http://www.whatwg.org/
  • 31. Eigener Ansatz Syntax <img src="picture-xs.jpg" alt="alternativetext" data-small="picture-s.jpg" data-medium="picture-m.jpg" data-large="picture-l.jpg" /> img { min-width: 100%; max-width: 100% } 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