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

Improving Performance with Responsive Images [N...

newtron
September 10, 2014

Improving Performance with Responsive Images [NAGW]

National Association of Government Web Professionals (NAGW) 2014,
September 10, 2014
https://github.com/nwtn/pres-respimg-perf-nagw

newtron

September 10, 2014
Tweet

More Decks by newtron

Other Decks in Programming

Transcript

  1. 5

  2. 6

  3. 7

  4. 8

  5. 9

  6. 10 63% of Americans used a phone to access the

    internet ! 34% of Americans used a mobile device as their primary way to access the web
  7. 11 “More human beings today have access to a cellphone

    than…a clean toilet.” Anand Giridharadas, New York Times, April 10 2010
  8. 12 “More human beings today have access to a cellphone

    than…a clean toilet.” Anand Giridharadas, New York Times, April 10 2010
  9. 13

  10. 14

  11. 15

  12. 16

  13. 17 1. A flexible, grid-based layout, 2. Flexible images and

    media, 3. Media queries, a module from the CSS3 specification
  14. 18 1. A flexible, grid-based layout, 2. Flexible images and

    media, 3. Media queries, a module from the CSS3 specification
  15. 21

  16. 22

  17. 24

  18. 25

  19. 26

  20. 28 Average web page size: 1,860 KB
 
 Images account

    for: 1,180 KB (>63%)
 
 HTTP Archive, September 1 2014
  21. 29

  22. 30 2x resolution = 4x as many pixels ! 3x

    resolution = 9x as many pixels ! 4x resolution = 16x as many pixels
  23. 37

  24. 38

  25. 39

  26. 41

  27. 46 Firefox (Gecko) srcset (partial) N/A srcset (full) + sizes

    behind a flag: FF33 on by default: FF34? picture behind a flag: FF33 on by default: FF34?
  28. 47 Firefox (Gecko) Chrome/Opera (Blink) srcset (partial) N/A Chrome 34

    srcset (full) + sizes behind a flag: FF33 on by default: FF34? behind a flag: Chrome 37 on by default: Chrome 38 picture behind a flag: FF33 on by default: FF34? behind a flag: Chrome 37 on by default: Chrome 38
  29. 48 Firefox (Gecko) Chrome/Opera (Blink) Safari (WebKit) srcset (partial) N/A

    Chrome 34 Safari 8 srcset (full) + sizes behind a flag: FF33 on by default: FF34? behind a flag: Chrome 37 on by default: Chrome 38 Safari 8.1? picture behind a flag: FF33 on by default: FF34? behind a flag: Chrome 37 on by default: Chrome 38 Safari 8.1?
  30. 49 Firefox (Gecko) Chrome/Opera (Blink) Safari (WebKit) IE (Trident) srcset

    (partial) N/A Chrome 34 Safari 8 12? srcset (full) + sizes behind a flag: FF33 on by default: FF34? behind a flag: Chrome 37 on by default: Chrome 38 Safari 8.1? 12? picture behind a flag: FF33 on by default: FF34? behind a flag: Chrome 37 on by default: Chrome 38 Safari 8.1? 12?
  31. 57 <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" />
  32. 58 <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" />
  33. 61 <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" />
  34. 62 <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" />
  35. 63 <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" />
  36. 64 <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" />
  37. 65 <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" />
  38. 66 <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" />
  39. 67 <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" /> NO!
  40. 68 <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" />
  41. 69

  42. 70 <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" />
  43. 71 <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" />
  44. 72 <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" />
  45. 73 <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" />
  46. 85

  47. 86

  48. 87

  49. 89 <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>
  50. 90 <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>
  51. 91 <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>
  52. 92 <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>
  53. 93 <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>
  54. 94 <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>
  55. 97 <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>
  56. 98 <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" />
  57. 109

  58. 110

  59. 111 Resource Priorities http://www.w3.org/TR/resource-priorities/ ! Preloading and deferred loading of

    scripts and other resources http://lists.whatwg.org/htdig.cgi/whatwg- whatwg.org/2014-August/297533.html
  60. 115 ExpiresActive on ExpiresDefault "access plus 1 month" ExpiresByType image/gif

    "access plus 1 year" ExpiresByType image/jpeg "access plus 1 year" ExpiresByType image/png "access plus 1 year" ExpiresByType image/svg+xml "access plus 1 year" ! Note: Apache is confusing and I’m not guaranteeing this will work.
  61. 118 1. Responsive images 2. Image optimization 3. Deferred image

    loading 4. Caching 5. CDNs 6. Fewer images
  62. 119

  63. 120 1. Responsive images 2. Image optimization 3. Deferred image

    loading 4. Caching 5. CDNs 6. Fewer images
  64. 122

  65. 123

  66. 124 HTML 2 KB Scripts 29 KB CSS 1 KB

    Images 661 KB Total: 693 KB
  67. ▪ Responsive images #1: use srcset and sizes to serve

    images at an appropriate size
 ▪ Responsive images #2: use picture, source, and type to serve SVG and WebP versions where possible
 ▪ Optimization: progressive encoding; use ImageOptim and Scour to optimize file size; serve SVGs gzipped
 ▪ Deferred image loading: use a modified lazyload.js to defer loading of images that are below the fold 126
  68. 128 HTML 3 KB Scripts 33 KB CSS 1 KB

    Images 253 KB Total: 290KB (~58% savings) 2 KB 29 KB 1 KB Images 661 KB Total: 693KB
  69. 129 HTML 3 KB Scripts 33 KB CSS 1 KB

    Images 87 KB Total: 119 KB (~83% savings) 2 KB 29 KB 1 KB Images 661 KB Total: 693 KB
  70. 131

  71. 134 Dave Newton 
 Twitter: @newtron GitHub: @nwtn Email: [email protected]

    
 Slides, links, image credits, and more:
 https://github.com/nwtn/pres-respimg-perf-nagw