$30 off During Our Annual Pro Sale. View Details »

The Big Picture: Responsive Images in Action #devcon13

Matthias Lau
November 07, 2013

The Big Picture: Responsive Images in Action #devcon13

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 under discussion 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.

Matthias Lau

November 07, 2013
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.", work: { employer: { name: "Jimdo" }, }, }
  3. None
  4. None
  5. A LOT! OPTIMIZED THEY

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

  7. ! WANT! WE WHAT

  8. IMAGES OPTIMIZED

  9. IMAGES OPTIMIZED

  10. IMAGES OPTIMIZED

  11. ! DIRECTION ART

  12. None
  13. None
  14. ! IMAGES FAST

  15. ! JAVASCRIPT IT SHOULD ALSO WORK WITHOUT

  16. CACHING / CDN

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

  18. TECHNIQUES RESPONSIVE IMAGE http://matthiaslau.github.io/responsive-images/

  19. SVG´s USE

  20. BACKGROUNDS CSS

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

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

  23. IT IS A CSS IMAGE

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

  25. CARS CLOWN

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

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

     <style>              @media  screen  and  (max-­‐width:300px){                    svg{                          background-­‐image:url(http://localhost:8010/ responsive_images/img/small.jpg);                    }              }              @media  screen  and  (min-­‐width:301px){                    […]              }        </style>   </svg>
  28. <!-­‐-­‐  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>
  29. SIMPLE CODE FAST NOJS CACHING / CDN ART DIRECTION

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

  31. JS Cookie viewport width

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

  33. SIMPLE CODE FAST NOJS CACHING / CDN ART DIRECTION

  34. RESIZING SERVICES

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

  36. <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
  37. SIMPLE CODE FAST NOJS CACHING / CDN ART DIRECTION

  38. ELEMENT PICTURE SRCSET +

  39. <picture>          <source  media="(min-­‐width:  601px)"  src="medium.jpg">  

           <source  src="small.jpg">          <!-­‐-­‐  fallback  img  -­‐-­‐>          <img  src="medium.jpg"  alt="Iguazu">          <!-­‐-­‐  alternate  text  -­‐-­‐>          <p>Iguazu</p>   </picture>
  40. <img  alt="Iguazu"                

       src="small.jpg"                    srcset="medium.jpg  1x,  medium-­‐2x.jpg  2x">
  41. <picture>          <source  media="(min-­‐width:  601px)"   srcset="medium.jpg

     1x,  medium-­‐2x.jpg  2x">          <source  src="small.jpg">          <!-­‐-­‐  fallback  img  -­‐-­‐>          <img  src="medium.jpg"  alt="Iguazu">          <!-­‐-­‐  alternate  text  -­‐-­‐>          <p>Iguazu</p>   </picture>
  42. <3

  43. SIMPLE CODE FAST NOJS CACHING / CDN ART DIRECTION

  44. NO BROWSER SUPPORT YET

  45. None
  46. None
  47. PICTUREFILL https://github.com/Wilto/picturefill-proposal https://github.com/scottjehl/picturefill

  48. None
  49. SIMPLE CODE FAST NOJS CACHING / CDN ART DIRECTION

  50. 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
  51. WHAT? a summary NOW

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

  53. SOMETHING USE please

  54. PROCESS THE with grunt

  55. grunt original

  56. 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/'   }]
  57. „Don't click this if on a 3G network, it probably

    take forever, just check it out when you get home.“
  58. CONTEXT-BASED IMAGES forecast:

  59. QUESTIONS? http://twitter.com/matthiaslau http://laumatthias.de/ https://www.xing.com/profile/Matthias_Lau