SlideShare ist ein Scribd-Unternehmen logo

Responsive Images

Mittlerweile als moderne Technik etabliert, beschreiben zahlreiche Tutorials Umsetzungsvorschläge für Responsive Webdesign; dennoch stößt man in Projekten mit einem skalierbaren Layout auf immer gleiche Schwierigkeiten. Häufig haben mobile Geräte eine deutlich schwächere technische Ausstattung als der heimische Desktoprechner, sodass Fragen der Performance auf unterschiedlichen Devices in den Vordergrund gerückt werden. Gerade bei Bildern tauchen Begriffe wie "Responsive Images" oder "Adaptive Images" immer wieder auf. Welche Lösungen wann Sinn ergeben und wie man mit Retina-Screens umgeht, wie der aktuelle Stand des HTML5-Responsive-Image-Elements ist und wie man eine schlanke Bilder erstellt, werden in der Präsentation gezeigt.

1 von 54
Downloaden Sie, um offline zu lesen
Responsive Images/Performance
Webinale, Berlin 04.06.2013
Sven Wolfermann | maddesigns
Sven Wolfermann (35)
Freelancer für moderne Webentwicklung
(HTML5, CSS3, Responsive Webdesign) aus Berlin
CSS3 Adventskalender 2010/2011
schreibt Artikel für das T3N-, PHP- und
Webstandards-Magazin (new: Screengui.de)
mobile Geek
Wer ist die Flitzpiepe da überhaupt?
Twitter: @maddesigns
Web: http://maddesigns.de
·
·
·
·
·
/
Responsive Webdesign
Flexible Spaltenraster, die auf Prozentwerte basieren
Variable Bilder- und Videogrößen – Bilder passen sich den Spalten an
CSS3 um Gerätegröße abzufragen und Inhalte anzupassen
·
·
·
Quelle Bild: http://macrojuice.com/
/
flexible Medieninhalte
keine statische Breitenangaben
img,embed,object,video{
max-width:100%;
}
Für Medien muss im CSS eine flexible Breite gesetzt werden, die Höhe
soll sich automatisch in Relation anpassen.
img,embed,object,video{
max-width:100%;/*max.originalpxwidth*/
height:auto;
/*width:auto;*/
}
/
Bilder größter Anteil bei Websites
http://httparchive.org/trends.php
/
Responsive Images
Problem ist, dass sich Bilddatenmengen nicht dynamisch anpassen
Große Bilder werden zwar verkleinert dargestellt, laden aber
unnötige Datenmengen
<img>-Tag ist nicht dafür ausgelegt
ein responsives Bildformat gibt es nicht
Polyfills müssen helfen
·
·
·
·
·
/

Recomendados

Online / Offline
Online / OfflineOnline / Offline
Online / OfflinePeter Rozek
 
Rapid Prototyping mit jQuery (German)
Rapid Prototyping mit jQuery (German)Rapid Prototyping mit jQuery (German)
Rapid Prototyping mit jQuery (German)Paul Bakaus
 
Android Ice Cream Sandwich WJAX 2011
Android Ice Cream Sandwich WJAX 2011Android Ice Cream Sandwich WJAX 2011
Android Ice Cream Sandwich WJAX 2011Dominik Helleberg
 
Was nicht passt wird responsive gemacht - Extended Edition
Was nicht passt wird responsive gemacht - Extended EditionWas nicht passt wird responsive gemacht - Extended Edition
Was nicht passt wird responsive gemacht - Extended EditionChristoph Reinartz
 
Understanding and measuring web performance
Understanding and measuring web performanceUnderstanding and measuring web performance
Understanding and measuring web performanceBogdan Gaza
 
Tips for Optimizing Web Performance
Tips for Optimizing Web PerformanceTips for Optimizing Web Performance
Tips for Optimizing Web PerformanceThousandEyes
 
Measuring Web Performance
Measuring Web Performance Measuring Web Performance
Measuring Web Performance Dave Olsen
 

Más contenido relacionado

Ähnlich wie Responsive Images

Webmontag karlsruhe – responsive images, maddesigns (sven wolfermann)
Webmontag karlsruhe – responsive images, maddesigns (sven wolfermann)Webmontag karlsruhe – responsive images, maddesigns (sven wolfermann)
Webmontag karlsruhe – responsive images, maddesigns (sven wolfermann)Sven Wolfermann
 
Responsive Webdesign - Unter der Haube
Responsive Webdesign - Unter der HaubeResponsive Webdesign - Unter der Haube
Responsive Webdesign - Unter der Haubefalconwhite
 
Responsive Webdesign Process
Responsive Webdesign ProcessResponsive Webdesign Process
Responsive Webdesign ProcessSven Wolfermann
 
Vortrag HTML5, CSS3, PhoneGap
Vortrag  HTML5, CSS3, PhoneGapVortrag  HTML5, CSS3, PhoneGap
Vortrag HTML5, CSS3, PhoneGaprene_peinl
 
Responsive Webdesign mit Bootstrap
Responsive Webdesign mit BootstrapResponsive Webdesign mit Bootstrap
Responsive Webdesign mit BootstrapGregor Biswanger
 
SEO Produktspezifikation für RWD
SEO Produktspezifikation für RWDSEO Produktspezifikation für RWD
SEO Produktspezifikation für RWDConny Stier
 
SharePoint Responsive - Mobile Webseiten mit SharePoint 2013 und SharePoint O...
SharePoint Responsive - Mobile Webseiten mit SharePoint 2013 und SharePoint O...SharePoint Responsive - Mobile Webseiten mit SharePoint 2013 und SharePoint O...
SharePoint Responsive - Mobile Webseiten mit SharePoint 2013 und SharePoint O...fabianmoritz
 
Size Matters. Responsive-Design-Lösungen mit denkwerk (2013)
Size Matters. Responsive-Design-Lösungen mit denkwerk (2013)Size Matters. Responsive-Design-Lösungen mit denkwerk (2013)
Size Matters. Responsive-Design-Lösungen mit denkwerk (2013)denkwerk GmbH
 
Mobile Webentwicklung mit HTML5
Mobile Webentwicklung mit HTML5Mobile Webentwicklung mit HTML5
Mobile Webentwicklung mit HTML5kkramhoeft
 
Sencha Touch & PhoneGap
Sencha Touch & PhoneGapSencha Touch & PhoneGap
Sencha Touch & PhoneGapStefan Kolb
 
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.Peter Hecker
 
Sencha Touch und PhoneGap
Sencha Touch und PhoneGapSencha Touch und PhoneGap
Sencha Touch und PhoneGapIndiginox
 
WP Camp 2012 Mobile First & Wordpress
WP Camp 2012 Mobile First & WordpressWP Camp 2012 Mobile First & Wordpress
WP Camp 2012 Mobile First & WordpressKirstenSchelper
 
Responsive Design mit Drupal
Responsive Design mit DrupalResponsive Design mit Drupal
Responsive Design mit DrupalNicolai Schwarz
 
Responsive Web Design für Mobilgeräte mit Drupal
Responsive Web Design für Mobilgeräte mit Drupal Responsive Web Design für Mobilgeräte mit Drupal
Responsive Web Design für Mobilgeräte mit Drupal Acquia
 
Die Zukunft der Webstandards - Webinale 31.05.2010
Die Zukunft der Webstandards - Webinale 31.05.2010Die Zukunft der Webstandards - Webinale 31.05.2010
Die Zukunft der Webstandards - Webinale 31.05.2010Patrick Lauke
 

Ähnlich wie Responsive Images (20)

Webmontag karlsruhe – responsive images, maddesigns (sven wolfermann)
Webmontag karlsruhe – responsive images, maddesigns (sven wolfermann)Webmontag karlsruhe – responsive images, maddesigns (sven wolfermann)
Webmontag karlsruhe – responsive images, maddesigns (sven wolfermann)
 
Responsive Webdesign - Unter der Haube
Responsive Webdesign - Unter der HaubeResponsive Webdesign - Unter der Haube
Responsive Webdesign - Unter der Haube
 
CSS3 Media Queries
CSS3 Media QueriesCSS3 Media Queries
CSS3 Media Queries
 
Responsive Images
Responsive ImagesResponsive Images
Responsive Images
 
Responsive Webdesign Process
Responsive Webdesign ProcessResponsive Webdesign Process
Responsive Webdesign Process
 
Vortrag HTML5, CSS3, PhoneGap
Vortrag  HTML5, CSS3, PhoneGapVortrag  HTML5, CSS3, PhoneGap
Vortrag HTML5, CSS3, PhoneGap
 
Responsive Webdesign mit Bootstrap
Responsive Webdesign mit BootstrapResponsive Webdesign mit Bootstrap
Responsive Webdesign mit Bootstrap
 
SEO Produktspezifikation für RWD
SEO Produktspezifikation für RWDSEO Produktspezifikation für RWD
SEO Produktspezifikation für RWD
 
SharePoint Responsive - Mobile Webseiten mit SharePoint 2013 und SharePoint O...
SharePoint Responsive - Mobile Webseiten mit SharePoint 2013 und SharePoint O...SharePoint Responsive - Mobile Webseiten mit SharePoint 2013 und SharePoint O...
SharePoint Responsive - Mobile Webseiten mit SharePoint 2013 und SharePoint O...
 
Size Matters. Responsive-Design-Lösungen mit denkwerk (2013)
Size Matters. Responsive-Design-Lösungen mit denkwerk (2013)Size Matters. Responsive-Design-Lösungen mit denkwerk (2013)
Size Matters. Responsive-Design-Lösungen mit denkwerk (2013)
 
Mobile Webentwicklung mit HTML5
Mobile Webentwicklung mit HTML5Mobile Webentwicklung mit HTML5
Mobile Webentwicklung mit HTML5
 
Sencha Touch & PhoneGap
Sencha Touch & PhoneGapSencha Touch & PhoneGap
Sencha Touch & PhoneGap
 
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.
 
Kleiner Blick auf CSS3
Kleiner Blick auf CSS3Kleiner Blick auf CSS3
Kleiner Blick auf CSS3
 
Sencha Touch und PhoneGap
Sencha Touch und PhoneGapSencha Touch und PhoneGap
Sencha Touch und PhoneGap
 
WP Camp 2012 Mobile First & Wordpress
WP Camp 2012 Mobile First & WordpressWP Camp 2012 Mobile First & Wordpress
WP Camp 2012 Mobile First & Wordpress
 
Responsive Design mit Drupal
Responsive Design mit DrupalResponsive Design mit Drupal
Responsive Design mit Drupal
 
Responsive Web Design für Mobilgeräte mit Drupal
Responsive Web Design für Mobilgeräte mit Drupal Responsive Web Design für Mobilgeräte mit Drupal
Responsive Web Design für Mobilgeräte mit Drupal
 
Die Zukunft der Webstandards - Webinale 31.05.2010
Die Zukunft der Webstandards - Webinale 31.05.2010Die Zukunft der Webstandards - Webinale 31.05.2010
Die Zukunft der Webstandards - Webinale 31.05.2010
 
design
designdesign
design
 

Mehr von Sven Wolfermann

Testing Responsive Webdesign
Testing Responsive WebdesignTesting Responsive Webdesign
Testing Responsive WebdesignSven Wolfermann
 
Fasten RWD Development with Sass
Fasten RWD Development with SassFasten RWD Development with Sass
Fasten RWD Development with SassSven Wolfermann
 
RESS – Responsive Webdesign and Server Side Components
RESS – Responsive Webdesign and Server Side ComponentsRESS – Responsive Webdesign and Server Side Components
RESS – Responsive Webdesign and Server Side ComponentsSven Wolfermann
 
Typografie im Responsive Webdesign
Typografie im Responsive WebdesignTypografie im Responsive Webdesign
Typografie im Responsive WebdesignSven Wolfermann
 
CSS3 im praktischen Einsatz
CSS3 im praktischen EinsatzCSS3 im praktischen Einsatz
CSS3 im praktischen EinsatzSven Wolfermann
 

Mehr von Sven Wolfermann (7)

Responsive and Fast
Responsive and FastResponsive and Fast
Responsive and Fast
 
Testing Responsive Webdesign
Testing Responsive WebdesignTesting Responsive Webdesign
Testing Responsive Webdesign
 
Responsive Enhancement
Responsive EnhancementResponsive Enhancement
Responsive Enhancement
 
Fasten RWD Development with Sass
Fasten RWD Development with SassFasten RWD Development with Sass
Fasten RWD Development with Sass
 
RESS – Responsive Webdesign and Server Side Components
RESS – Responsive Webdesign and Server Side ComponentsRESS – Responsive Webdesign and Server Side Components
RESS – Responsive Webdesign and Server Side Components
 
Typografie im Responsive Webdesign
Typografie im Responsive WebdesignTypografie im Responsive Webdesign
Typografie im Responsive Webdesign
 
CSS3 im praktischen Einsatz
CSS3 im praktischen EinsatzCSS3 im praktischen Einsatz
CSS3 im praktischen Einsatz
 

Responsive Images

  • 1. Responsive Images/Performance Webinale, Berlin 04.06.2013 Sven Wolfermann | maddesigns
  • 2. Sven Wolfermann (35) Freelancer für moderne Webentwicklung (HTML5, CSS3, Responsive Webdesign) aus Berlin CSS3 Adventskalender 2010/2011 schreibt Artikel für das T3N-, PHP- und Webstandards-Magazin (new: Screengui.de) mobile Geek Wer ist die Flitzpiepe da überhaupt? Twitter: @maddesigns Web: http://maddesigns.de · · · · · /
  • 3. Responsive Webdesign Flexible Spaltenraster, die auf Prozentwerte basieren Variable Bilder- und Videogrößen – Bilder passen sich den Spalten an CSS3 um Gerätegröße abzufragen und Inhalte anzupassen · · · Quelle Bild: http://macrojuice.com/ /
  • 4. flexible Medieninhalte keine statische Breitenangaben img,embed,object,video{ max-width:100%; } Für Medien muss im CSS eine flexible Breite gesetzt werden, die Höhe soll sich automatisch in Relation anpassen. img,embed,object,video{ max-width:100%;/*max.originalpxwidth*/ height:auto; /*width:auto;*/ } /
  • 5. Bilder größter Anteil bei Websites http://httparchive.org/trends.php /
  • 6. Responsive Images Problem ist, dass sich Bilddatenmengen nicht dynamisch anpassen Große Bilder werden zwar verkleinert dargestellt, laden aber unnötige Datenmengen <img>-Tag ist nicht dafür ausgelegt ein responsives Bildformat gibt es nicht Polyfills müssen helfen · · · · · /
  • 8. Asset Loading Tests von Tim Kadlec Tests des Ladeverhalten mobiler Browser Beispiel: Test CSS-Hintergrundbilder <divclass="test5"></div> @mediaalland(min-width:601px){ .test5{ background-image:url("img/test5-desktop.png"); } } @mediaalland(max-width:600px){ .test5{ background-image:url("img/test5-mobile.png"); } } /
  • 9. Asset Loading Tests von Tim Kadlec nur das passende Bild wird geladen, gut! Tim Kadlec – Media Query & Asset Downloading Results /
  • 10. Lösungsansätze für Responsive Images CSS3-Ansatz von Nicolas Gallagher <img src="image.jpg" alt="" data-src-600px="image-600px.jpg"> Umsetzung auf CSS-Basis @media (min-device-width:600px) { img[data-src-600px] { content: attr(data-src-600px, url); } } @media (min-device-width:800px) { img[data-src-800px] { content: attr(data-src-800px, url); } } Nachteil: 2 Bilder werden geladen, keine Browserunterstützung http://nicolasgallagher.com/responsive-images-using-css3/ /
  • 11. Responsive Images alter Ansatz der Filament Group <imgsrc="small.jpg?full=large.jpg"> https://github.com/filamentgroup/Responsive-Images Nachteil: nicht immer kann man "src" verändern (CMS) wird von der Filament Group nicht mehr empfohlen und nicht weiterentwickelt! Responsive Media - Blog Post von @drublic /
  • 12. Responsive Images Eine einfache und gute Lösung meiner Meinung nach, ist die <noscript>-Lösung mit HTML5 data-Attributen <noscriptdata-large="Koala-large.jpg" data-small="Koala-small.jpg" data-alt="Koala"> <imgsrc="Koala-small.jpg"alt="Koala"/> </noscript> Vorteil: Assets die im <noscript>-Tag eingebunden sind, werden nicht vom Browser in den DOM eingefügt (und nicht geladen), wenn JavaScript aktiviert ist. Ressourcen werden also nicht doppelt geladen. JavaScript notwendig http://www.monoliitti.com/images/ /
  • 13. Responsive Images – <noscript> jQuery Snippet $('noscript[data-large][data-small]').each(function(){ var$this=$(this); varsrc=screen.width>=500? $this.data('large'):$this.data('small'); $('<imgsrc="'+src+'"alt="'+$this .data('alt')+'"/>') .insertAfter($this); }); <!--smallscreenDOM--> <noscript...> <imgsrc="Koala-small.jpg"alt="Koala"/> </noscript> <imgsrc="Koala-small.jpg"alt="Koala"> /
  • 14. <picture> Element Aktuelle W3C-Diskussion – <picture> Element Aufbau wie <video> Element <picturewidth="500"height="500"> <sourcesrc="large.jpg" media="(min-width:45em)"> <sourcesrc="middle.jpg"media="(min-width:18em)"> <imgsrc="small.jpg"alt=""> <p>Accessibletext</p> </picture> picture element proposal /
  • 15. Picturefill Polyfill für den <picture> Ansatz <divdata-picturedata-alt="Alttext"> <divdata-src="small.jpg"></div> <divdata-src="medium.jpg"data-media="(min-width: 400px)"></div> <divdata-src="large.jpg" data-media="(min-width: 800px)"></div> <divdata-src="xlarge.jpg"data-media="(min-width:1000px)"></div> <!--Fallbackcontentfornon-JSbrowsers.Sameimgsrcas theinitial,unqualifiedsourceelement.--> <noscript> <imgsrc="small.jpg"alt="Alt"> </noscript> </div> https://github.com/scottjehl/picturefill /
  • 16. Vorschlag: srcset-Attribut <img> durch ein neues Attribut erweitern, das mehrere Bildpfade und - qualitäten enthält <imgalt="TheBreakfastCombo"src="banner.jpeg" srcset="banner-HD.jpeg2x,banner-phone.jpeg100w, banner-phone-HD.jpeg100w2x"> Support in CSS für background-images /*Safari6,Chrome21supportsbackground-image:-webkit-image-set();*/ background-image:-webkit-image-set( url(cloud-sd.png)1x,url(cloud-hd.png)2x); -› Retina-Support für iOS srcset attribut proposal /
  • 17. Responsive Images Art Direction Usecase http://responsiveimages.org/ /
  • 18. <picture> Element + srcset Das beste aus beiden Vorschlägen <picturewidth="500"height="500"> <sourcemedia="(min-width:45em)" srcset="large-1.jpg1x,large-2.jpg2x"> <sourcemedia="(min-width:18em)" srcset="med-1.jpg1x,med-2.jpg2x"> <sourcesrcset="small-1.jpg1x,small-2.jpg2x"> <imgsrc="small-1.jpg"alt=""> <p>Accessibletext</p> </picture> wird mit den Browserherstellern diskutiert, aktuell scheint die Integration vom "srcset"-Attribut bevorzugt zu werden https://code.google.com/p/chromium/issues/detail?id=233751 /
  • 19. Clown Car Technique Media Queries innerhalb SVG <imgsrc="file.svg"alt="image"> Vorteil: gut für Bild im Text Nachteil: SVG erst ab Android 4, IE9 Bild das erscheint, ist nicht das was man herunterladen kann http://coding.smashingmagazine.com/2013/06/02/clown-car-technique-solving-for-adaptive-images-in-responsive- web-design/ /
  • 22. adaptive-images.com Script einbinden Cookie-Snippet so früh wie möglich im <head> <head> <script> document.cookie='resolution='+Math.max(screen.width,screen.height)+'; path=/'; </script> … </head> PHP-Script anpassen (global Breakpoints) $resolutions=array(1382,992,768,480,320); /
  • 24. Responsive Images Service – ReSRC.it http://www.resrc.it/ /
  • 25. Focal Point – Lösungsvarianten für Bildausschnitte http://www.cdnconnect.com/docs/focal-point-css/pure-html-css-responsive-high-resolution-images-solution
  • 26. HiDPI screens aka „Retina“ /
  • 27. „Retina“ doppelte Pixeldichte, iPhone = 326ppi http://coding.smashingmagazine.com/2012/08/20/towards-retina-web/ /
  • 28. List of mobile phones with HD display http://en.wikipedia.org/wiki/List_of_mobile_phones_with_HD_display /
  • 29. Rumor: Apple to double 'iPhone 5S' Retina resolution to 1.5M pixels “ ” http://appleinsider.com/articles/13/05/28/rumor-apple-to-double-iphone-5s-retina-resolution-to-15m-pixels /
  • 30. Android Screen Vielfalt viele Android-Screens sind bereits HiDPI-Screen mit 1,5-facher Pixeldichte mittlerweile sogar Smartphones mit 3.0 Pixel-Desity -› HTC One viele Low DPI-Screens (0.75 Pixel-Desity) gibt es ebenfalls Samsung Android Screen Sizes: 2.8, 3.14, 3.2, 3.4, 3.5, 3.6, 3.65, 3.7, 3.97, 4, 4.2, 4.27, 4.3, 4.5, 4.52, 4.65, 4.8, 5, 5.3, 5.5, 5.8, 6.3, 7, 7.7, 8, 10, 10.1 (Tweet von @dkdsgn) · · · /
  • 31. „Retina“ Problem: hochgezogene Pixel mehrere optimierte Grafiken müssen bereit gestellt werden Lösung wäre „image-set()“ background-image:-webkit-image-set( url(cloud-sd.png)1x,url(cloud-hd.png)2x); /
  • 32. CSS Media Queries CSS abhängig von der Pixeldichte @mediaonlyscreenand(-webkit-max-device-pixel-ratio:0.75), onlyscreenand(max-resolution:90dpi){ /*LowDPICSS*/ } @mediaonlyscreenand(-webkit-min-device-pixel-ratio:1.5), onlyscreenand(min-resolution:144dpi){ /*HiDPICSS*/ } @mediaonlyscreenand(-webkit-min-device-pixel-ratio:2), onlyscreenand(min-resolution:192dpi){ /*RetinaspecificCSS*/ } http://www.brettjankord.com/2012/11/28/cross-browser-retinahigh-resolution-media-queries/ /
  • 33. Bildgröße: 400x400px Qualität: 60 Größe: 49.161 Byte Bildgröße: 800x800px Qualität: 15 Größe: 51.289 Byte <img width="400" src="normal.jpg" alt=""> <img width="400" src="retina.jpg" alt=""> Retina JPGs http://retinafy.me/jpgs/ /
  • 34. SVG – Scalable Vector Graphic optimal für Logos & Icons <imgsrc="img/SVG-logo.svg"width="100"alt=""> <imgsrc="img/SVG-logo.svg"width="200"alt=""> <imgsrc="img/SVG-logo.svg"width="300"alt=""> /
  • 35. SVG vs. PNG SVG 7,57 KB 51,50 KB 4,50 KB PNG 200px 6,50 KB 11,10 KB 4,18 KB PNG 400px 11,80 KB 27,60 KB 8,32 KB PNG 800px 18,50 KB 72,70 KB 14,80 KB fett = PNG kleiner als SVG die Datenmenge für kleine PNG-Bilder ist häufig kleiner als eine SVG- Grafik super WPO Slides von Christian @derSchepp Schäfer /
  • 36. Classic CSS Sprites – Image-Requests sparen kleine Grafiken oder Icons zu großen Sprite-Grafiken zusammenfassen mit CSS background-position den richtigen Ausschnitt anzeigen · · CSS Sprite [DE] /
  • 37. SVG-Sprites funktionieren wie normale Image-Sprites .svg.cloud{ background:url(img/SVG_sprites.svg); } .no-svg.cloud{ background:url(img/SVG_sprites.png); } .cloud{ background-position:0px0px; } .cloud-active{ background-position:-64px0px; } /
  • 39. Icon Fonts == Dingbats on dope Vorteil: Farben und Größe der Icons kann leicht mit CSS angepasst werden zusätzlich können CSS-Effekte wie text-shadow oder animation für die Darstellung genutzt werden · · /
  • 40. Icon Fonts kostenloser Service icomoon.io http://icomoon.io/ /
  • 41. Font Custom Command Line Tool $brewinstallfontforgettfautohint $geminstallfontcustom $fontcustomwatch/path/to/vectors http://fontcustom.com/ /
  • 43. Data URI super für kleine Grafiken, die nicht für Sprite-Image geeignet sind (Twitter nutzt diese Technik für die Timeline Profilbilder) optimal wenn Grafiken nur 1x vorkommen reduziert die HTTP-Requests Nachteile nicht cachebar (cachebar in externen CSS Dateien) IE8+ (IE8 Data-URI limitation < 24kb) · · · · · /
  • 44. Vorsicht mit großen Bildern – iOS Resource Limits Max. Größe für GIF, PNG & TIF = 3 Megapixel für Geräte < 256MB RAM, 5 Megapixel ≥ 256 MB RAM width * height ≤ 3 * 1024 * 1024. Hinweis: Das dekodierte Bild ist weit aus größer als die enkodierte Bild. Mit Hilfe von Subsampling beträgt die maximale Größe von JPEGs 32 Megapixel. Das Subsampling dekodiert die JPEG Bilder so, dass sie nur noch ein sechzehntel der ursprünglichen Pixel haben. Um den Speicher zu reduzieren werden alle JPEGs mit mehr als 2 Megapixel gesampelt. · · · Know iOS Resource Limits /
  • 46. Bildoptimierung kann Kosten sparen Beispiel: Amazon Web Service (AWS) – jedes gesparte Byte kann helfen Kosten zu sparen https://twitter.com/andmag/status/339987087531057153 /
  • 47. Bildformat das richtige Bildformat je Bildinhalt verwenden! lieber PNG als GIF (besser komprimierbar) PNG8 für einen limitierten Farbraum PNG24 für Bilder mit Alphatransparenz 8bit PNG mit Alphatransparenz: http://pngmini.com/ zusätzlich PNGs crushen! Bestes Tool: http://imageoptim.com/ (Mac) RIOT http://luci.criosweb.ro/riot/ (Win) · · · · · · Alpha Transparency in PNG-8 Images Without Using Fireworks /
  • 48. JPG für Photos verwenden! -› JPEGmini Online-Tool http://www.jpegmini.com/ /
  • 49. kleinere Bilddaten bei vergleichbarer Qualität neues Bildformat durch Google entwickelt (Ursprung in der WebM- Videokompression) komprimiert verlustbehaftet oder verlustfrei statische oder animierte Bilder unterstützt Alphatransparenzen kann also PNG und JPG ersetzen nur Chrome (und Opera) Problematisch: Facebook testete WebP-Bilder, User waren unzufrieden · · · · · Video und Slides zum WebP-Status /
  • 50. Weitere Online-Tools zur Bildkomprimierung PunyPNG Smush.it TinyPNG http://img2webp.net · · · · lossless image optimization tools /
  • 51. Mobilnetz Provider Kompression (Vodafone UK) https://twitter.com/kaelig/status/316566775103909888 /
  • 52. Caching Apache Modul „Expires Header“ zum Caching verwenden <IfModulemod_expires.c> ExpiresActiveOn ExpiresByTypetext/css "accessplus1week" ExpiresByTypeapplication/javascript "accessplus1month" ExpiresByTypeapplication/x-javascript"accessplus1month" ExpiresByTypeimage/gif "accessplus1month" ExpiresByTypeimage/jpeg "accessplus1month" ExpiresByTypeimage/png "accessplus1month" </IfModule> /
  • 53. weitere interessante Links 8 Guidelines and 1 Rule for Responsive Images Sensible jumps in responsive image file sizes Responsive Images for Ruby on Rails Riloadr – cross-browser framework-independent responsive images loader Squeezr – Device-aware Adaptive Images and more Adept JPG Compressor /
  • 54. Danke für die Aufmerksamkeit! Sven Wolfermann | maddesigns http://maddesigns.de/responsive-images/ HTML5 slideshow by Google /