[CSSDevConf] Adaptive Images in Responsive Web Design 2014
•
155 likes•18,814 views
The web doesn't stop at the desktop anymore. Our image assets need to do more than look good in one context. In this talk, I look at how images like JPEG, GIFs, SVG, Icons, Unicode, and more can be used in a multi-device environment.
Recommended
More Related Content
What's hot
What's hot (20)
Similar to [CSSDevConf] Adaptive Images in Responsive Web Design 2014
Similar to [CSSDevConf] Adaptive Images in Responsive Web Design 2014 (20)
More from Christopher Schmitt
More from Christopher Schmitt (11)
Recently uploaded
Recently uploaded (20)
[CSSDevConf] Adaptive Images in Responsive Web Design 2014
- 1. CHRISTOPHER SCHMITT @teleject ADAPTIVE IMAGES IN RESPONSIVE WEB DESIGN CSS DEV CONF 2014
- 3. @teleject
- 4. @teleject Responsive Media Course
- 12. y x
- 19. WHY DON’T WE ASK THE BROWSER? (cc) flic.kr/p/vUBHv
- 20. alert("User-agent header sent: " + navigator.userAgent);
- 21. alert("User-agent header sent: " + navigator.userAgent);
- 22. Mozilla/1.0 (Win3.1) http://www.useragentstring.com/ (cc) flic.kr/p/vUBHv
- 23. Mozilla/1.0 (Win3.1) Mozilla/1.22 (compatible; MSIE 2.0; Windows 95) (cc) flic.kr/p/vUBHv http://www.useragentstring.com/
- 24. 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/
- 25. 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
- 27. FEATURE TESTING vs. BROWSER SNIFFING 1 2 3
- 28. FEATURE TESTING vs. BROWSER SNIFFING 1 Browser width 2 3
- 29. 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
- 30. 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/
- 31. 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) { ... }
- 33. BROWSER WIDTH GIVES US FRAME, NOT THE CANVAS
- 34. FEATURE TESTING vs. BROWSER SNIFFING 1 Browser width 2 Screen resolution 3
- 35. 72PPI HAS (cc) flic.kr/p/6tjjRP
- 36. 72 points-per-inch = 72 pixels-per-inch
- 37. 96PPI IF A
- 38. 72 points-per-inch x [1+(1/3)] = 96 PPI
- 39. 78μm “RETINA” DISPLAYS 300ppi at 12 inches from the eyes goo.gl/zpkFy 78μm
- 41. [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
- 42. 72 PPI
- 43. 240
- 44. 240 PPI
- 45. 240 PPI
- 46. 72 PPI
- 48. RETINA DISPLAYS = LARGER IMAGES, LARGER FILE SIZES
- 49. FEATURE TESTING vs. BROWSER SNIFFING 1 Browser width 2 Screen resolution 3 Bandwidth
- 50. SPEED TESTS HINDER SPEED, USER EXPERIENCE (cc) flic.kr/p/4DziUN
- 51. 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
- 52. 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
- 53. Speed test image https://github.com/adamdbradley/foresight.js
- 54. Speed test image +50k https://github.com/adamdbradley/foresight.js
- 55. 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
- 56. FEATURE TESTING vs. BROWSER SNIFFING 1 Browser width 2 Screen resolution 3 Bandwidth
- 57. IMG GIMME THAT OLD SCHOOL 1 2 3
- 58. IMG GIMME THAT OLD SCHOOL 1 srcset & sizes 2 3
- 59. Basic Image Swap <img src="headshot_500px.jpg" srcset="headshot_650px.jpg 1.5x, headshot_1000px.jpg 2x" width="500" alt="Headshot">
- 60. Basic Image Swap <img sizes="(max-width: 30em) 100vw, (max-width: 50em) 50vw, calc(33vw - 100px)" 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/
- 61. Basic Image Swap <img sizes="(max-width: 30em) 100vw, (max-width: 50em) 50vw, calc(33vw - 100px)" 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/
- 62. Basic Image Swap <img sizes="(max-width: 30em) 100vw, (max-width: 50em) 50vw, calc(33vw - 100px)" 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/
- 63. Basic Image Swap <img sizes="(max-width: 30em) 100vw, (max-width: 50em) 50vw" 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/
- 64. Basic Image Swap <img sizes="(max-width: 30em) 100vw, (max-width: 50em) 50vw" 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/
- 65. IT’S STILL UP TO BROWSER TO PICK WHICH IMAGE TO USE
- 66. BUT YOU WILL USE THESE ATTRIBUTES 1,000% OF THE TIME* * Science
- 67. GIMME THAT OLD SCHOOL IMG 1 srcset & sizes 2 <picture> 3
- 68. <picture> <img src="small.jpg" alt=“That awesome Saints touchdown.">
- 69. <picture> <picture> <source media="(min-width: 45em)" srcset="large.jpg"> <source media="(min-width: 32em)" srcset="med.jpg"> <img src="small.jpg" alt=“That awesome Saints touchdown."> </picture> 38+ 33+ 25+ ? ?
- 70. <picture> <picture> <source media="(min-width: 45em)" srcset="large.jpg"> <source media="(min-width: 32em)" srcset="med.jpg"> <img src="small.jpg" alt=“That awesome Saints touchdown."> </picture> 38+ 33+ 25+ ? ?
- 71. <picture> <picture> <source media="(min-width: 45em)" srcset="large.jpg"> <source media="(min-width: 32em)" srcset="med.jpg"> <img src="small.jpg" alt=“That awesome Saints touchdown."> </picture> 38+ 33+ 25+ ? ?
- 72. <picture> <picture> <source media="(min-width: 45em)" srcset="large.jpg"> <source media="(min-width: 32em)" srcset="med.jpg"> <img src="small.jpg" alt=“That awesome Saints touchdown."> </picture> 38+ 33+ 25+ ? ?
- 73. USE <PICTURE> POWER TO SOLVE ART DIRECTION
- 74. & ONLY WHEN ALL OTHER CSS-y OPTIONS HAVE BEEN EXPLORED
- 76. GIMME THAT OLD SCHOOL IMG 1 srcset & sizes 2 <picture> 3 HiSRC and more
- 77. 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
- 78. 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>
- 79. 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>
- 80. SERIES OF CHECKS TO FIND OUT RESPONSIVE PATH FOR IMAGES...
- 81. DO NATIVE SPEED TEST FOR MOBILE DEVICES FIRST... http://davidbcalhoun.com/2010/using-navigator-connection-android
- 82. Check pixel density... $.hisrc.devicePixelRatio = 1; if(window.devicePixelRatio !== undefined) { $.hisrc.devicePixelRatio = window.devicePixelRatio }; https://gist.github.com/2428356
- 83. Force speed test +50k https://github.com/adamdbradley/foresight.js
- 84. LESS THAN 4G MEANS MOBILE IMAGES LEFT IN PLACE
- 85. BETWEEN 4G & 300 Kbps MEANS REGULAR DESKTOP IMAGES SWAPPED IN
- 86. FAST SPEED & HIGH DENSITY, RETINA IMAGES SWAPPED IN https://github.com/crdeutsch/hisrc/tree/v2
- 89. ALL SOLUTIONS HAVE 2x + http://css-tricks.com/which-responsive- images-solution-should- you-use/
- 90. WORKAROUNDS TRICKS in CONTEXT 1 2 3 & (cc) flic.kr/p/64fGf6
- 91. WORKAROUNDS & TRICKS 1 background-size: 100% 2 3 (cc) flic.kr/p/64fGf6
- 93. 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+
- 94. WORKAROUNDS TRICKS in CONTEXT 1 background-size: auto 2 SVG 3 & (cc) flic.kr/p/64fGf6
- 95. SVG
- 99. PNG SVG 17+ 9+ 11.6+ 5+ 9+
- 103. 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
- 105. WORKAROUNDS TRICKS in CONTEXT 1 background-size: auto 2 SVG 3 font-based solutions & (cc) flic.kr/p/64fGf6
- 106. ...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.” “
- 111. Font-based RWD avg file size 40kb http://ilovetypography.com/2012/04/11/designing-type-systems/
- 113. http://fontello.com/
- 114. http://icomoon.io
- 115. 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>
- 116. WORKAROUNDS & TRICKS in CONTEXT 1 background-size: 100% 2 SVG 3 font-based solutions 4 compressed JPEGs (cc) flic.kr/p/64fGf6
- 121. 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
- 122. X Lion! " ← 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 ↑ iCloud iOS 5 OSX Lion iPad 2 iPhone
- 123. X Lion! ↙ " ← ← ↗ ↑ ↖ 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 ↑ ↖ iCloud iOS 5 OSX Lion iPad 2 iPhone
- 126. 446kb < 8,755.2kb 0% vs 100% (cc) flic.kr/p/64fGf6
- 127. 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
- 128. 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
- 129. One Image, One IMG <img src="rock-climber.jpg" alt="" />
- 130. (cc) flic.kr/p/64fGf6 EXTREMELY COMPRESSED PROBLEMS
- 133. COMBO MOVES CLOWN CAR TECHNIQUE + HIGHLY COMPRESSED JPEGS (cc) flic.kr/p/64fGf6
- 134. <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/
- 138. IMG GIMME THAT NEW SCHOOL 1 2 3 #rwdimg
- 139. IMG GIMME THAT NEW SCHOOL 1 2 3 simple design for users #rwdimg
- 140. IMG GIMME THAT NEW SCHOOL 1 2 3 simple design for users browser, server handshake #rwdimg
- 141. IMG GIMME THAT NEW SCHOOL 1 2 3 simple design for users browser, server handshake same, several formats #rwdimg
- 142. #rwdimg
- 144. #rwdimg
- 145. #rwdimg
- 146. #rwdimg
- 147. Favicon <link rel="shortcut icon" href="/assets/favicon.ico" /> #rwdimg
- 148. 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
- 149. #rwdimg
- 150. THANK YOU! CHRISTOPHER SCHMITT Sass Summit - http://SassSummit.com