Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥

Improving performance with responsive (and res...

Improving performance with responsive (and responsible!) images [CSSConf]

newtron

June 18, 2015
Tweet

More Decks by newtron

Other Decks in Programming

Transcript

  1. David Newton, St. Michael’s Hospital 1 Improving performance with responsive

    (and responsible!) images CSSConf, 2015-06-18 Twitter: @newtron Github: @nwtn Email: [email protected] Slides: http://nwtn.ca/b
  2. “ 3 Many of us are fortunate to live in

    high bandwidth regions, but there are still large portions of the world that do not. By keeping your client side code small and lightweight, you can literally open your product up to new markets. —Chris Zacharias, Page Weight Matters (emphasis mine)
  3. 7 Fonts 98 KB Stylesheets 63 KB Video 208 KB

    HTML 55 KB Scripts 334 KB Other 4 KB Images 1,312 KB Total: 2,061 KB
  4. 8

  5. “ 9 More human beings today have access to a

    cellphone than…a clean toilet. –Anand Giridharadas, New York Times April 10 2010
  6. 10

  7. 15

  8. 16

  9. 17

  10. 19

  11. 20

  12. 23

  13. 24 more pixels = more energy more pixels = more

    memory more pixels = more time
  14. 26 A harder problem: We want images to look good

    e’rywhere, without hurting the user experience
  15. 30

  16. 31

  17. 32

  18. 34

  19. 44 <img src="wolf600.jpg" alt="A rad wolf" srcset="wolf300.jpg 0.5x, wolf600.jpg 1x,

    wolf1200.jpg 2x, wolf2400.jpg 3x, wolf4800.jpg 4x" />
  20. 45 <img src="wolf600.jpg" alt="A rad wolf" srcset="wolf300.jpg 0.5x, wolf600.jpg 1x,

    wolf1200.jpg 2x, wolf2400.jpg 3x, wolf4800.jpg 4x" />
  21. 48 <img src="wolf4800.jpg" alt="A rad wolf" sizes="100vw" srcset="wolf300.jpg 300w, wolf600.jpg

    600w, wolf1200.jpg 1200w, wolf2400.jpg 2400w, wolf4800.jpg 4800w" />
  22. 49 <img src="wolf4800.jpg" alt="A rad wolf" sizes="100vw" srcset="wolf300.jpg 300w, wolf600.jpg

    600w, wolf1200.jpg 1200w, wolf2400.jpg 2400w, wolf4800.jpg 4800w" />
  23. 50 <img src="wolf4800.jpg" alt="A rad wolf" sizes="100vw" srcset="wolf300.jpg 300w, wolf600.jpg

    600w, wolf1200.jpg 1200w, wolf2400.jpg 2400w, wolf4800.jpg 4800w" />
  24. 51 <img src="wolf4800.jpg" alt="A rad wolf" sizes="100vw" srcset="wolf300.jpg 300w, wolf600.jpg

    600w, wolf1200.jpg 1200w, wolf2400.jpg 2400w, wolf4800.jpg 4800w" />
  25. 52 <img src="wolf4800.jpg" alt="A rad wolf" sizes="100vw" srcset="wolf300.jpg 300w, wolf600.jpg

    600w, wolf1200.jpg 1200w, wolf2400.jpg 2400w, wolf4800.jpg 4800w" />
  26. 53 <img src="wolf4800.jpg" alt="A rad wolf" sizes="100vw" srcset="wolf300.jpg 300w, wolf600.jpg

    600w, wolf1200.jpg 1200w, wolf2400.jpg 2400w, wolf4800.jpg 4800w" />
  27. 54 <img src="wolf4800.jpg" alt="A rad wolf" sizes="600px" srcset="wolf300.jpg 300w, wolf600.jpg

    600w, wolf1200.jpg 1200w, wolf2400.jpg 2400w, wolf4800.jpg 4800w" />
  28. 55 <img src="wolf4800.jpg" alt="A rad wolf" sizes="calc(100vw - 10em)" srcset="wolf300.jpg

    300w, wolf600.jpg 600w, wolf1200.jpg 1200w, wolf2400.jpg 2400w, wolf4800.jpg 4800w" />
  29. 56 <img src="wolf4800.jpg" alt="A rad wolf" sizes="100%" srcset="wolf300.jpg 300w, wolf600.jpg

    600w, wolf1200.jpg 1200w, wolf2400.jpg 2400w, wolf4800.jpg 4800w" />
  30. 57

  31. 58 <img src="wolf4800.jpg" alt="A rad wolf" sizes="(min-width: 1000px) 33vw, (min-width:

    600px) 50vw, 100vw" srcset="wolf300.jpg 300w, wolf600.jpg 600w, wolf1200.jpg 1200w, wolf2400.jpg 2400w, wolf4800.jpg 4800w" />
  32. 59 <img src="wolf4800.jpg" alt="A rad wolf" sizes="(min-width: 1000px) 33vw, (min-width:

    600px) 50vw, 100vw" srcset="wolf300.jpg 300w, wolf600.jpg 600w, wolf1200.jpg 1200w, wolf2400.jpg 2400w, wolf4800.jpg 4800w" />
  33. 70

  34. 71

  35. 73 <picture> <source media="(min-width: 1000px)" srcset="wolf-crop-bg.jpg" /> <source media="(min-width: 600px)"

    srcset="wolf-crop-sm.jpg" /> <img src="wolf.jpg" alt="A rad wolf" /> </picture>
  36. 74 <picture> <source media="(min-width: 1000px)" srcset="wolf-crop-bg.jpg" /> <source media="(min-width: 600px)"

    srcset="wolf-crop-sm.jpg" /> <img src="wolf.jpg" alt="A rad wolf" /> </picture>
  37. 75 <picture> <source media="(min-width: 1000px)" srcset="wolf-crop-bg.jpg" /> <source media="(min-width: 600px)"

    srcset="wolf-crop-sm.jpg" /> <img src="wolf.jpg" alt="A rad wolf" /> </picture>
  38. 76 <picture> <source media="(min-width: 1000px)" srcset="wolf-crop-bg.jpg" /> <source media="(min-width: 600px)"

    srcset="wolf-crop-sm.jpg" /> <img src="wolf.jpg" alt="A rad wolf" /> </picture>
  39. 77 <picture> <source media="(min-width: 1000px)" srcset="wolf-crop-bg.jpg" /> <source media="(min-width: 600px)"

    srcset="wolf-crop-sm.jpg" /> <img src="wolf.jpg" alt="A rad wolf" /> </picture>
  40. 79 <picture> <source type="image/webp" media="(min-width: 1000px)" sizes="33vw" srcset="wolf-crop-big-300.jpg 300w, wolf-crop-big-600.jpg

    600w, wolf-crop-big-1200.jpg 1200w, wolf-crop-big-2400.jpg 2400w, wolf-crop-big-4800.jpg 4800w" /> <source type="image/webp" media="(min-width: 600px)" sizes="50vw" srcset="wolf-crop-small-300.jpg 300w, wolf-crop-small-600.jpg 600w, wolf-crop-small-1200.jpg 1200w, wolf-crop-small-2400.jpg 2400w, wolf-crop-small-4800.jpg 4800w" /> <source type="image/webp" sizes="100vw" srcset="wolf-crop-med-300.jpg 300w, wolf-crop-med-600.jpg 600w, wolf-crop-med-1200.jpg 1200w, wolf-crop-med-2400.jpg 2400w, wolf-crop-med-4800.jpg 4800w" /> <source media="(min-width: 1000px)" sizes="33vw" srcset="wolf-crop-big-300.jpg 300w, wolf-crop-big-600.jpg 600w, wolf-crop-big-1200.jpg 1200w, wolf-crop-big-2400.jpg 2400w, wolf-crop-big-4800.jpg 4800w" /> <source media="(min-width: 600px)" sizes="50vw" srcset="wolf-crop-small-300.jpg 300w, wolf-crop-small-600.jpg 600w, wolf-crop-small-1200.jpg 1200w, wolf-crop-small-2400.jpg 2400w, wolf-crop-small-4800.jpg 4800w" /> <source sizes="100vw" srcset="wolf-crop-med-300.jpg 300w, wolf-crop-med-600.jpg 600w, wolf-crop-med-1200.jpg 1200w, wolf-crop-med-2400.jpg 2400w, wolf-crop-med-4800.jpg 4800w" /> <img src="wolf-crop-med-600.jpg" alt="A rad wolf" /> </picture>
  41. 80 <img src="wolf600.jpg" alt="A rad wolf" sizes="(min-width: 1000px) 33vw, (min-width:

    600px) 50vw, 100vw" srcset="wolf300.jpg 300w, wolf600.jpg 600w, wolf1200.jpg 1200w, wolf2400.jpg 2400w, wolf4800.jpg 4800w" />
  42. 84 Firefox (Gecko) Chrome/Opera (Blink) Safari (WebKit) Internet Explorer/ Edge

    srcset + sizes Works now! Firefox 38 Works now! Chrome 34 Opera 21 Works now! * Safari 6.2 Safari 7.1 iOS 8 In development picture Works now! Firefox 38 Works now! Chrome 38 Opera 25 In development Under consideration
  43. 87

  44. 98

  45. 99

  46. 101 1. Responsive images 2. Image optimization 3. Deferred image

    loading (a.k.a. “lazy loading”) 4. CDNs & Caching
  47. 102 1. Responsive images 2. Image optimization 3. Deferred image

    loading (a.k.a. “lazy loading”) 4. CDNs & Caching 5. Appropriate contrast and colour
  48. 105

  49. 108 1. Responsive images 2. Image optimization 3. Deferred image

    loading (a.k.a. “lazy loading”) 4. CDNs & Caching 5. Appropriate contrast and colour 6. Text-based alternatives
  50. 110 http://www.w3.org/TR/html-alt-techniques/ HTML5: Techniques for providing useful text alternatives http://www.w3.org/WAI/GL/wiki/Using_aria-describedby_to_provide_descriptions_of_images

    Using aria-describedby to provide descriptions of images http://w3c.github.io/test-results/html-longdesc/cr-report.html longdesc Implementation Report http://www.paciellogroup.com/blog/2013/12/using-aria-enhance-svg-accessibility/ Using ARIA to enhance SVG accessibility http://www.w3.org/WAI/GL/wiki/Using_aria-labelledby_to_provide_a_text_alternative_for_non- text_content Using aria-labelledby to provide a text alternative for non-text content
  51. 111 1. Responsive images 2. Image optimization 3. Deferred image

    loading (a.k.a. “lazy loading”) 4. CDNs & Caching 5. Appropriate contrast and colour 6. Text-based alternatives 7. Fewer images!
  52. David Newton, St. Michael’s Hospital 113 Improving performance with responsive

    (and responsible!) images CSSConf, 2015-06-18 Twitter: @newtron Github: @nwtn Email: [email protected] Slides: http://nwtn.ca/b