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

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
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
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%; }
23. 23 A solution: 
 Serve one big image and let the browser scale it
27. Performance 27
28. 28 Average web page size: 1,860 KB
 
 Images account for: 1,180 KB (>63%)
 
 HTTP Archive, September 1 2014
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)
40. 40 SVG WebP JPEG XR
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" />
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" />
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.
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
120. 120 1. Responsive images 2. Image optimization 3. Deferred image loading 4. Caching 5. CDNs 6. Fewer images
121. Impact 121
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
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