[cssdevconf] Adaptive Images in Responsive Web Design
•
1 like•3,126 views
This document summarizes Christopher Schmitt's presentation on adaptive images in responsive web design. The presentation covered: 1. Using the browser width, screen resolution, and bandwidth to determine the appropriate image to serve through feature testing rather than browser sniffing. 2. Techniques for serving responsive images including using .htaccess files, the <picture> element, and JavaScript libraries like HiSRC that select images based on various tests. 3. Workarounds for older browsers including using background-size: 100%, SVG images, and font-based solutions.
Report
Share
More Related Content
What's hot
What's hot (18)
Similar to [cssdevconf] Adaptive Images in Responsive Web Design
Similar to [cssdevconf] Adaptive Images in Responsive Web Design (20)
More from Christopher Schmitt
More from Christopher Schmitt (11)
Recently uploaded
Recently uploaded (20)
[cssdevconf] Adaptive Images in Responsive Web Design
- 1. CHRISTOPHER SCHMITT @teleject ADAPTIVE IMAGES IN RESPONSIVE WEB DESIGN CSS DEV CONF 2013
- 3. @teleject
- 11. y x
- 15. WHY DON’T WE ASK THE BROWSER? (cc) flic.kr/p/vUBHv
- 16. alert("User-agent header sent: " + navigator.userAgent);
- 17. alert("User-agent header sent: " + navigator.userAgent);
- 19. Mozilla/1.0 (Win3.1) Mozilla/1.22 (compatible; MSIE 2.0; Windows 95) http://www.useragentstring.com/ (cc) flic.kr/p/vUBHv
- 20. 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://www.useragentstring.com/ (cc) flic.kr/p/vUBHv
- 21. 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
- 23. FEATURE TESTING vs. BROWSER SNIFFING 1 2 3
- 24. FEATURE TESTING vs. BROWSER SNIFFING 1 2 3 Browser width
- 25. 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
- 26. 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/
- 27. 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) { ... }
- 29. BROWSER WIDTH GIVES US FRAME, NOT THE CANVAS
- 30. FEATURE TESTING vs. BROWSER SNIFFING 1 Browser width 2 Screen resolution 3
- 31. 72 PPI HAS SERVED US WELL (cc) flic.kr/p/6tjjRP
- 32. 72 points-per-inch = 72 pixels-per-inch
- 33. 96 PPI IF A WINDOWS USER
- 34. 72 points-per-inch x [1+(1/3)] = 96 PPI
- 35. “RETINA” DISPLAYS 300ppi at 12 inches from the eyes goo.gl/zpkFy 78μm 78μm
- 37. “ [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-laptopdesktop-displays-coming-in-2013.html
- 38. 72 PPI
- 39. 240
- 40. 240 PPI
- 41. 240 PPI
- 42. 72 PPI
- 44. RETINA DISPLAYS = LARGER IMAGES, LARGER FILE SIZES
- 45. FEATURE TESTING vs. BROWSER SNIFFING 1 Browser width 2 Screen resolution 3 Bandwidth
- 46. SPEED TESTS HINDER SPEED, USER EXPERIENCE (cc) flic.kr/p/4DziUN
- 47. “ 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
- 48. “ 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
- 51. 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
- 52. FEATURE TESTING vs. BROWSER SNIFFING 1 Browser width 2 Screen resolution 3 Bandwidth
- 53. IMG GIMME THAT OLD SCHOOL 1 2 3
- 54. IMG GIMME THAT OLD SCHOOL 1 2 3 .htaccess
- 55. 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
- 56. Filament .htaccess <script src="responsiveimgs.js"></script> <img src="sample-content/running-sml.jpg? full=sample-content/running-lrg.jpg" /> 4+ 8+
- 57. “ ...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/
- 59. ADD .HTACCESS, JS, PHP 5, GD lib*, & THEN <IMG>
- 60. IMG GIMME THAT OLD SCHOOL 1 .htaccess 2 <picture> and/or srcset 3
- 61. 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/polyfillingpicture-without-the-overhead/
- 62. <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/polyfillingpicture-without-the-overhead/
- 63. ADD IF-ELSE HTML, JS, BORROW <VIDEO>, & THEN <IMG>
- 64. @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
- 66. IMG GIMME THAT OLD SCHOOL 1 .htaccess 2 <picture> and/or srcset 3 HiSRC
- 67. 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
- 68. 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>
- 69. 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>
- 70. SERIES OF CHECKS TO FIND OUT RESPONSIVE PATH FOR IMAGES...
- 71. DO NATIVE SPEED TEST FOR MOBILE DEVICES FIRST... http://davidbcalhoun.com/2010/using-navigator-connection-android
- 72. Check pixel density... $.hisrc.devicePixelRatio = 1; if(window.devicePixelRatio !== undefined) { $.hisrc.devicePixelRatio = window.devicePixelRatio }; https://gist.github.com/2428356
- 74. LESS THAN 4G MEANS MOBILE IMAGES LEFT IN PLACE
- 75. BETWEEN 4G & 300 Kbps MEANS REGULAR DESKTOP IMAGES SWAPPED IN
- 76. FAST SPEED & HIGH DENSITY, RETINA IMAGES SWAPPED IN https://github.com/crdeutsch/hisrc/tree/v2
- 79. ALL SOLUTIONS HAVE 2x HTTP REQUESTS + JAVASCRIPT http://css-tricks.com/whichresponsive-images-solutionshould-you-use/
- 80. WORKAROUNDS & TRICKS in CONTEXT 1 2 3 (cc) flic.kr/p/64fGf6
- 81. WORKAROUNDS & TRICKS 1 background-size: 100% 2 3 (cc) flic.kr/p/64fGf6
- 83. 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; } 17+ 9+ 11.6+ 5+ 9+
- 84. WORKAROUNDS & TRICKS in CONTEXT 1 background-size: auto 2 SVG 3 (cc) flic.kr/p/64fGf6
- 85. SVG
- 93. 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
- 94. WORKAROUNDS & TRICKS in CONTEXT 1 background-size: auto 2 SVG 3 font-based solutions (cc) flic.kr/p/64fGf6
- 95. “ ...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.”
- 100. Font-based RWD avg file size 40kb/per font http://ilovetypography.com/2012/04/11/designing-type-systems/
- 102. http://fontello.com/
- 103. http://icomoon.io
- 104. 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>
- 105. WORKAROUNDS & TRICKS in CONTEXT 1 background-size: 100% 2 SVG 3 font-based solutions 4 compressed JPEGs (cc) flic.kr/p/64fGf6
- 110. OS X Lion 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 iCloud iOS 5 OSX Lion iPad 2 iPhone
- 111. ! OS X Lion " 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 iCloud iOS 5 OSX Lion iPad 2 iPhone
- 112. ! ↙ OS X Lion " 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 iCloud iOS 5 OSX Lion iPad 2 iPhone
- 113. (cc) flic.kr/p/64fGf6
- 115. 446kb < 8,755.2kb 0% vs 100% (cc) flic.kr/p/64fGf6
- 116. <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/polyfillingpicture-without-the-overhead/
- 117. Size Type Dimensions Display Px Density File Size Extreme 2276x1400 1x & 2x 446kb 1024x1536 2x 1,745kb 512x768 1x 503kb 640x960 2x 746kb 320x480 1x 223kb 500x750 2x 485kb 250x375 1x 145kb Extra Large Large Medium
- 118. Size Type Dimensions Display Px Density File Size Extreme 2276x1400 1x & 2x 446kb 1024x1536 2x 1,745kb 512x768 1x 503kb 640x960 2x 746kb 320x480 1x 223kb 500x750 2x 485kb 250x375 1x 145kb Extra Large Large Medium
- 119. One Image, One IMG <img src="rock-climber.jpg" alt="" />
- 123. COMBO MOVES CLOWN CAR TECHNIQUE + HIGHLY COMPRESSED JPEGS (cc) flic.kr/p/64fGf6
- 124. <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);} https://github.com/estelle/clowncar } @media screen and (min-width: 1001px) {
- 125. <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);} https://github.com/estelle/clowncar } @media screen and (min-width: 1001px) {
- 128. Combo Move: SVG <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
- 129. <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 375 231" preserveAspectRatio="xMidYMid meet" tabindex="-1" aria-label="aria label" role="img" title="title attribute"> <title>Clown Car Technique</title> <style> </style> <foreignObject> <!--[if lte IE 8]> <img src="../images/mobile-first.png" width="375" height="231" alt=""/> <![endif]--> </foreignObject> </svg> http://codepen.io/teleject/pen/KlzBe
- 130. Combo Move: SVG svg { background-size: 100% 100%; background-repeat: no-repeat; } http://codepen.io/teleject/pen/KlzBe
- 131. svg { background-size: 100% 100%; background-repeat: no-repeat; } @media screen and (max-width: 400px) { svg { background-image: url("http://s.cdpn.io/168/picMedium-375x231-@1x-72ppi.jpg"); outline: green solid 5px; } } http://codepen.io/teleject/pen/KlzBe
- 132. Size Type Dimensions Display Px Density File Size Extreme 2276x1400 1x & 2x 446kb 1024x1536 2x 1,745kb 512x768 1x 503kb 640x960 2x 746kb 320x480 1x 223kb 500x750 2x 485kb 250x375 1x 145kb Extra Large Large Medium
- 133. Combo Move: Compressed JPEG @media screen and (min-width: 401px), screen and (max-width: 800px) and (-webkit-min-device-pixelratio: 1.75) { svg { background-image: url("extremely-highlycompressed.jpg"); outline: red solid 5px; } } http://codepen.io/teleject/pen/KlzBe
- 134. @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
- 138. COMBO MOVE DON’T BLAME THE PLAYER 1 No additional HTTP request 2 # of images = 2 3 No JavaScript http://codepen.io/teleject/pen/KlzBe
- 141. IMG GIMME THAT NEW SCHOOL 1 2 3 #rwdimg
- 142. IMG GIMME THAT NEW SCHOOL 1 simple design for users 2 3 #rwdimg
- 143. IMG GIMME THAT NEW SCHOOL 1 simple design for users 2 browser, server handshake 3 #rwdimg
- 144. IMG GIMME THAT NEW SCHOOL 1 simple design for users 2 browser, server handshake 3 same, several formats #rwdimg
- 145. #rwdimg
- 147. #rwdimg
- 148. #rwdimg
- 149. #rwdimg
- 150. Favicon <link rel="shortcut icon" href="/assets/favicon.ico" /> #rwdimg
- 151. Mobile iOS Bookmarks <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" /> #rwdimg
- 152. #rwdimg
- 153. THANK YOU! CHRISTOPHER SCHMITT @teleject The Non Breaking Space Podcast - http://nonbreakingspace.tv/