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

Transcript

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

   (and responsible!) images OpenWest, 2015-05-07 Twitter: @newtron Github: @nwtn Email: david@davidnewton.ca Slides: https://github.com/nwtn/pres-respimg-perf-openwest

2. 2 Web performance

3. “ 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)

4. “ 4 Good performance is good design. —Brad Frost

5. 5 Why images?

6. 6 —Marc Andreessen, www-talk, February 1993

7. 7

8. “ 8 More human beings today have access to a

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

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

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

10. 9 — OpenSignal, Android Fragmentation Visualized (August 2014)

11. 10 —https://twitter.com/lukew/status/507880029737328640/photo/1

12. 11 img { max-width: 100%; }

13. 12

14. 13

15. 14 A solution: Serve one big image and let the

    browser scale it

16. 15

17. 16

18. 17

19. 18

20. 19 Bullet 1 Bullet 2 Bullet 3

21. 20 Bullet 1 Bullet 2 Bullet 3

22. 21

23. 22 2x resolution = 4x as many pixels 3x resolution

    = 9x as many pixels 4x resolution = 16x as many pixels

24. 23 more pixels = more energy more pixels = more

    money more pixels = more time

25. 24 — Dave Rupert , Mo’ Pixels, Mo’ Problems Caption

26. 25 That’s why images.

27. 26 Responsive images

28. 27 A solution: Serve one big image and let the

    browser scale it

29. 28 A better solution: Serve an appropriate image to each

    user

30. 29

31. 30

32. 31

33. 32 SVG WebP JPEG XR JPEG 2000

34. 33

35. 34 Using JavaScript is a bad idea.

36. 35 Using CSS is a bad idea.

37. 36 http://whatwg.org/html#the-picture-element Responsive images specification

38. 37 You can use this now!

39. 38 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

40. 39 http://picturefill.responsiveimages.org/ Picturefill by Scott Jehl & others http://filamentgroup.com/lab/to-picturefill.html To

    Picturefill, or not to Picturefill

41. 40 Resolution switching Markup

42. 40 Resolution switching Markup

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

44. 42 <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" />

45. 43 <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" />

46. 44 <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" />

47. 45 <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" />

48. 46 <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" />

49. 47 <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" />

50. 48 Viewport (and resolution!) switching Markup

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

52. 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" />

53. 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" />

54. 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" />

55. 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" />

56. 54 <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" />

57. 55 <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" />

58. 56 <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" />

59. 57 <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" />

60. 58 <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" />

61. 59

62. 60 <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" />

63. 61 <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" />

64. 62 File type switching Markup

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

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

    wolf" /> </picture>

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

    wolf" /> </picture>

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

    wolf" /> </picture>

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

    wolf" /> </picture>

70. 68 <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>

71. 69 <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>

72. 70 Art direction Markup

73. 71 —Adventure Time

74. 72

75. 73

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

77. 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>

78. 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>

79. 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>

80. 78 <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>

81. 79 <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>

82. 80 All the things! Markup a.k.a. the scary slide

83. 80 All the things! Markup a.k.a. the scary slide

84. 81 <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>

85. 82 <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" />

86. 83 http://whatwg.org/html#the-picture-element Responsive images specification

87. 84 Responsive images are a pain in the butt

88. 85

89. 86 https://www.npmjs.com/package/grunt-respimg grunt-respimg

90. 87 $ npm install grunt-respimg --save-dev

91. 88 https://www.npmjs.com/package/grunt- responsive-images-extender/ grunt-responsive-images-extender

92. 89 $ npm install grunt-responsive-images- extender --save-dev

93. 90 https://github.com/nwtn/php-respimg/ php-respimg

94. 91 $ composer require nwtn/php-respimg

95. 92 https://wordpress.org/plugins/ricg- responsive-images/ WP RICG Responsive Images plugin

96. 93 Responsible images

97. 94 1. Responsive images

98. 95 1. Responsive images 2. Image optimization

99. 96 https://imageoptim.com/ ImageOptim https://github.com/toy/image_optim image_optim https://github.com/svg/svgo-gui SVGO-GUI https://github.com/svg/svgo SVGO

100. 97 SetOutputFilter DEFLATE AddOutputFilterByType DEFLATE "image/svg+xml"

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

     loading

102. 99

103. 100

104. 101 http://css-tricks.com/snippets/javascript/lazy-loading-images/ LazyLoad JS scripts and plugins, e.g.:

105. 102 1. Responsive images 2. Image optimization 3. Deferred image

     loading 4. CDNs & Caching

106. 103 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"

107. 104 1. Responsive images 2. Image optimization 3. Deferred image

     loading 4. CDNs & Caching 5. Appropriate contrast and colour

108. 105 7% 8% 10% 11% 29% 35% April May June

     July August September

109. 106 7% 8% 10% 11% 29% 35% April May June

     July August September

110. 107

111. 108 http://colororacle.org/ Color Oracle

112. 109 September 7% August 8% July 10% June 11% May

     29% April 35%

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

     loading 4. CDNs & Caching 5. Appropriate contrast and colour 6. Text-based alternatives

114. 111 [alt] [aria-describedby], [aria-labelledby] [longdesc] <a> <figcaption> SVG elements and

     attributes

115. 112 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

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

     loading 4. CDNs & Caching 5. Appropriate contrast and colour 6. Text-based alternatives 7. Fewer images!

117. 114 Performance impact

118. 115

119. 116

120. 117 Unoptimized Optimized + Responsive Optimized + Responsive + Lazyload

     CSS 1 KB 1 KB 1 KB HTML 2 KB 3 KB 3 KB Scripts 29 KB 33 KB 33 KB Images 661 KB 253 KB 87 KB Total 693 KB 290 KB (~58% savings) 119 KB (~83% savings)

121. 118 Browser Unoptimized Optimized + Responsive + Lazyload Firefox (Desktop)

     2.2 s 2.0 s Safari (iOS) 2.1 s 1.7 s Average 2.2 s 1.9 s (~14% savings)

122. 119

123. 120 Accessibility Progressive enhancement Responsive web design Web performance

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

     (and responsible!) images OpenWest, 2015-05-07 Twitter: @newtron Github: @nwtn Email: david@davidnewton.ca Slides: https://github.com/nwtn/pres-respimg-perf-openwest