Improving performance with responsive (and responsible!) images [CSSDay.io]

Transcript

1. 1 Improving performance with responsive (and responsible!) images

2. 1 Improving performance with responsive (and responsible!) images Don’t tell

   anybody, but this is an HTML talk.

3. 2

4. 2

5. 2

6. 3 twitter @newtron github @nwtn slides nwtn.ca/d

7. 4 Web performance

8. “ 5 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)

9. “ 6 Good performance is good design. —Brad Frost

10. 7 Why images?

11. 8 —Marc Andreessen, www-talk, February 1993

12. 9 Fonts 114 KB CSS 74 KB Video 187 KB

    HTML 52 KB Scripts 368 KB Other 4 KB Images 1,412 KB Total: 2,219 KB

13. 10

14. “ 11 More human beings today have access to a

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

15. 12

16. 13 — OpenSignal, Android Fragmentation Visualized (August 2014)

17. 14 —https://twitter.com/lukew/status/507880029737328640/photo/1

18. 15 A problem: We want images to look good e’rywhere

19. 16 img { max-width: 100%; }

20. 17

21. 18

22. 19

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

    browser scale it

24. 21

25. 22

26. 23 Bullet 1 Bullet 2 Bullet 3

27. 24 Bullet 1 Bullet 2 Bullet 3

28. 25

29. 26 more pixels = more energy more pixels = more

    memory more pixels = more time

30. 27 A problem: We want images to look good e’rywhere

31. 28 A harder problem: We want images to look good

    e’rywhere, without hurting the user experience

32. 29 Responsive images

33. 30 A solution: Serve one big image and let the

    browser scale it

34. 31 A better solution: Serve an appropriate image to each

    user

35. 32

36. 33

37. 34

38. 35 SVG WebP JPEG XR JPEG 2000

39. 36

40. 37 Using CSS is a bad idea.

41. 38 Using JavaScript is a bad idea.

42. 39 http://whatwg.org/html#the-picture-element Responsive images specification

43. 40 Markup

44. 40 Resolution switching Markup

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

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

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

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

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

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

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

52. 48 Viewport (and resolution!) switching Markup

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

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

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

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

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

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

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

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

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

62. 58

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

65. 61 File type switching Markup

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

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

    wolf" /> </picture>

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

    wolf" /> </picture>

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

    wolf" /> </picture>

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

    wolf" /> </picture>

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

73. 69 Art direction Markup

74. 70 —Adventure Time

75. 71

76. 72

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

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

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

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

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

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

84. 79 All the things! Markup a.k.a. the scary slide

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

86. <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" /> 81

87. 82 http://whatwg.org/html#the-picture-element Responsive images specification

88. 83 http://codepen.io/Tigt/blog/when-responsive-images-get-ugly When responsive images get ugly

89. 84 You can use this now!

90. 85 Firefox (Gecko) Chrome/Opera (Blink) Safari (WebKit) Edge srcset +

    sizes Works now! Firefox 38 Works now! Chrome 34 Opera 21 Works now! Safari 9 iOS 9 Works now! Edge 13 picture Works now! Firefox 38 Works now! Chrome 38 Opera 25 Almost there… Works now! Edge 13

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

    Picturefill, or not to Picturefill

92. 87 Responsive images are a pain in the butt

93. 88

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

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

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

97. http://www.smashingmagazine.com/2015/06/efficient- image-resizing-with-imagemagick/ Efficient image resizing With ImageMagick 92

98. 93 Responsible images

99. 94 1. Responsive images

100. 95 1. Responsive images 2. Image optimization

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

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

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

     loading (a.k.a. “lazy loading”)
104. None
105. None

106. 101 http://afarkas.github.io/lazysizes/ LazyLoad JS scripts and plugins, e.g.:

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

     loading (a.k.a. “lazy loading”) 4. CDNs & Caching

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

     loading (a.k.a. “lazy loading”) 4. CDNs & Caching 5. Appropriate contrast and colour

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

     July August September

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

     July August September

111. 106

112. 107 http://colororacle.org/ Color Oracle

113. 108 September 7% August 8% July 10% June 11% May

     29% April 35%

114. 109 1. Responsive images 2. Image optimization 3. Deferred image

     loading (a.k.a. “lazy loading”) 4. CDNs & Caching 5. Appropriate contrast and colour 6. Text-based alternatives

115. 110 [alt] [aria-describedby] [aria-labelledby] [longdesc] <a> <figcaption> SVG

116. 111 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

117. 112 1. Responsive images 2. Image optimization 3. Deferred image

     loading (a.k.a. “lazy loading”) 4. CDNs & Caching 5. Appropriate contrast and colour 6. Text-based alternatives 7. Fewer images!

118. “ 113 Good performance is good design. —Brad Frost

119. 114 https://www.shopify.com/careers We’re hiring!

120. 115 twitter @newtron github @nwtn slides nwtn.ca/d