Improving Performance with Responsive Images [NAGW]

C3e8ba214714b1402f3073334249fcdc?s=47 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

C3e8ba214714b1402f3073334249fcdc?s=128

newtron

September 10, 2014
Tweet

Transcript

  1. 1 Improving Performance with Responsive Images David Newton | St.

    Michael’s Hospital
  2. 2 2 https://github.com/nwtn/pres-respimg-perf-nagw

  3. 3 “Good performance is good design” —Brad Frost

  4. Responsive Web Design 4

  5. 5

  6. 6

  7. 7

  8. 8

  9. 9

  10. 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
  11. 11 “More human beings today have access to a cellphone

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

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

  14. 14

  15. 15

  16. 16

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

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

    media, 3. Media queries, a module from the CSS3 specification
  19. Responsive Images 19

  20. 20 img { max-width: 100%; }

  21. 21

  22. 22

  23. 23 A solution: 
 Serve one big image and let

    the browser scale it
  24. 24

  25. 25

  26. 26

  27. Performance 27

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

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

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

    resolution = 9x as many pixels ! 4x resolution = 16x as many pixels
  31. 31 energy more pixels = more money time

  32. 32 —Dave Rupert

  33. 33 “Good performance is good design” —Brad Frost

  34. 34 A solution: 
 Serve one big image and let

    the browser scale it
  35. 35 A better solution: 
 Serve an appropriate image to

    each user
  36. Responsive Images 36 (Again)

  37. 37

  38. 38

  39. 39

  40. 40 SVG WebP JPEG XR

  41. 41

  42. 42 <picture> + srcset + sizes
 
 http://whatwg.org/html#the-picture-element

  43. 43 Using CSS is a bad idea.

  44. 44 Using JavaScript is a bad idea.

  45. 45 <picture> + srcset + sizes
 
 http://whatwg.org/html#the-picture-element

  46. 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?
  47. 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
  48. 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?
  49. 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?
  50. 50 Picturefill by Scott Jehl ! https://github.com/scottjehl/picturefill

  51. Markup 51

  52. Markup 52 Device Pixel Ratio-Switching

  53. 53 <img src="wolf4800.jpg" alt="A rad wolf" />

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

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

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

    wolf1200.jpg 2x, wolf2400.jpg 3x, wolf4800.jpg 4x" />
  57. 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" />
  58. 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" />
  59. Markup 59 Viewport- and screen resolution-switching

  60. 60 <img src="wolf4800.jpg" alt="A rad wolf" />

  61. 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" />
  62. 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" />
  63. 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" />
  64. 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" />
  65. 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" />
  66. 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" />
  67. 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!
  68. 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" />
  69. 69

  70. 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" />
  71. 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" />
  72. 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" />
  73. 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" />
  74. Markup 74 File type-switching

  75. 75 <img src="wolf4800.jpg" alt="A rad wolf" />

  76. 76 <picture> <source type="image/webp" srcset="wolf4800.webp" /> <img src="wolf4800.jpg" alt="A rad

    wolf" /> </picture>
  77. 77 <picture> <source type="image/webp" srcset="wolf4800.webp" /> <img src="wolf4800.jpg" alt="A rad

    wolf" /> </picture>
  78. 78 <picture> <source type="image/webp" srcset="wolf4800.webp" /> <img src="wolf4800.jpg" alt="A rad

    wolf" /> </picture>
  79. 79 <picture> <source type="image/webp" srcset="wolf4800.webp" /> <img src="wolf4800.jpg" alt="A rad

    wolf" /> </picture>
  80. 80 <picture> <source type="image/webp" srcset="wolf4800.webp" /> <source type="image/vnd.ms-photo" srcset="wolf4800.jxr" />

    <img src="wolf4800.jpg" alt="A rad wolf" /> </picture>
  81. 81 <picture> <source type="image/webp" srcset="wolf4800.webp" /> <source type="image/vnd.ms-photo" srcset="wolf4800.jxr" />

    <img src="wolf4800.jpg" alt="A rad wolf" /> </picture>
  82. 82 <picture> <source type="image/webp" srcset="wolf4800.webp" /> <source type="image/vnd.ms-photo" srcset="wolf4800.jxr" />

    <img src="wolf4800.jpg" alt="A rad wolf" /> </picture>
  83. Markup 83 Art direction

  84. 84 <img src="wolf4800.jpg" alt="A rad wolf" />

  85. 85

  86. 86

  87. 87

  88. 88 <img src="wolf.jpg" alt="A rad wolf" />

  89. 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>
  90. 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>
  91. 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>
  92. 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>
  93. 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>
  94. 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>
  95. Markup 95 All the things!

  96. Markup 96 All the things! a.k.a. the scary slide

  97. 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>
  98. 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" />
  99. 99 http://whatwg.org/html#the-picture-element

  100. 100 A better solution: 
 Serve an appropriate image to

    each user
  101. 1 Improving Performance with Responsive Images David Newton | St.

    Michael’s Hospital
  102. 1 Improving Performance with Responsive Images David Newton | St.

    Michael’s Hospital RESPONSIBLE!
  103. 1. Responsive images 2. 3. 4. 5. 6. 103

  104. 104 1. Responsive images 2. Image optimization 3. 4. 5.

    6.
  105. 105 ImageOptim
 https://imageoptim.com/ ! ImageOptim-CLI http://jamiemason.github.io/ImageOptim-CLI/ ! Scour https://launchpad.net/scour !

    grunt-svgmin https://github.com/sindresorhus/grunt-svgmin
  106. 106 SetOutputFilter DEFLATE AddOutputFilterByType DEFLATE "image/svg+xml" ! ! Note: Apache

    is confusing and I’m not guaranteeing this will work.
  107. 107 1. Responsive images 2. Image optimization 3. 4. 5.

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

    loading 4. 5. 6.
  109. 109

  110. 110

  111. 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
  112. 112 LazyLoad JS scripts and plugins, e.g.: ! http://css-tricks.com/snippets/javascript/lazy- loading-images/

  113. 113 1. Responsive images 2. Image optimization 3. Deferred image

    loading 4. 5. 6.
  114. 114 1. Responsive images 2. Image optimization 3. Deferred image

    loading 4. Caching 5. 6.
  115. 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.
  116. 116 1. Responsive images 2. Image optimization 3. Deferred image

    loading 4. Caching 5. 6.
  117. 117 1. Responsive images 2. Image optimization 3. Deferred image

    loading 4. Caching 5. CDNs 6.
  118. 118 1. Responsive images 2. Image optimization 3. Deferred image

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

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

    loading 4. Caching 5. CDNs 6. Fewer images
  121. Impact 121

  122. 122

  123. 123

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

    Images 661 KB Total: 693 KB
  125. 125 Unoptimized (Firefox) Unoptimized (Safari/iOS) Load time 2.2s 2.1s

  126. ▪ 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
  127. 127 2 KB 29 KB 1 KB Images 661 KB

    Total: 693KB
  128. 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
  129. 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
  130. 130 Unoptimized (Firefox/Desktop) Optimized (Firefox/Desktop) Unoptimized (Safari/iOS) Optimized (Safari/iOS) Load

    time 2.2s 2.0s 2.1s 1.7s
  131. 131

  132. 132 “Good performance is good design” —Brad Frost

  133. 133 “Responsible images are good design” —Dave Newton

  134. 134 Dave Newton 
 Twitter: @newtron GitHub: @nwtn Email: david@davidnewton.ca


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