[HEWEBFL] Adaptive Images in Responsive Web Design

18,939 views

Published on

Published in: Technology
  • Be the first to comment

[HEWEBFL] Adaptive Images in Responsive Web Design

  1. #HEWEBFL2013ADAPTIVE IMAGESIN RESPONSIVE WEB DESIGNCHRISTOPHER SCHMITT @teleject
  2. CHRISTOPHER SCHMITT@teleject
  3. @telejecthttp://CSSsummit.com/
  4. @telejecthttp://cssdevconf.com/
  5. @telejecthttp://dwmgbook.com/
  6. WHY DON’T WE ASKTHE BROWSER?(cc) flic.kr/p/vUBHv
  7. alert("User-agent header sent: " + navigator.userAgent);
  8. Mozilla/1.0 (Win3.1)http://www.useragentstring.com/(cc) flic.kr/p/vUBHv
  9. Mozilla/1.0 (Win3.1)Mozilla/1.22 (compatible;MSIE 2.0; Windows 95)(cc) flic.kr/p/vUBHvhttp://www.useragentstring.com/
  10. Mozilla/5.0 (Macintosh; Intel MacOS X 10_7_3) AppleWebKit/534.55.3 (KHTML, like Gecko)Version/5.1.5 Safari/534.55.3(cc) flic.kr/p/vUBHvhttp://www.useragentstring.com/
  11. Mozilla/5.0 (Macintosh; Intel MacOS X 10_7_3) AppleWebKit/534.55.3 (KHTML, like Gecko)Version/5.1.5 Safari/534.55.3http://webaim.org/blog/user-agent-string-history/(cc) flic.kr/p/vUBHv
  12. FEATURE TESTINGvs. BROWSER SNIFFING123
  13. FEATURE TESTINGvs. BROWSER SNIFFING1 Browser width23
  14. A scripting approachvar myWidth = 0, myHeight = 0;if( typeof( window.innerWidth ) == number ) {//Non-IEmyWidth = window.innerWidth;myHeight = window.innerHeight;} else if( document.documentElement &&( document.documentElement.clientWidth ||document.documentElement.clientHeight ) ) {//IE 6+ in standards compliant modemyWidth = document.documentElement.clientWidth;myHeight = document.documentElement.clientHeight;}http://www.howtocreate.co.uk/tutorials/javascript/browserwindow
  15. 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/
  16. 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) { ... }
  17. (cc) flic.kr/p/8Lo5Gk
  18. BROWSER WIDTHGIVES US FRAME,NOT THE CANVAS
  19. FEATURE TESTINGvs. BROWSER SNIFFING1 Browser width2 Screen resolution3
  20. 72PPIHAS SERVED US WELL(cc) flic.kr/p/6tjjRP
  21. 72 points-per-inch =72 pixels-per-inch
  22. 96PPIIF A WINDOWS USER
  23. 72 points-per-inchx [1+(1/3)]= 96 PPI
  24. 78μmgoo.gl/zpkFy78μm“RETINA” DISPLAYS300ppi at 12 inches from the eyes
  25. [In 2013, Intel sees theirproduct line] offer a higherresolution experience than atop-of-the-line 1080p HDTV.”“http://liliputing.com/2012/04/intel-retina-laptop-desktop-displays-coming-in-2013.html
  26. 72 PPI
  27. 240
  28. 240 PPI
  29. 240 PPI
  30. 72 PPI
  31. RETINA DISPLAYS =LARGER IMAGES,LARGER FILE SIZES
  32. FEATURE TESTINGvs. BROWSER SNIFFING1 Browser width2 Screen resolution3 Bandwidth
  33. (cc) flic.kr/p/4DziUNSPEED TESTSHINDER SPEED,USER EXPERIENCE
  34. Testing for speed of aninternet connection is likestepping in front of a car to seehow fast it is.”“(cc) flic.kr/p/4DziUN
  35. Testing for speed of aninternet connection is likestepping in front of a car to seehow fast it is.”“But, Christopher, you onlyhave to test it once.”“(cc) flic.kr/p/4DziUN
  36. Speed test imagehttps://github.com/adamdbradley/foresight.js
  37. Speed test image+50khttps://github.com/adamdbradley/foresight.js
  38. Native speed test// @Modernizrs network-connection.jsconnection = navigator.connection || {type: 0 }, // polyfillisSlowConnection = connection.type == 3|| connection.type == 4| /^[23]g$/.test(connection.type);http://davidbcalhoun.com/2010/using-navigator-connection-android
  39. IMGGIMME THAT OLD SCHOOL123
  40. 1 .htaccess23IMGGIMME THAT OLD SCHOOL
  41. 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 ImagesRewriteEngine On# direct image requests to tempRewriteCond %{QUERY_STRING} full=(.*)&?RewriteRule (.*)rwd-router/.*.(jpe?g|png|gif|webp) $1%1 [L]# ignore trap for non-image requests, rewrite URL without trap segmentRewriteRule (.*)rwd-router/(.*)$ $1$2# //End Responsive Imageshttps://github.com/filamentgroup/Responsive-Images
  42. Filament .htaccess<script src="responsiveimgs.js"></script><img src="sample-content/running-sml.jpg?full=sample-content/running-lrg.jpg" />8+4+
  43. ...the server has no way toknow what resolution theclient’s device is, so it can’tsend the appropriately sizedembeded images.”“http://mattwilcox.net/archive/entry/id/1053/
  44. http://adaptive-images.com/
  45. ADD .HTACCESS, JS,PHP 5, GD lib*, &THEN <IMG>
  46. 1 .htaccess2 <picture> and/or srcset3GIMME THAT OLD SCHOOLIMG
  47. 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/
  48. <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 initialsource element. --><noscript><img src="small.jpg" alt="A giant stone face at The Bayontemple in Angkor Thom, Cambodia"></noscript></picture>http://www.w3.org/community/respimg/2012/03/15/polyfilling-picture-without-the-overhead/
  49. ADD IF-ELSE HTML, JS,BORROW <VIDEO>, &THEN <IMG>
  50. @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
  51. 1 .htaccess2 <picture>3 HiSRCGIMME THAT OLD SCHOOLIMG
  52. 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>
  53. 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>
  54. 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>
  55. SERIES OF CHECKS TOFIND OUT RESPONSIVEPATH FOR IMAGES...
  56. DO NATIVE SPEEDTEST FOR MOBILEDEVICES FIRST...http://davidbcalhoun.com/2010/using-navigator-connection-android
  57. $.hisrc.devicePixelRatio = 1;if(window.devicePixelRatio !==undefined) {$.hisrc.devicePixelRatio =window.devicePixelRatio};Check pixel density...https://gist.github.com/2428356
  58. +50khttps://github.com/adamdbradley/foresight.jsForce speed test
  59. LESS THAN 4G MEANSMOBILE IMAGES LEFTIN PLACE
  60. BETWEEN 4G &300 Kbps MEANSREGULAR DESKTOPIMAGES SWAPPED IN
  61. FAST SPEED & HIGHDENSITY, RETINAIMAGES SWAPPED INhttps://github.com/crdeutsch/hisrc/tree/v2
  62. 2 TRICK PONY
  63. CSS IS CORE.WE USE CSS MEDIAQUERIES FOR DESIGN
  64. http://mediaqueri.es/
  65. 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) { ... }
  66. Single pixel GIF
  67. Single pixel GIF
  68. Single pixel GIF
  69. Single pixel GIF
  70. $.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
  71. $.hisrc.defaults = {useTransparentGif: true,transparentGifSrc: data:image/gif;base64,R0lGODlhAQABAIAAAMz/AAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==,8+5+9+ 11.6+17+Single pixel GIF
  72. $.hisrc.defaults = {useTransparentGif: true,transparentGifSrc: http://example.com/spg.gif,6+5+9+ 11.6+17+Single pixel GIF
  73. 2 APPROACHES,1 SIMPLE SOLUTION.https://github.com/teleject/hisrc
  74. 2 APPROACHES,1 SIMPLE SOLUTION.HEART WEB DESIGNhttps://github.com/teleject/hisrc
  75. WORKAROUNDSTRICKS123&(cc) flic.kr/p/64fGf6
  76. WORKAROUNDSTRICKS1 background-size: auto23&(cc) flic.kr/p/64fGf6
  77. http://fittextjs.com/
  78. 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+
  79. WORKAROUNDSTRICKS1 background-size: auto2 SVG3&(cc) flic.kr/p/64fGf6
  80. SVG
  81. Native SVGhttp://caniuse.com/#search=SVG%20in%20HTML%20img%20element
  82. PNG 16kbSVG 7kb9+5+9+ 11.6+17+
  83. 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>
  84. jQuery checkvar checkBrowser =$(html).hasClass(lt-ie9);<div class="svgswap"><img src="example.svg"data-svgswap="example.png"></div>https://github.com/teleject/svg-swap
  85. Modernizr checkif(!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
  86. WORKAROUNDSTRICKS1 background-size: auto2 SVG3 font-based solutions&(cc) flic.kr/p/64fGf6
  87. ...if you use <metacharset="utf-8"> (you shouldbe for HTML5), you’re addingcommon Unicode characterslike and ✆, and you don’tneed a specific font’s version...just copy and paste them intoyour HTML.”“
  88. Font-based RWDhttp://ilovetypography.com/2012/04/11/designing-type-systems/
  89. http://css-tricks.com/examples/IconFont/
  90. http://fontello.com/
  91. 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>
  92. WORKAROUNDSTRICKS1 background-size: auto2 SVG3 font-based solutions&(cc) flic.kr/p/64fGf64 compressed JPEGs
  93. iCloud iOS 5 OSX Lion iPad 2 iPhoneOSThe world’s most advanced desktopoperating system advances even further.With over 250 new features includingMulti-Touch gestures, Mission Control,full-screen apps, and Launchpad, OS XLion takes the Mac further than ever.Learn MoreX Lion
  94. iCloud iOS 5 OSX Lion iPad 2 iPhoneOSThe world’s most advanced desktopoperating system advances even further.With over 250 new features includingMulti-Touch gestures, Mission Control,full-screen apps, and Launchpad, OS XLion takes the Mac further than ever.Learn MoreX Lion!" ←↑
  95. iCloud iOS 5 OSX Lion iPad 2 iPhoneOSThe world’s most advanced desktopoperating system advances even further.With over 250 new features includingMulti-Touch gestures, Mission Control,full-screen apps, and Launchpad, OS XLion takes the Mac further than ever.Learn MoreX Lion! ↙" ← ←↗ ↑ ↖↑ ↖
  96. iCloud iOS 5 OSX Lion iPad 2 iPhoneOSThe world’s most advanced desktopoperating system advances even further.With over 250 new features includingMulti-Touch gestures, Mission Control,full-screen apps, and Launchpad, OS XLion takes the Mac further than ever.Learn MoreX Lion↑ ↗← " "↙ ! ↘! ↘
  97. (cc) flic.kr/p/64fGf6
  98. 446kb < 8,755.2kb(cc) flic.kr/p/64fGf60% vs 100%
  99. Size Type Dimensions Display Px Density File SizeExtreme 2276x1400 1x & 2x 446kbExtraLarge1024x1536 2x 1,745kbExtraLarge512x768 1x 503kbLarge640x960 2x 746kbLarge320x480 1x 223kbMedium500x750 2x 485kbMedium250x375 1x 145kb
  100. Size Type Dimensions Display Px Density File SizeExtreme 2276x1400 1x & 2x 446kbExtraLarge1024x1536 2x 1,745kbExtraLarge512x768 1x 503kbLarge640x960 2x 746kbLarge320x480 1x 223kbMedium500x750 2x 485kbMedium250x375 1x 145kb
  101. <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 initialsource element. --><noscript><img src="small.jpg" alt="A giant stone face at The Bayontemple in Angkor Thom, Cambodia"></noscript></picture>http://www.w3.org/community/respimg/2012/03/15/polyfilling-picture-without-the-overhead/
  102. <img src="rock-climber.jpg" alt="" />One Image, One IMG
  103. (cc) flic.kr/p/64fGf6EXTREMELYCOMPRESSED PROBLEMS
  104. IMGGIMME THAT NEW SCHOOL123
  105. IMGGIMME THAT NEW SCHOOL123simple design for users#rwdimg1
  106. IMGGIMME THAT NEW SCHOOL123simple design for usersbrowser, server handshake#rwdimg2
  107. IMGGIMME THAT NEW SCHOOL123simple design for usersbrowser, server handshakesame, several formats#rwdimg3
  108. #rwdimg
  109. #rwdimg
  110. #rwdimg
  111. #rwdimg
  112. #rwdimg
  113. #rwdimg
  114. #rwdimg
  115. #rwdimg<link rel="shortcut icon" href="/assets/favicon.ico" />
  116. #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" /><link rel="shortcut icon" href="/assets/favicon.ico" />
  117. #rwdimg
  118. THANK YOU!CHRISTOPHER SCHMITT @telejectThe Non Breaking Space Podcast - http://nonbreakingspace.tv/

×