The Big Picture: Responsive Images in Action #scd14

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

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

  • Be the first to like this

No Downloads
Views
Total views
704
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

The Big Picture: Responsive Images in Action #scd14

  1. 1. THE BIG PICTURE . responsive images in action 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.", }
  3. 3. A LOT! OPTIMIZED THEY
  4. 4. ! FOR SMALL VIEWPORTS LARGE IMAGES STILL...
  5. 5. RESPONSIVE DESIGN RESPONSIBLE
  6. 6. ! WANT! WE WHAT
  7. 7. IMAGES OPTIMIZED
  8. 8. IMAGES OPTIMIZED
  9. 9. IMAGES OPTIMIZED
  10. 10. ! DIRECTION ART
  11. 11. ! IMAGES FAST
  12. 12. ! JAVASCRIPT IT SHOULD ALSO WORK WITHOUT
  13. 13. CACHING / CDN
  14. 14. <img  src="/img/funny-­‐cat.jpg"> ! CODE SIMPLE
  15. 15. <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
  16. 16. TECHNIQUES RESPONSIVE IMAGE http://matthiaslau.github.io/responsive-images/
  17. 17. SVG´s USE
  18. 18. BACKGROUNDS CSS
  19. 19. BACKGROUNDSCSS #iguazu  {        background-­‐image:  url(small.jpg);   }   @media  screen  and  (min-­‐width:  40em)  {        #iguazu  {              background-­‐image:  url(medium.jpg);        }   }
  20. 20. SIMPLE CODE FAST NOJS CACHING / CDN ART DIRECTION
  21. 21. IT IS A CSS IMAGE
  22. 22. <div  id="iguazu"  role="img"  aria-­‐label="Iguazu"></div> ACCESSIBILITY
  23. 23. CARS CLOWN
  24. 24. <img  src="iguazu.svg"  alt="Iguazu  Waterfalls">
  25. 25. <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>
  26. 26. <!-­‐-­‐  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>
  27. 27. SIMPLE CODE FAST NOJS CACHING / CDN ART DIRECTION
  28. 28. ADAPTIVE IMAGES RESS / http://adaptive-images.com/
  29. 29. JS Cookie viewport width
  30. 30. .htaccess image request Scaling Logic best fitting image Cookie
  31. 31. SIMPLE CODE FAST NOJS CACHING / CDN ART DIRECTION
  32. 32. RESIZING SERVICES
  33. 33. http://src.sencha.io/320/200/http://[...]/huge-­‐hd.jpg RESIZING SERVICES http://www.sencha.com/learn/how-to-use-src-sencha-io/
  34. 34. <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
  35. 35. SIMPLE CODE FAST NOJS CACHING / CDN ART DIRECTION
  36. 36. ELEMENT PICTURE SRCSET +
  37. 37. <img  alt="Iguazu"                    src="medium.jpg"                    srcset="medium.jpg  1x,  medium-­‐2x.jpg  2x">
  38. 38. <picture>          <source  media="(min-­‐width:  40em)"  src="medium.jpg">          <!-­‐-­‐  fallback  img  -­‐-­‐>          <img  src="medium.jpg"  alt="Iguazu">   </picture>
  39. 39. <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>
  40. 40. THE FANCY STUFF LET´S DO ALL
  41. 41. VIEWPORT SIZE IS NOT BLOCK SIZE excursion:
  42. 42. <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>
  43. 43. <3
  44. 44. SIMPLE CODE FAST NOJS CACHING / CDN ART DIRECTION
  45. 45. NO BROWSER SUPPORT YET
  46. 46. PICTUREFILL https://github.com/scottjehl/picturefill
  47. 47. SIMPLE CODE FAST NOJS CACHING / CDN ART DIRECTION
  48. 48. 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
  49. 49. WHAT? a summary NOW
  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. SOMETHING USE please
  52. 52. WHERE POSSIBLE CSS IMAGES OTHER PICTUREFILL + SVG´s
  53. 53. CONTEXT-BASED IMAGES forecast:
  54. 54. IMAGES E-COMMERCE
  55. 55. QUESTIONS? http://twitter.com/matthiaslau http://laumatthias.de/ https://www.xing.com/profile/Matthias_Lau
  56. 56. PROCESS THE with grunt
  57. 57. grunt original
  58. 58. 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/'   }]

×