The Big Picture: Responsive Images in Action #devcon13

3,839 views

Published on

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 <picture> 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.

Published in: Technology, Art & Photos
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,839
On SlideShare
0
From Embeds
0
Number of Embeds
44
Actions
Shares
0
Downloads
20
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

The Big Picture: Responsive Images in Action #devcon13

  1. 1. responsive images in action THE BIG PICTURE . PRESENTED BY MATTHIAS LAU
  2. 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. 3. THEY A LOT! OPTIMIZED
  4. 4. STILL... LARGE IMAGES ! FOR SMALL VIEWPORTS
  5. 5. WHAT WE ! WANT!
  6. 6. OPTIMIZED IMAGES
  7. 7. OPTIMIZED IMAGES
  8. 8. OPTIMIZED IMAGES
  9. 9. ART ! DIRECTION
  10. 10. FAST ! IMAGES
  11. 11. IT SHOULD ALSO WORK WITHOUT ! JAVASCRIPT
  12. 12. CACHING / CDN
  13. 13. SIMPLE ! CODE <img  src="/img/funny-­‐cat.jpg">
  14. 14. RESPONSIVE IMAGE TECHNIQUES http://matthiaslau.github.io/responsive-images/
  15. 15. USE SVG´s
  16. 16. CSS BACKGROUNDS
  17. 17. CSS BACKGROUNDS #iguazu  {        background-­‐image:  url(small.jpg);   }   @media  screen  and  (min-­‐width:  601px)  {        #iguazu  {              background-­‐image:  url(medium.jpg);        }   }
  18. 18. ART DIRECTION FAST CACHING / CDN NOJS SIMPLE CODE
  19. 19. IT IS A CSS IMAGE
  20. 20. ACCESSIBILITY <div  id="iguazu"  role="img"  aria-­‐label="Iguazu"></div>
  21. 21. CLOWN CARS
  22. 22. <img  src="iguazu.svg"  alt="Iguazu  Waterfalls">
  23. 23. <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>
  24. 24. <!-­‐-­‐  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>
  25. 25. ART DIRECTION FAST CACHING / CDN NOJS SIMPLE CODE
  26. 26. RESS / ADAPTIVE IMAGES http://adaptive-images.com/
  27. 27. JS viewport width Cookie
  28. 28. Cookie image request .htaccess Scaling Logic best fitting image
  29. 29. ART DIRECTION FAST CACHING / CDN NOJS SIMPLE CODE
  30. 30. RESIZING SERVICES
  31. 31. RESIZING SERVICES http://src.sencha.io/320/200/http://[...]/huge-­‐hd.jpg http://www.sencha.com/learn/how-to-use-src-sencha-io/
  32. 32. RESIZING SERVICES <script  src='http://src.sencha.io/screen.js'></script>   ! <img          src='http://src.sencha.io/wiw/http://[...]/huge-­‐ hd.jpg'          alt='Iguazu  Waterfalls'          />
  33. 33. ART DIRECTION FAST CACHING / CDN NOJS SIMPLE CODE
  34. 34. PICTURE ELEMENT + SRCSET
  35. 35. <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>
  36. 36. <img  alt="Iguazu"                    src="small.jpg"                    srcset="medium.jpg  1x,  medium-­‐2x.jpg  2x">
  37. 37. <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>
  38. 38. <3
  39. 39. ART DIRECTION FAST CACHING / CDN NOJS SIMPLE CODE
  40. 40. NO BROWSER SUPPORT YET
  41. 41. PICTUREFILL https://github.com/scottjehl/picturefill https://github.com/Wilto/picturefill-proposal
  42. 42. ART DIRECTION FAST CACHING / CDN NOJS SIMPLE CODE
  43. 43. THERE IS EVEN MORE Mobify..js Doubletake Riloadr rwdImages HiSRC Content Aware Resizing Responsive Enhance Retina.js Foresight.js https://docs.google.com/spreadsheet/ccc?key=0Al0lI17fOl9DdDgxTFVoRzFpV3VCdHk2NTBmdVI2OXc#gid=0
  44. 44. NOW WHAT? a summary
  45. 45. WHERE POSSIBLE CSS IMAGES + SVG´s OTHER PICTUREFILL
  46. 46. USE SOMETHING please
  47. 47. THE PROCESS with grunt
  48. 48. original grunt
  49. 49. 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/'   }] https://github.com/andismith/grunt-responsive-images
  50. 50. „Don't click this if on a 3G network, it probably take forever, just check it out when you get home.“
  51. 51. forecast: CONTEXT-BASED IMAGES
  52. 52. QUESTIONS? http://twitter.com/matthiaslau http://laumatthias.de/ https://www.xing.com/profile/Matthias_Lau

×