Improving Performance with Responsive Images [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

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