Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

[funka] Adaptive Images in Responsive Web Design

35,588 views

Published on

Smartphones and tablets not only contain more computing power and better browsers than the computers that started the Internet economy. They also have better displays, which demands more of us when we use images. This session will work through tips and tricks to develop future friendly images in our sites and apps.

Published in: Design, Internet
  • Login to see the comments

[funka] Adaptive Images in Responsive Web Design

  1. FUNKA 2015 ADAPTIVE IMAGESIN RESPONSIVE WEB DESIGN CHRISTOPHER SCHMITT @teleject
  2. CHRISTOPHER SCHMITT @teleject
  3. @teleject
  4. @teleject Responsive Media Course http://goo.gl/fKgZ6I
  5. @teleject http://CSSDevConf.com/
  6. y x
  7. WHY DON’T WE ASK THE BROWSER? (cc) flic.kr/p/vUBHv
  8. alert("User-agent header sent: " + navigator.userAgent);
  9. alert("User-agent header sent: " + navigator.userAgent);
  10. Mozilla/1.0 (Win3.1) http://www.useragentstring.com/ (cc) flic.kr/p/vUBHv
  11. Mozilla/1.0 (Win3.1) Mozilla/1.22 (compatible; MSIE 2.0; Windows 95) (cc) flic.kr/p/vUBHv http://www.useragentstring.com/
  12. Mozilla/5.0 (Macintosh; Intel Mac OS X 10_7_3) AppleWebKit/ 534.55.3 (KHTML, like Gecko) Version/5.1.5 Safari/534.55.3 (cc) flic.kr/p/vUBHv http://www.useragentstring.com/
  13. Mozilla/5.0 (Macintosh; Intel Mac OS X 10_7_3) AppleWebKit/ 534.55.3 (KHTML, like Gecko) Version/5.1.5 Safari/534.55.3 http://webaim.org/blog/user-agent-string-history/ (cc) flic.kr/p/vUBHv
  14. FEATURE TESTINGvs. BROWSER SNIFFING 1 2 3
  15. FEATURE TESTINGvs. BROWSER SNIFFING 1 Browser width 2 3
  16. A scripting approach var myWidth = 0, myHeight = 0; if( typeof( window.innerWidth ) == 'number' ) { //Non-IE myWidth = window.innerWidth; myHeight = window.innerHeight; } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) { //IE 6+ in 'standards compliant mode' myWidth = document.documentElement.clientWidth; myHeight = document.documentElement.clientHeight; } http://www.howtocreate.co.uk/tutorials/javascript/browserwindow
  17. The jQuery approach // returns width of browser viewport $(window).width(); // returns height of browser viewport $(window).height(); // returns width of HTML document $(document).width(); // returns height of HTML document $(document).height(); http://api.jquery.com/width/ & http://api.jquery.com/height/
  18. CSS media queries // default, mobile-1st CSS rules devices go here @media screen and (min-width: 480px) { ... } @media screen and (min-width: 600px) { ... } @media screen and (min-width: 768px) { ... } @media screen and (min-width: 910px) { ... }
  19. (cc) flic.kr/p/8Lo5Gk
  20. BROWSER WIDTH GIVES US FRAME, NOT THE CANVAS
  21. FEATURE TESTINGvs. BROWSER SNIFFING 1 Browser width 2 Screen resolution 3
  22. 72PPIHAS (cc) flic.kr/p/6tjjRP
  23. 72 points-per-inch = 72 pixels-per-inch
  24. 96PPI IF A
  25. 72 points-per-inch x [1+(1/3)] = 96 PPI
  26. 78μm goo.gl/zpkFy 78μm “RETINA” DISPLAYS300ppi at 12 inches from the eyes
  27. [In 2013, Intel sees their product line] offer a higher resolution experience than a top-of-the-line 1080p HDTV.” “ http://liliputing.com/2012/04/intel-retina-laptop- desktop-displays-coming-in-2013.html
  28. 72 PPI
  29. 240
  30. 240 PPI
  31. 240 PPI
  32. 72 PPI
  33. RETINA DISPLAYS = LARGER IMAGES, LARGER FILE SIZES
  34. FEATURE TESTINGvs. BROWSER SNIFFING 1 Browser width 2 Screen resolution 3 Bandwidth
  35. (cc) flic.kr/p/4DziUN SPEED TESTS HINDER SPEED, USER EXPERIENCE
  36. Testing for speed of an internet connection is like stepping in front of a car to see how fast it is.” “ (cc) flic.kr/p/4DziUN
  37. Testing for speed of an internet connection is like stepping in front of a car to see how fast it is.” “ But, Christopher, you only have to test it once.”“ (cc) flic.kr/p/4DziUN
  38. Speed test image https://github.com/adamdbradley/foresight.js
  39. Speed test image +50k https://github.com/adamdbradley/foresight.js
  40. Native speed test // @Modernizr's network-connection.js connection = navigator.connection || { type: 0 }, // polyfill isSlowConnection = connection.type == 3 || connection.type == 4 | /^[23]g$/.test(connection.type); http://davidbcalhoun.com/2010/using-navigator-connection-android
  41. FEATURE TESTINGvs. BROWSER SNIFFING 1 Browser width 2 Screen resolution 3 Bandwidth
  42. 1 HiSRC and others 2 3 GIMME THAT OLD SCHOOL IMG
  43. SERIES OF CHECKS TO FIND OUT RESPONSIVE PATH FOR IMAGES...
  44. DO NATIVE SPEED TEST FOR MOBILE DEVICES FIRST... http://davidbcalhoun.com/2010/using-navigator-connection-android
  45. $.hisrc.devicePixelRatio = 1; if(window.devicePixelRatio !== undefined) { $.hisrc.devicePixelRatio = window.devicePixelRatio }; Check pixel density... https://gist.github.com/2428356
  46. +50k https://github.com/adamdbradley/foresight.js Force speed test
  47. LESS THAN 4G MEANS MOBILE IMAGES LEFT IN PLACE
  48. BETWEEN 4G &
 300 Kbps MEANS REGULAR DESKTOP IMAGES SWAPPED IN
  49. FAST SPEED & HIGH DENSITY, RETINA IMAGES SWAPPED IN https://github.com/crdeutsch/hisrc/tree/v2
  50. BRINGING PROBLEMSBRINGING THE PAIN 1 2 3
  51. BRINGING PROBLEMS 1 Double Taxation 2 3 BRINGING THE PAIN
  52. http://css-tricks.com/which- responsive-images-solution- should-you-use/
  53. 24+http://css-tricks.com/which- responsive-images-solution- should-you-use/
  54. http://css-tricks.com/which- responsive-images-solution- should-you-use/ ALL SOLUTIONS HAVE 2x +
  55. http://css-tricks.com/which- responsive-images-solution- should-you-use/ 2x = MORE TIME COSTS
  56. https://github.com/crdeutsch/hisrc/tree/v2 BRINGING THE PAIN 1 Double Taxation 2 Browser Preloader 3 BRINGING THE PAIN
  57. http://www.w3.org/Protocols/rfc2616/rfc2616-sec8.html#sec8.1.4 “A single-user client SHOULD NOT maintain more than 2 connections with any server or proxy.”
  58. https://developer.yahoo.com/blogs/ydn/high-performance-sites- rule-6-move-scripts-bottom-7200.html
  59. https://developer.yahoo.com/blogs/ydn/high-performance-sites- rule-6-move-scripts-bottom-7200.html
  60. http://www.stevesouders.com/blog/2013/04/26/i/ MODERN BROWSERS NOW USE PRELOADER
  61. http://www.stevesouders.com/blog/2013/04/26/i/ PRELOADS IMAGES BEFORE PAGE FULLY DOWNLOADS
  62. BRINGING PROBLEMS 1 Double Taxation 2 One Image, Still Not Ready3 Browser Preloader BRINGING THE PAIN
  63. #rwdimg
  64. #rwdimg
  65. #rwdimg
  66. #rwdimg
  67. #rwdimg <link rel="shortcut icon" href="/assets/favicon.ico" /> Favicon
  68. #rwdimg <link rel="apple-touch-icon-precomposed" sizes="144x144" href="apple-touch-icon-144x144-precomposed.png" /> <link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-touch-icon-114x114-precomposed.png" /> <link rel="apple-touch-icon-precomposed" sizes="72x72" href="apple-touch-icon-72x72-precomposed.png" /> <link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png" /> Mobile iOS Bookmarks
  69. #rwdimg
  70. https://github.com/igrigorik/http-client-hints
  71. 1 2 3 RWD IMAGESMEET THE NEW IMAGE ELEMENTS
  72. 1 2 3 RWD IMAGESMEET THE NEW IMAGE ELEMENTS srcset
  73. Basic Image Swap <img src="swing-400.jpg" alt="Kettlebell Swing"> https://dev.opera.com/articles/native-responsive-images/
  74. Image Fuel <img srcset="swing-200.jpg 200w, swing-400.jpg 400w, swing-800.jpg 800w, swing-1600.jpg 1600w" src="swing-400.jpg" alt="Kettlebell Swing"> https://dev.opera.com/articles/native-responsive-images/
  75. Image Fuel <img srcset="swing-200.jpg 200w, swing-400.jpg 400w, swing-800.jpg 800w, swing-1600.jpg 1600w" src="swing-400.jpg" alt="Kettlebell Swing"> https://dev.opera.com/articles/native-responsive-images/
  76. Image Fuel <img srcset="swing-200.jpg 200w, swing-400.jpg 400w, swing-800.jpg 800w, swing-1600.jpg 1600w" src="swing-400.jpg" alt="Kettlebell Swing"> https://dev.opera.com/articles/native-responsive-images/
  77. Image Fuel <img srcset="swing-200.jpg 200w, swing-400.jpg 400w, swing-800.jpg 800w, swing-1600.jpg 1600w" src="swing-400.jpg" alt="Kettlebell Swing"> https://dev.opera.com/articles/native-responsive-images/
  78. 1 2 3 RWD IMAGESMEET THE NEW IMAGE ELEMENTS srcset attribute sizes attribute
  79. Basic Image Swap <img sizes="(min-width: 30em) 100vw, (min-width: 50em) 50vw, 200px" srcset="swing-200.jpg 200w, swing-400.jpg 400w, swing-800.jpg 800w, swing-1600.jpg 1600w" src="swing-400.jpg" alt="Kettlebell Swing"> https://dev.opera.com/articles/native-responsive-images/
  80. Basic Image Swap <img sizes="(min-width: 30em) 100vw, (min-width: 50em) 50vw, 200px" srcset="swing-200.jpg 200w, swing-400.jpg 400w, swing-800.jpg 800w, swing-1600.jpg 1600w" src="swing-400.jpg" alt="Kettlebell Swing"> https://dev.opera.com/articles/native-responsive-images/
  81. Basic Image Swap <img sizes="(min-width: 30em) 100vw, (min-width: 50em) 50vw, 200px" srcset="swing-200.jpg 200w, swing-400.jpg 400w, swing-800.jpg 800w, swing-1600.jpg 1600w" src="swing-400.jpg" alt="Kettlebell Swing"> https://dev.opera.com/articles/native-responsive-images/
  82. Basic Image Swap <img sizes="(min-width: 30em) 100vw, (min-width: 50em) 50vw, 200px" srcset="swing-200.jpg 200w, swing-400.jpg 400w, swing-800.jpg 800w, swing-1600.jpg 1600w" src="swing-400.jpg" alt="Kettlebell Swing"> https://dev.opera.com/articles/native-responsive-images/
  83. IT’S STILL UP TO BROWSER TO PICK WHICH IMAGE TO USE
  84. 1 2 3 <picture> srcset attribute sizes attribute RWD IMAGESMEET THE NEW IMAGE ELEMENTS
  85. <picture> <img src="small.jpg" alt=“That awesome Saints’ touchdown.">
  86. <picture> <picture> <source media="(min-width: 45em)" srcset="large.jpg"> <source media="(min-width: 32em)" srcset="cropped.jpg"> <img src="small.jpg" alt=“That awesome Saints’ touchdown."> </picture>
  87. <picture> <picture> <source media="(min-width: 45em)" srcset="large.jpg"> <source media="(min-width: 32em)" srcset="cropped.jpg"> <img src="small.jpg" alt=“That awesome Saints’ touchdown."> </picture>
  88. <picture> <picture> <source media="(min-width: 45em)" srcset="large.jpg"> <source media="(min-width: 32em)" srcset="cropped.jpg"> <img src="small.jpg" alt=“That awesome Saints’ touchdown."> </picture>
  89. <picture> <picture> <source media="(min-width: 45em)" srcset="large.jpg"> <source media="(min-width: 32em)" srcset="cropped.jpg"> <img src="small.jpg" alt=“That awesome Saints’ touchdown."> </picture>
  90. <picture> <picture> <source media="(min-width: 45em)" srcset="large.jpg"> <source media="(min-width: 32em)" srcset="cropped.jpg"> <img src="small.jpg" alt=“That awesome Saints’ touchdown."> </picture>
  91. <picture> <picture> <source media="(min-width: 45em)" srcset="large.jpg"> <source media="(min-width: 32em)" srcset="cropped.jpg"> <img src="small.jpg" alt=“That awesome Saints’ touchdown."> </picture>
  92. USE <PICTURE> FOR FINER CONTROL, ART DIRECTION
  93. OTHERWISE, KEEP USING SRCSET & SIZES
  94. http://responsivedesign.is/resources/images/picture-fill
  95. https://wordpress.org/plugins/ricg-responsive-images/
  96. 1 2 3 <picture> srcset attribute sizes attribute RWD IMAGESMEET THE NEW IMAGE ELEMENTS
  97. THANK YOU!CHRISTOPHER SCHMITT Newsletter - http://eepurl.com/TQAer
  98. WORKAROUNDSTRICKS in CONTEXT 1 2 3 & (cc) flic.kr/p/64fGf6
  99. WORKAROUNDSTRICKS 1 background-size: 100% 2 3 & (cc) flic.kr/p/64fGf6
  100. http://fittextjs.com/
  101. background-size: 100% <a href="example.com/link">Download on Github</a> .download a { padding: .095em .8em; background: url(../img/arrow.png) no-repeat; background-size: 100%; margin-left: .4em; -webkit-transition: margin 0.15s ease-out; -moz-transition: margin 0.15s ease-out; text-decoration: none; } 9+5+9+ 11.6+17+
  102. WORKAROUNDSTRICKS in CONTEXT 1 background-size: auto 2 SVG 3 & (cc) flic.kr/p/64fGf6
  103. SVG
  104. Native SVG http://caniuse.com/#search=SVG%20in%20HTML%20img%20element
  105. PNG SVG 9+5+9+ 11.6+17+
  106. http://petercollingridge.appspot.com/svg-optimiser
  107. https://github.com/svg/svgo-gui
  108. https://github.com/svg/svgo-gui
  109. HTML5 Boilerplate <!doctype html> <!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]--> <!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]--> <!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <! [endif]--> <!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<! [endif]--> <head>
  110. Modernizr check if(!Modernizr.svg){ var images = document.getElementsByTagName("img"); for(var i = 0; i < images.length; i++){ var src = images[i].src.split("."); images[i].src = src[0] + ".png"; } } http://stackoverflow.com/questions/12846852/ svg-png-extension-switch
  111. https://github.com/filamentgroup/grunticon/
  112. https://wordpress.org/plugins/scalable-vector-graphics-svg/
  113. WORKAROUNDSTRICKS in CONTEXT 1 background-size: auto 2 SVG 3 font-based solutions & (cc) flic.kr/p/64fGf6
  114. ...if you use <meta charset="utf-8"> (you should be for HTML5), you’re adding common Unicode characters like ♫ and ✆, and you don’t need a specific font’s version... just copy and paste them into your HTML.” “
  115. Font-based RWD http://ilovetypography.com/2012/04/11/designing-type-systems/
  116. Font-based RWD http://ilovetypography.com/2012/04/11/designing-type-systems/ avg file size 40kb
  117. http://css-tricks.com/examples/IconFont/
  118. http://fontello.com/
  119. http://icomoon.io
  120. Font-based icons <style> [data-icon]:before { font-family: 'icon-font'; content: attr(data-icon); } </style> <a href="http://example.com/cloud/save/"> <span data-icon="C" aria-hidden="true"></span> Save to Cloud </a>
  121. WORKAROUNDSTRICKS in CONTEXT 1 background-size: 100% 2 SVG 3 font-based solutions & (cc) flic.kr/p/64fGf6 4 compressed JPEGs
  122. iCloud iOS 5 OSX Lion iPad 2 iPhone OS The world’s most advanced desktop operating system advances even further. With over 250 new features including Multi-Touch gestures, Mission Control, full-screen apps, and Launchpad, OS X Lion takes the Mac further than ever. Learn More X Lion
  123. iCloud iOS 5 OSX Lion iPad 2 iPhone OS The world’s most advanced desktop operating system advances even further. With over 250 new features including Multi-Touch gestures, Mission Control, full-screen apps, and Launchpad, OS X Lion takes the Mac further than ever. Learn More X Lion ! " ← ↑
  124. iCloud iOS 5 OSX Lion iPad 2 iPhone OS The world’s most advanced desktop operating system advances even further. With over 250 new features including Multi-Touch gestures, Mission Control, full-screen apps, and Launchpad, OS X Lion takes the Mac further than ever. Learn More X Lion ↑ ← " !
  125. iCloud iOS 5 OSX Lion iPad 2 iPhone OS The world’s most advanced desktop operating system advances even further. With over 250 new features including Multi-Touch gestures, Mission Control, full-screen apps, and Launchpad, OS X Lion takes the Mac further than ever. Learn More X Lion ! ↙ " ← ← ↗ ↑ ↖ ↑ ↖
  126. iCloud iOS 5 OSX Lion iPad 2 iPhone OS The world’s most advanced desktop operating system advances even further. With over 250 new features including Multi-Touch gestures, Mission Control, full-screen apps, and Launchpad, OS X Lion takes the Mac further than ever. Learn More X Lion ↑ ↗ ← " " ↙ ! ↘ ! ↘
  127. (cc) flic.kr/p/64fGf6
  128. 446kb < 8,755.2kb (cc) flic.kr/p/64fGf6 0% vs 100%
  129. <picture> Patch <picture alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia"> <!-- <source src="small.jpg"> --> <source src="small.jpg"> <!-- <source src="medium.jpg" media="(min-width: 400px)"> --> <source src="medium.jpg" media="(min-width: 400px)"> <!-- <source src="large.jpg" media="(min-width: 800px)"> --> <source src="large.jpg" media="(min-width: 800px)"> <!-- Fallback content for non-JS browsers. Same src as the initial source element. --> <noscript><img src="small.jpg" alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia"></noscript> </picture> http://www.w3.org/community/respimg/2012/03/15/polyfilling-picture- without-the-overhead/
  130. Size Type Dimensions Display Px Density File Size Extreme 2276x1400 1x & 2x 446kb Extra Large 1024x1536 2x 1,745kb 512x768 1x 503kb Large 640x960 2x 746kb 320x480 1x 223kb Medium 500x750 2x 485kb 250x375 1x 145kb
  131. Size Type Dimensions Display Px Density File Size Extreme 2276x1400 1x & 2x 446kb Extra Large 1024x1536 2x 1,745kb 512x768 1x 503kb Large 640x960 2x 746kb 320x480 1x 223kb Medium 500x750 2x 485kb 250x375 1x 145kb
  132. Size Type Dimensions Display Px Density File Size Extreme 2276x1400 1x & 2x 446kb Extra Large 1024x1536 2x 1,745kb 512x768 1x 503kb Large 640x960 2x 746kb 320x480 1x 223kb Medium 500x750 2x 485kb 250x375 1x 145kb
  133. <img src="rock-climber.jpg" alt="" /> One Image, One IMG
  134. (cc) flic.kr/p/64fGf6 EXTREMELYCOMPRESSED PROBLEMS
  135. (cc) flic.kr/p/64fGf6 COMBO MOVESHIGHLY COMPRESSED JPEGS
  136. <img src="rock-climbing-400px.jpg" srcset="rock-climbing-400px.jpg 400w, 
 rock-climbing-compressed.jpg 600w" sizes="100vw" alt="Mountain Climber" /> http://codepen.io/teleject/full/qpxmr/
  137. http://codepen.io/teleject/full/qpxmr/
  138. THANK YOU!CHRISTOPHER SCHMITT

×