[Austin WordPress Meetup] Adaptive Images in Responsive Web Design

19,980 views

Published on

Published in: Design, Internet
0 Comments
202 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
19,980
On SlideShare
0
From Embeds
0
Number of Embeds
363
Actions
Shares
0
Downloads
666
Comments
0
Likes
202
Embeds 0
No embeds

No notes for slide

[Austin WordPress Meetup] Adaptive Images in Responsive Web Design

  1. AUSTIN WORDPRESS 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. @teleject http://JavaScriptSummit.com/
  7. y x
  8. http://cssspecificity.com
  9. http://cssspecificity.com
  10. http://cssspecificity.com
  11. WHY DON’T WE ASK THE BROWSER? (cc) flic.kr/p/vUBHv
  12. alert("User-agent header sent: " + navigator.userAgent);
  13. alert("User-agent header sent: " + navigator.userAgent);
  14. Mozilla/1.0 (Win3.1) http://www.useragentstring.com/ (cc) flic.kr/p/vUBHv
  15. Mozilla/1.0 (Win3.1) Mozilla/1.22 (compatible; MSIE 2.0; Windows 95) (cc) flic.kr/p/vUBHv http://www.useragentstring.com/
  16. 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/
  17. 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
  18. https://github.com/igrigorik/http-client-hints
  19. FEATURE TESTINGvs. BROWSER SNIFFING 1 2 3
  20. FEATURE TESTINGvs. BROWSER SNIFFING 1 Browser width 2 3
  21. 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
  22. 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/
  23. 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) { ... }
  24. (cc) flic.kr/p/8Lo5Gk
  25. BROWSER WIDTH GIVES US FRAME, NOT THE CANVAS
  26. FEATURE TESTINGvs. BROWSER SNIFFING 1 Browser width 2 Screen resolution 3
  27. 72PPIHAS (cc) flic.kr/p/6tjjRP
  28. 72 points-per-inch = 72 pixels-per-inch
  29. 96PPI IF A
  30. 72 points-per-inch x [1+(1/3)] = 96 PPI
  31. 78μm goo.gl/zpkFy 78μm “RETINA” DISPLAYS300ppi at 12 inches from the eyes
  32. [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
  33. 72 PPI
  34. 240
  35. 240 PPI
  36. 240 PPI
  37. 72 PPI
  38. RETINA DISPLAYS = LARGER IMAGES, LARGER FILE SIZES
  39. FEATURE TESTINGvs. BROWSER SNIFFING 1 Browser width 2 Screen resolution 3 Bandwidth
  40. (cc) flic.kr/p/4DziUN SPEED TESTS HINDER SPEED, USER EXPERIENCE
  41. 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
  42. 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
  43. Speed test image https://github.com/adamdbradley/foresight.js
  44. Speed test image +50k https://github.com/adamdbradley/foresight.js
  45. 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
  46. FEATURE TESTINGvs. BROWSER SNIFFING 1 Browser width 2 Screen resolution 3 Bandwidth
  47. IMGGIMME THAT OLD SCHOOL 1 2 3
  48. 1 srcset & sizes 2 3 IMGGIMME THAT OLD SCHOOL
  49. Basic Image Swap <img src="headshot_500px.jpg" srcset="headshot_650px.jpg 1.5x, headshot_1000px.jpg 2x" width="500" alt="Headshot"> http://caniuse.com/#search=srcset
  50. 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/
  51. 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/
  52. 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/
  53. 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/
  54. 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/
  55. IT’S STILL UP TO BROWSER TO PICK WHICH IMAGE TO USE
  56. BUT WILL USE THESE ATTRIBUTES 1,000% OF THE TIME* * Science
  57. 1 srcset & sizes 2 <picture> 3 GIMME THAT OLD SCHOOL IMG
  58. <picture> <img src="small.jpg" alt=“That awesome Saints’ touchdown.">
  59. <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> 25+38+ 33+ ? ?
  60. <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> 25+38+ 33+ ? ?
  61. <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> 25+38+ 33+ ? ?
  62. <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> 25+38+ 33+ ? ?
  63. USE <PICTURE> POWER TO SOLVE ART DIRECTION
  64. & ONLY WHEN ALL OTHER CSS-y OPTIONS HAVE BEEN EXPLORED
  65. http://responsivedesign.is/resources/images/picture-fill
  66. https://wordpress.org/plugins/ricg-responsive-images/
  67. https://wordpress.org/plugins/ricg-responsive-images/
  68. 1 srcset & sizes 2 <picture> 3 HiSRC and others GIMME THAT OLD SCHOOL IMG
  69. SERIES OF CHECKS TO FIND OUT RESPONSIVE PATH FOR IMAGES...
  70. DO NATIVE SPEED TEST FOR MOBILE DEVICES FIRST... http://davidbcalhoun.com/2010/using-navigator-connection-android
  71. $.hisrc.devicePixelRatio = 1; if(window.devicePixelRatio !== undefined) { $.hisrc.devicePixelRatio = window.devicePixelRatio }; Check pixel density... https://gist.github.com/2428356
  72. +50k https://github.com/adamdbradley/foresight.js Force speed test
  73. LESS THAN 4G MEANS MOBILE IMAGES LEFT IN PLACE
  74. BETWEEN 4G &
 300 Kbps MEANS REGULAR DESKTOP IMAGES SWAPPED IN
  75. FAST SPEED & HIGH DENSITY, RETINA IMAGES SWAPPED IN https://github.com/crdeutsch/hisrc/tree/v2
  76. http://css-tricks.com/which- responsive-images-solution- should-you-use/
  77. 24+http://css-tricks.com/which- responsive-images-solution- should-you-use/
  78. http://css-tricks.com/which- responsive-images-solution- should-you-use/ ALL SOLUTIONS HAVE 2x +
  79. WORKAROUNDSTRICKS in CONTEXT 1 2 3 & (cc) flic.kr/p/64fGf6
  80. WORKAROUNDSTRICKS 1 background-size: 100% 2 3 & (cc) flic.kr/p/64fGf6
  81. http://fittextjs.com/
  82. 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+
  83. WORKAROUNDSTRICKS in CONTEXT 1 background-size: auto 2 SVG 3 & (cc) flic.kr/p/64fGf6
  84. SVG
  85. Native SVG http://caniuse.com/#search=SVG%20in%20HTML%20img%20element
  86. PNG SVG 9+5+9+ 11.6+17+
  87. http://petercollingridge.appspot.com/svg-optimiser
  88. https://github.com/svg/svgo-gui
  89. https://github.com/svg/svgo-gui
  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. https://github.com/filamentgroup/grunticon/
  92. https://wordpress.org/plugins/scalable-vector-graphics-svg/
  93. WORKAROUNDSTRICKS in CONTEXT 1 background-size: auto 2 SVG 3 font-based solutions & (cc) flic.kr/p/64fGf6
  94. ...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.” “
  95. Font-based RWD http://ilovetypography.com/2012/04/11/designing-type-systems/
  96. Font-based RWD http://ilovetypography.com/2012/04/11/designing-type-systems/ avg file size 40kb
  97. http://css-tricks.com/examples/IconFont/
  98. http://fontello.com/
  99. http://icomoon.io
  100. 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>
  101. WORKAROUNDSTRICKS in CONTEXT 1 background-size: 100% 2 SVG 3 font-based solutions & (cc) flic.kr/p/64fGf6 4 compressed JPEGs
  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. 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. 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. (cc) flic.kr/p/64fGf6
  106. 446kb < 8,755.2kb (cc) flic.kr/p/64fGf6 0% vs 100%
  107. 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
  108. 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
  109. <img src="rock-climber.jpg" alt="" /> One Image, One IMG
  110. (cc) flic.kr/p/64fGf6 EXTREMELYCOMPRESSED PROBLEMS
  111. (cc) flic.kr/p/64fGf6 COMBO MOVESCLOWN CAR TECHNIQUE 
 + HIGHLY COMPRESSED JPEGS
  112. <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/
  113. http://codepen.io/teleject/full/qpxmr/
  114. IMGGIMME THAT NEW SCHOOL 1 2 3 #rwdimg
  115. IMGGIMME THAT NEW SCHOOL 1 2 3 simple design for users #rwdimg 1
  116. IMGGIMME THAT NEW SCHOOL 1 2 3 simple design for users browser, server handshake #rwdimg 2
  117. IMGGIMME THAT NEW SCHOOL 1 2 3 simple design for users browser, server handshake same, several formats #rwdimg 3
  118. #rwdimg
  119. #rwdimg
  120. #rwdimg
  121. #rwdimg
  122. #rwdimg <link rel="shortcut icon" href="/assets/favicon.ico" /> Favicon
  123. #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
  124. #rwdimg
  125. THANK YOU!CHRISTOPHER SCHMITT Sass Summit - http://SassSummit.com

×