Upgrade to Pro — share decks privately, control downloads, hide ads and more …

The Big Picture: Responsive Images in Action #scd14

The Big Picture: Responsive Images in Action #scd14

Although responsive designs are already state-of-the-art in web development the whole trend still is in its infancy. When it comes to images, a lot of responsive websites just load the same big image on every viewport. Because of this, people judge responsive design as being detrimental to performance. New markup elements like are in development right now but what are the alternatives, what is the best to use right now, and how do they work? I will lead you through the different techniques and polyfills and show you their pros and cons. After this talk you should be able to choose the best fitting responsive image solution for your project.

Ee7858da539f69023efc718a93679eb4?s=128

Matthias Lau

May 17, 2014
Tweet

More Decks by Matthias Lau

Other Decks in Programming

Transcript

  1. THE BIG PICTURE . responsive images in action PRESENTED BY

    MATTHIAS LAU
  2. { name: "Matthias Lau", link: "http://laumatthias.de", twitter: "@matthiaslau", hometown: {

    name: "Hamburg, Germany" }, bio: "E-Commerce Freak and Web-Allrounder, love coding, awesome internet concepts, Chrome, Web Frameworks, Evernote, the Apple Multi-Touch Trackpad, Bouldering, Wikipedia and Espresso.", }
  3. None
  4. None
  5. A LOT! OPTIMIZED THEY

  6. ! FOR SMALL VIEWPORTS LARGE IMAGES STILL...

  7. RESPONSIVE DESIGN RESPONSIBLE

  8. ! WANT! WE WHAT

  9. IMAGES OPTIMIZED

  10. IMAGES OPTIMIZED

  11. IMAGES OPTIMIZED

  12. ! DIRECTION ART

  13. None
  14. None
  15. ! IMAGES FAST

  16. ! JAVASCRIPT IT SHOULD ALSO WORK WITHOUT

  17. CACHING / CDN

  18. <img  src="/img/funny-­‐cat.jpg"> ! CODE SIMPLE

  19. <object  data="data:image/svg+xml,%3Csvg %20viewBox='0%200%20300%20329'%20preserveAspectRatio='xMidYMid %20meet'%20xmlns='http://www.w3.org/2000/svg'%3E%3Ctitle%3EIguazu%20Waterfalls%3C/ title%3E%3Cstyle%3Esvg%7Bbackground-­‐size:100%25%20auto;background-­‐repeat:no-­‐repeat; %7D@media%20screen%20and%20(max-­‐width:300px)%7Bsvg%7Bbackground-­‐image:url(http:// localhost:8010/responsive_images/img/small.jpg);%7D%7D@media%20screen%20and%20(min-­‐ width:301px)%7Bsvg%7Bbackground-­‐image:url(http://localhost:8010/responsive_images/ img/medium.jpg);%7D%7D@media%20screen%20and%20(min-­‐width:601px)%7Bsvg%7Bbackground-­‐ image:url(http://localhost:8010/responsive_images/img/big.jpg);%7D%7D@media%20screen

    %20and%20(min-­‐width:901px)%7Bsvg%7Bbackground-­‐image:url(http://localhost:8010/ responsive_images/img/huge.jpg);%7D%7D%3C/style%3E%3C/svg%3E"  type="image/svg+xml">          <!-­‐-­‐  IE8  fallback  -­‐-­‐>          <!-­‐-­‐[if  lte  IE  8]>          <img  src="../img/medium.jpg"  alt="Iguazu  Waterfalls">          <![endif]-­‐-­‐>   </object> ! ANYMORE SIMPLE NOT
  20. TECHNIQUES RESPONSIVE IMAGE http://matthiaslau.github.io/responsive-images/

  21. SVG´s USE

  22. BACKGROUNDS CSS

  23. BACKGROUNDS CSS #iguazu  {        background-­‐image:  url(small.jpg);  

    }   @media  screen  and  (min-­‐width:  40em)  {        #iguazu  {              background-­‐image:  url(medium.jpg);        }   }
  24. SIMPLE CODE FAST NOJS CACHING / CDN ART DIRECTION

  25. IT IS A CSS IMAGE

  26. <div  id="iguazu"  role="img"  aria-­‐label="Iguazu"></div> ACCESSIBILITY

  27. CARS CLOWN

  28. <img  src="iguazu.svg"  alt="Iguazu  Waterfalls">

  29. <svg  xmlns='http://www.w3.org/2000/svg'>        <title>Iguazu  Waterfalls</title>      

     <style>              @media  screen  and  (min-­‐width:21em){                    svg{                          background-­‐image:url(http:// matthiaslau.github.io/responsive-­‐images/img/medium.jpg);                    }              }              @media  screen  and  (min-­‐width:40em){                    […]              }        </style>   </svg>
  30. <!-­‐-­‐  use  the  object  tag  for  maximal  browser  support  without

      security  drawbacks  -­‐-­‐>   <!-­‐-­‐  put  the  SVG  data  inline  to  prevent  a  second  HTTP   request  -­‐-­‐>   <object  data="data:image/svg+xml,%3Csvg%20viewBox=[…]"   type="image/svg+xml">          <!-­‐-­‐  IE8  fallback  -­‐-­‐>          <!-­‐-­‐[if  lte  IE  8]>          <img  src="medium.jpg"  alt="Iguazu  Waterfalls">          <![endif]-­‐-­‐>   </object>
  31. SIMPLE CODE FAST NOJS CACHING / CDN ART DIRECTION

  32. ADAPTIVE IMAGES RESS / http://adaptive-images.com/

  33. JS Cookie viewport width

  34. .htaccess image request Scaling Logic best fitting image Cookie

  35. SIMPLE CODE FAST NOJS CACHING / CDN ART DIRECTION

  36. RESIZING SERVICES

  37. http://src.sencha.io/320/200/http://[...]/huge-­‐hd.jpg RESIZING SERVICES http://www.sencha.com/learn/how-to-use-src-sencha-io/

  38. <script  src='http://src.sencha.io/screen.js'></script>   ! <img          src='http://src.sencha.io/wiw/http://[...]/huge-­‐

    hd.jpg'          alt='Iguazu  Waterfalls'          /> RESIZING SERVICES
  39. SIMPLE CODE FAST NOJS CACHING / CDN ART DIRECTION

  40. ELEMENT PICTURE SRCSET +

  41. <img  alt="Iguazu"                

       src="medium.jpg"                    srcset="medium.jpg  1x,  medium-­‐2x.jpg  2x">
  42. <picture>          <source  media="(min-­‐width:  40em)"  src="medium.jpg">  

           <!-­‐-­‐  fallback  img  -­‐-­‐>          <img  src="medium.jpg"  alt="Iguazu">   </picture>
  43. <picture>        <source  media="(min-­‐width:  50em)"   srcset="large.jpg  1x,

     large-­‐2x.jpg  2x">          <source  media="(min-­‐width:  40em)"   srcset="medium.jpg  1x,  medium-­‐2x.jpg  2x">          <source  srcset="small.jpg,  small-­‐2x.jpg  2x">          <img  src="small.jpg"  alt="Iguazu">   </picture>
  44. THE FANCY STUFF LET´S DO ALL

  45. VIEWPORT SIZE IS NOT BLOCK SIZE excursion:

  46. None
  47. <picture>      <source          sizes="(max-­‐width:  30em)

     100vw,  (max-­‐width:   50em)  50vw,  calc(33vw  -­‐  100px)"          srcset="xsmall.jpg  100w,  small.jpg  200w,   medium.jpg  400w,  large.jpg  800w,  huge.jpg  1600w,   monster.jpg  3200w">      <img  src="medium.jpg"  alt="Iguazu">   </picture>
  48. <3

  49. SIMPLE CODE FAST NOJS CACHING / CDN ART DIRECTION

  50. NO BROWSER SUPPORT YET

  51. None
  52. None
  53. PICTUREFILL https://github.com/scottjehl/picturefill

  54. SIMPLE CODE FAST NOJS CACHING / CDN ART DIRECTION

  55. MORE THERE IS EVEN HiSRC Foresight.js Riloadr rwdImages Retina.js Responsive

    Enhance Doubletake Content Aware Resizing https://docs.google.com/spreadsheet/ccc?key=0Al0lI17fOl9DdDgxTFVoRzFpV3VCdHk2NTBmdVI2OXc#gid=0 Mobify..js
  56. WHAT? a summary NOW

  57. „Don't click this if on a 3G network, it probably

    take forever, just check it out when you get home.“
  58. SOMETHING USE please

  59. WHERE POSSIBLE CSS IMAGES OTHER PICTUREFILL + SVG´s

  60. None
  61. None
  62. None
  63. None
  64. CONTEXT-BASED IMAGES forecast:

  65. IMAGES E-COMMERCE

  66. None
  67. None
  68. None
  69. None
  70. None
  71. QUESTIONS? http://twitter.com/matthiaslau http://laumatthias.de/ https://www.xing.com/profile/Matthias_Lau

  72. PROCESS THE with grunt

  73. grunt original

  74. https://github.com/andismith/grunt-responsive-images options:  {        sizes:  [    

             {                    name:  "s",                    width:  320,                    quality:  0.6              },              {                    name:  "s",                    suffix:  "x2",                    width:  640,                    quality:  0.6              },          […]                                                    ]   }, files:  [{        expand:  true,        cwd:  'img/',        src:  ['*.{jpg,gif,png}'],        dest:  'img/generated/'   }]