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

CSSConf,
2015-06-18
https://github.com/nwtn/pres-respimg-perf-cssconf

Transcript

1. David Newton, St. Michael’s Hospital 1 Improving performance with responsive (and responsible!) images CSSConf, 2015-06-18 Twitter: @newtron Github: @nwtn Email: david@davidnewton.ca Slides: http://nwtn.ca/b
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 Fonts 98 KB Stylesheets 63 KB Video 208 KB HTML 55 KB Scripts 334 KB Other 4 KB Images 1,312 KB Total: 2,061 KB
9. “ 9 More human beings today have access to a cellphone than…a clean toilet. –Anand Giridharadas, New York Times April 10 2010
11. 11 — OpenSignal, Android Fragmentation Visualized (August 2014)
12. 12 —https://twitter.com/lukew/status/507880029737328640/photo/1
13. 13 A problem: We want images to look good e’rywhere
14. 14 img { max-width: 100%; }
18. 18 A solution: Serve one big image and let the browser scale it
21. 21 Bullet 1 Bullet 2 Bullet 3
22. 22 Bullet 1 Bullet 2 Bullet 3
24. 24 more pixels = more energy more pixels = more memory more pixels = more time
25. 25 A problem: We want images to look good e’rywhere
26. 26 A harder problem: We want images to look good e’rywhere, without hurting the user experience
27. 27 Responsive images
28. 28 A solution: Serve one big image and let the browser scale it
29. 29 A better solution: Serve an appropriate image to each user
33. 33 SVG WebP JPEG XR JPEG 2000
35. 35 Using CSS is a bad idea.
36. 36 Using JavaScript is a bad idea.
37. 37 http://whatwg.org/html#the-picture-element Responsive images specification
38. 38 Resolution switching Markup
39. 38 Resolution switching Markup
40. 39 <img src="wolf4800.jpg" alt="A rad wolf" />
41. 40 <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" />
42. 41 <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" />
43. 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" />
44. 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" />
45. 44 <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" />
46. 45 <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" />
47. 46 Viewport (and resolution!) switching Markup
48. 47 <img src="wolf4800.jpg" alt="A rad wolf" />
49. 48 <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" />
50. 49 <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" />
51. 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" />
52. 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" />
53. 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" />
54. 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" />
55. 54 <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" />
56. 55 <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" />
57. 56 <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" />
59. 58 <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" />
60. 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" />
61. 60 File type switching Markup
62. 61 <img src="wolf4800.jpg" alt="A rad wolf" />
63. 62 <picture> <source type="image/webp" srcset="wolf4800.webp" /> <img src="wolf4800.jpg" alt="A rad wolf" /> </picture>
64. 63 <picture> <source type="image/webp" srcset="wolf4800.webp" /> <img src="wolf4800.jpg" alt="A rad wolf" /> </picture>
65. 64 <picture> <source type="image/webp" srcset="wolf4800.webp" /> <img src="wolf4800.jpg" alt="A rad wolf" /> </picture>
66. 65 <picture> <source type="image/webp" srcset="wolf4800.webp" /> <img src="wolf4800.jpg" alt="A rad wolf" /> </picture>
67. 66 <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>
68. 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>
69. 68 Art direction Markup
70. 69 —Adventure Time
73. 72 <img src="wolf4800.jpg" alt="A rad wolf" />
74. 73 <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>
75. 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>
76. 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>
77. 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>
78. 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>
79. 78 All the things! Markup a.k.a. the scary slide
80. 78 All the things! Markup a.k.a. the scary slide
81. 79 <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>
82. 80 <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" />
83. 81 http://whatwg.org/html#the-picture-element Responsive images specification
84. 82 http://codepen.io/Tigt/blog/when-responsive-images-get-ugly When responsive images get ugly
85. 83 You can use this now!
86. 84 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
87. 85 http://picturefill.responsiveimages.org/ Picturefill by Scott Jehl & others http://filamentgroup.com/lab/to-picturefill.html To Picturefill, or not to Picturefill
88. 86 Responsive images are a pain in the butt
90. 88 https://www.npmjs.com/package/grunt-respimg grunt-respimg
91. 89 https://github.com/nwtn/php-respimg/ php-respimg
92. 90 https://www.npmjs.com/package/grunt- responsive-images-extender/ grunt-responsive-images-extender
93. 91 https://wordpress.org/plugins/ricg-responsive-images/ WP RICG Responsive Images plugin
94. 92 Responsible images
95. 93 1. Responsive images
96. 94 1. Responsive images 2. Image optimization
97. 95 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
98. 96 SetOutputFilter DEFLATE AddOutputFilterByType DEFLATE "image/svg+xml"
99. 97 1. Responsive images 2. Image optimization 3. Deferred image loading (a.k.a. “lazy loading”)
102. 100 http://afarkas.github.io/lazysizes/ LazyLoad JS scripts and plugins, e.g.:
103. 101 1. Responsive images 2. Image optimization 3. Deferred image loading (a.k.a. “lazy loading”) 4. CDNs & Caching
104. 102 1. Responsive images 2. Image optimization 3. Deferred image loading (a.k.a. “lazy loading”) 4. CDNs & Caching 5. Appropriate contrast and colour
105. 103 7% 8% 10% 11% 29% 35% April May June July August September
106. 104 7% 8% 10% 11% 29% 35% April May June July August September
108. 106 http://colororacle.org/ Color Oracle
109. 107 September 7% August 8% July 10% June 11% May 29% April 35%
110. 108 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
111. 109 [alt] [aria-describedby], [aria-labelledby] [longdesc] <a> <figcaption> SVG elements and attributes
112. 110 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
113. 111 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!
114. “ 112 Good performance is good design. —Brad Frost
115. David Newton, St. Michael’s Hospital 113 Improving performance with responsive (and responsible!) images CSSConf, 2015-06-18 Twitter: @newtron Github: @nwtn Email: david@davidnewton.ca Slides: http://nwtn.ca/b