[wvbcn] Adaptive Images in Responsive Web Design

1,968 views

Published on

Published in: Technology, Design

[wvbcn] Adaptive Images in Responsive Web Design

  1. 1. #WVBCN ADAPTIVE IMAGESIN RESPONSIVE WEB DESIGN CHRISTOPHER SCHMITT @teleject
  2. 2. #WVBCN ADAPTIVE IMAGESIN RESPONSIVE WEB DESIGN CHRISTOPHER SCHMITT @telejectWhat Bruce Said!
  3. 3. CHRISTOPHER SCHMITT @teleject
  4. 4. @teleject http://nonbreakingspace.tv/
  5. 5. @teleject http://dwmgbook.com/
  6. 6. @teleject http://CSSsummit.com/
  7. 7. @teleject http://cssdevconf.com/
  8. 8. y x
  9. 9. WHY DON’T WE ASK THE BROWSER? (cc) flic.kr/p/vUBHv
  10. 10. alert("User-agent header sent: " + navigator.userAgent);
  11. 11. alert("User-agent header sent: " + navigator.userAgent);
  12. 12. Mozilla/1.0 (Win3.1) http://www.useragentstring.com/ (cc) flic.kr/p/vUBHv
  13. 13. Mozilla/1.0 (Win3.1) Mozilla/1.22 (compatible; MSIE 2.0; Windows 95) (cc) flic.kr/p/vUBHv http://www.useragentstring.com/
  14. 14. 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/
  15. 15. 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
  16. 16. FEATURE TESTINGvs. BROWSER SNIFFING 1 2 3
  17. 17. FEATURE TESTINGvs. BROWSER SNIFFING 1 Browser width 2 3
  18. 18. 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
  19. 19. 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/
  20. 20. 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) { ... }
  21. 21. (cc) flic.kr/p/8Lo5Gk
  22. 22. BROWSER WIDTH GIVES US FRAME, NOT THE CANVAS
  23. 23. FEATURE TESTINGvs. BROWSER SNIFFING 1 Browser width 2 Screen resolution 3
  24. 24. 72PPIHAS SERVED US WELL (cc) flic.kr/p/6tjjRP
  25. 25. 72 points-per-inch = 72 pixels-per-inch
  26. 26. 96PPI IF A WINDOWS USER
  27. 27. 72 points-per-inch x [1+(1/3)] = 96 PPI
  28. 28. 78μm goo.gl/zpkFy 78μm “RETINA” DISPLAYS300ppi at 12 inches from the eyes
  29. 29. [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
  30. 30. 72 PPI
  31. 31. 240
  32. 32. 240 PPI
  33. 33. 240 PPI
  34. 34. 72 PPI
  35. 35. RETINA DISPLAYS = LARGER IMAGES, LARGER FILE SIZES
  36. 36. FEATURE TESTINGvs. BROWSER SNIFFING 1 Browser width 2 Screen resolution 3 Bandwidth
  37. 37. (cc) flic.kr/p/4DziUN SPEED TESTS HINDER SPEED, USER EXPERIENCE
  38. 38. 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
  39. 39. 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
  40. 40. Speed test image https://github.com/adamdbradley/foresight.js
  41. 41. Speed test image +50k https://github.com/adamdbradley/foresight.js
  42. 42. 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
  43. 43. FEATURE TESTINGvs. BROWSER SNIFFING 1 Browser width 2 Screen resolution 3 Bandwidth
  44. 44. IMGGIMME THAT OLD SCHOOL 1 2 3
  45. 45. 1 .htaccess 2 3 IMGGIMME THAT OLD SCHOOL
  46. 46. Filament .htaccess # Responsive Images # Mobile-First images that scale responsively and responsibly # Copyright 2010, Scott Jehl, Filament Group, Inc # Dual licensed under the MIT or GPL Version 2 licenses. # //Start Responsive Images RewriteEngine On # direct image requests to temp RewriteCond %{QUERY_STRING} full=(.*)&? RewriteRule (.*)rwd-router/.*.(jpe?g|png|gif|webp) $1%1 [L] # ignore trap for non-image requests, rewrite URL without trap segment RewriteRule (.*)rwd-router/(.*)$ $1$2 # //End Responsive Images https://github.com/filamentgroup/Responsive-Images
  47. 47. Filament .htaccess <script src="responsiveimgs.js"></script> <img src="sample-content/running-sml.jpg? full=sample-content/running-lrg.jpg" /> 8+4+
  48. 48. ...the server has no way to know what resolution the client’s device is, so it can’t send the appropriately sized embeded images.” “ http://mattwilcox.net/archive/entry/id/1053/
  49. 49. http://adaptive-images.com/
  50. 50. ADD .HTACCESS, JS, PHP 5, GD lib*, & THEN <IMG>
  51. 51. 1 .htaccess 2 <picture> and/or srcset 3 GIMME THAT OLD SCHOOL IMG
  52. 52. media queries in HTML <video controls> <source type="video/mp4" src="video/windowsill_small.mp4" media="all and (max-width: 480px), all and (max-device-width: 480px)"> <source type="video/webm" src="video/windowsill_small.webm" media="all and (max-width: 480px), all and (max-device-width: 480px)"> <source type="video/mp4" src="video/windowsill.mp4"> <source type="video/webm" src="video/windowsill.webm"> <!-- proper fallback content goes here --> </video> http://www.w3.org/community/respimg/2012/03/15/polyfilling- picture-without-the-overhead/
  53. 53. <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/
  54. 54. ADD IF-ELSE HTML, JS, BORROW <VIDEO>, & THEN <IMG>
  55. 55. @srcset standard? <h1><img alt="The Breakfast Combo" src="banner.jpeg" srcset="banner-HD.jpeg 2x, banner-phone.jpeg 100w, banner-phone-HD.jpeg 100w 2x"> </h1> http://www.whatwg.org/specs/web-apps/current-work/multipage/ embedded-content-1.html#attr-img-srcset
  56. 56. 1 .htaccess 2 <picture> and/or srcset 3 HiSRC GIMME THAT OLD SCHOOL IMG
  57. 57. Set, forget it HiSRC <script src="https://ajax.googleapis.com/ajax/ libs/jquery/1.7.2/jquery.min.js"></script> <script src="hisrc.js"></script> <script> $(document).ready(function(){ $(".hisrc img").hisrc(); }); </script> https://github.com/teleject/hisrc
  58. 58. Set, forget it HiSRC <div class="hisrc"> <img src="halloween-mobile-1st.png" data-1x="halloween-x1.png" data-2x="halloween-x2.jpg" alt="Celebrating Halloween in style" /> </div>
  59. 59. Set, forget it HiSRC <div class="hisrc"> <img src="halloween-mobile-1st.png" data-1x="halloween-x1.png" data-2x="halloween-x2.jpg" alt="Celebrating Halloween in style" /> </div>
  60. 60. SERIES OF CHECKS TO FIND OUT RESPONSIVE PATH FOR IMAGES...
  61. 61. DO NATIVE SPEED TEST FOR MOBILE DEVICES FIRST... http://davidbcalhoun.com/2010/using-navigator-connection-android
  62. 62. $.hisrc.devicePixelRatio = 1; if(window.devicePixelRatio !== undefined) { $.hisrc.devicePixelRatio = window.devicePixelRatio }; Check pixel density... https://gist.github.com/2428356
  63. 63. +50k https://github.com/adamdbradley/foresight.js Force speed test
  64. 64. LESS THAN 4G MEANS MOBILE IMAGES LEFT IN PLACE
  65. 65. BETWEEN 4G & 300 Kbps MEANS REGULAR DESKTOP IMAGES SWAPPED IN
  66. 66. FAST SPEED & HIGH DENSITY, RETINA IMAGES SWAPPED IN https://github.com/crdeutsch/hisrc/tree/v2
  67. 67. 2 TRICK PONY
  68. 68. CSS IS CORE. WE USE CSS MEDIA QUERIES FOR DESIGN
  69. 69. http://mediaqueri.es/
  70. 70. 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) { ... }
  71. 71. Single pixel GIF
  72. 72. Single pixel GIF
  73. 73. Single pixel GIF
  74. 74. Single pixel GIF
  75. 75. $.hisrc.defaults = { useTransparentGif: true, http://www.w3.org/community/respimg/2012/04/06/responsive- content-images-using-a-spacer-png-and-background-image/ Single pixel GIF
  76. 76. $.hisrc.defaults = { useTransparentGif: true, transparentGifSrc: 'http:// example.com/spg.gif', 6+5+9+ 11.6+17+ Single pixel GIF
  77. 77. $.hisrc.defaults = { useTransparentGif: true, transparentGifSrc: 'data:image/ gif;base64,R0lGODlhAQABAIAAAMz/ AAAAACH5BAEAAAAALAAAAAABAAE AAAICRAEAOw==', 8+5+9+ 11.6+17+ Single pixel GIF
  78. 78. http://css-tricks.com/which- responsive-images-solution- should-you-use/
  79. 79. 24+http://css-tricks.com/which- responsive-images-solution- should-you-use/
  80. 80. http://css-tricks.com/which- responsive-images-solution- should-you-use/ ALL SOLUTIONS HAVE 2x HTTP REQUESTS + JAVASCRIPT
  81. 81. WORKAROUNDSTRICKS in CONTEXT 1 2 3 & (cc) flic.kr/p/64fGf6
  82. 82. WORKAROUNDSTRICKS 1 background-size: 100% 2 3 & (cc) flic.kr/p/64fGf6
  83. 83. http://fittextjs.com/
  84. 84. 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+
  85. 85. WORKAROUNDSTRICKS in CONTEXT 1 background-size: auto 2 SVG 3 & (cc) flic.kr/p/64fGf6
  86. 86. SVG
  87. 87. Native SVG http://caniuse.com/#search=SVG%20in%20HTML%20img%20element
  88. 88. PNG 16kb SVG 7kb 9+5+9+ 11.6+17+
  89. 89. http://petercollingridge.appspot.com/svg-optimiser
  90. 90. 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
  91. 91. WORKAROUNDSTRICKS in CONTEXT 1 background-size: auto 2 SVG (Clown Car) 3 & (cc) flic.kr/p/64fGf6
  92. 92. WORKAROUNDSTRICKS in CONTEXT 1 background-size: auto 2 SVG 3 font-based solutions & (cc) flic.kr/p/64fGf6
  93. 93. ...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.” “
  94. 94. Font-based RWD http://ilovetypography.com/2012/04/11/designing-type-systems/
  95. 95. Font-based RWD http://ilovetypography.com/2012/04/11/designing-type-systems/ avg file size 40kb/per font
  96. 96. http://css-tricks.com/examples/IconFont/
  97. 97. http://fontello.com/
  98. 98. http://icomoon.io
  99. 99. 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>
  100. 100. WORKAROUNDSTRICKS in CONTEXT 1 background-size: 100% 2 SVG 3 font-based solutions & (cc) flic.kr/p/64fGf6 4 compressed JPEGs
  101. 101. 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
  102. 102. 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 ! " ← ↑
  103. 103. 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 ! ↙ " ← ← ↗ ↑ ↖ ↑ ↖
  104. 104. 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 ↑ ↗ ← " " ↙ ! ↘ ! ↘
  105. 105. (cc) flic.kr/p/64fGf6
  106. 106. 446kb < 8,755.2kb (cc) flic.kr/p/64fGf6 0% vs 100%
  107. 107. Size Type Dimensions Display Px Density File Size Extreme 2276x1400 1x & 2x 446kb Extra Large 1024x1536 2x 1,745kb Extra Large 512x768 1x 503kb Large 640x960 2x 746kb Large 320x480 1x 223kb Medium 500x750 2x 485kb Medium 250x375 1x 145kb
  108. 108. Size Type Dimensions Display Px Density File Size Extreme 2276x1400 1x & 2x 446kb Extra Large 1024x1536 2x 1,745kb Extra Large 512x768 1x 503kb Large 640x960 2x 746kb Large 320x480 1x 223kb Medium 500x750 2x 485kb Medium 250x375 1x 145kb
  109. 109. <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/
  110. 110. <img src="rock-climber.jpg" alt="" /> One Image, One IMG
  111. 111. (cc) flic.kr/p/64fGf6 EXTREMELYCOMPRESSED PROBLEMS
  112. 112. Clown Car SVG <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 329" preserveAspectRatio="xMidYMid meet"> <title>Clown Car Technique</title> <style> svg { background-size: 100% 100%; background-repeat: no-repeat; } @media screen and (max-width: 400px) { svg {background-image: url(images/small.png");} } @media screen and (min-width: 401px) and (max-width: 700px) { svg {background-image: url(images/medium.png);} } @media screen and (min-width: 701px) and (max-width: 1000px) { svg {background-image: url(images/big.png);} } @media screen and (min-width: 1001px) { svg {background-image: url(images/huge.png);} } </style> </svg> https://github.com/estelle/clowncar
  113. 113. Clown Car SVG <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 329" preserveAspectRatio="xMidYMid meet"> <title>Clown Car Technique</title> <style> svg { background-size: 100% 100%; background-repeat: no-repeat; } @media screen and (max-width: 400px) { svg {background-image: url(images/small.png");} } @media screen and (min-width: 401px) and (max-width: 700px) { svg {background-image: url(images/medium.png);} } @media screen and (min-width: 701px) and (max-width: 1000px) { svg {background-image: url(images/big.png);} } @media screen and (min-width: 1001px) { svg {background-image: url(images/huge.png);} } </style> </svg> https://github.com/estelle/clowncar
  114. 114. http://coding.smashingmagazine.com/2013/06/02/clown- car-technique-solving-for-adaptive-images-in-responsive- web-design/
  115. 115. <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 375 231" preserveAspectRatio="xMidYMid meet" tabindex="-1" aria-label="the aria label is being read" role="img" title="the title attribute of the SVG is being read"> <title>Clown Car Technique</title> <style> </style> </svg> http://codepen.io/teleject/pen/KlzBe Combo Move: SVG
  116. 116. <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 375 231" preserveAspectRatio="xMidYMid meet" tabindex="-1" aria-label="the aria label is being read" role="img" title="the title attribute of the SVG is being read"> <title>Clown Car Technique</title> <style> </style> <foreignObject> <!--[if lte IE 8]> <img src="../images/mobile-first.png" width="375" height="231" alt="put alt attribute text here"/> <![endif]--> </foreignObject> </svg> http://codepen.io/teleject/pen/KlzBe
  117. 117. svg { background-size: 100% 100%; background-repeat: no-repeat; } http://codepen.io/teleject/pen/KlzBe Combo Move: SVG
  118. 118. svg { background-size: 100% 100%; background-repeat: no-repeat; } @media screen and (max-width: 400px) { svg { background-image: url("http://s.cdpn.io/168/pic-Medium-375x231- @1x-72ppi.jpg"); outline: green solid 5px; } } http://codepen.io/teleject/pen/KlzBe Combo Move: SVG
  119. 119. @media screen and (min-width: 401px), screen and (max-width: 800px) and (-webkit-min-device-pixel-ratio: 1.75) { svg { background-image: url("http://s.cdpn.io/168/pic- Extreme-2276x1400-72ppi.jpg"); outline: red solid 5px; } } http://codepen.io/teleject/pen/KlzBe Combo Move: Compressed JPEG
  120. 120. @media screen and (max-width: 400px) { svg { width: 375px; height: 231px; } } @media screen and (min-width: 401px) { svg { width: 750px; height: 462px; } } svg { outline: 5px solid black; } http://codepen.io/teleject/pen/KlzBe Combo Move: CSS
  121. 121. http://codepen.io/teleject/pen/KlzBe
  122. 122. http://codepen.io/teleject/pen/KlzBe
  123. 123. http://codepen.io/teleject/pen/KlzBe
  124. 124. COMBO MOVEDON’T BLAME THE PLAYER 1 2 3 No additional HTTP request1 Min. # of images = 2 No JavaScript http://codepen.io/teleject/pen/KlzBe
  125. 125. IMGGIMME THAT NEW SCHOOL 1 2 3
  126. 126. IMGGIMME THAT NEW SCHOOL 1 2 3 simple design for users #rwdimg 1
  127. 127. IMGGIMME THAT NEW SCHOOL 1 2 3 simple design for users browser, server handshake #rwdimg 2
  128. 128. IMGGIMME THAT NEW SCHOOL 1 2 3 simple design for users browser, server handshake same, several formats #rwdimg 3
  129. 129. #rwdimg
  130. 130. http://telejec.tv/12uYOC4
  131. 131. #rwdimg
  132. 132. #rwdimg
  133. 133. #rwdimg
  134. 134. #rwdimg
  135. 135. #rwdimg
  136. 136. #rwdimg
  137. 137. #rwdimg <link rel="shortcut icon" href="/assets/favicon.ico" /> Favicon
  138. 138. #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
  139. 139. #rwdimg
  140. 140. THANK YOU!CHRISTOPHER SCHMITT @teleject The Non Breaking Space Podcast - http://nonbreakingspace.tv/

×