Using Responsive Images Responsibly: Performance & Accessibility

Accessibility Camp Toronto 2014,
September 27, 2014
https://github.com/nwtn/pres-respimg-perf-a11yto

Transcript

1. David Newton, St. Michael’s Hospital 1 Using Responsive Images Responsibly: Performance & Accessibility: Accessibility Camp Toronto 2014 Twitter:!@newtron! Github:!@nwtn! Email:!! david@davidnewton.ca! ! Slides:! https://github.com/nwtn/pres-respimg-perf-a11yto
2. 2 Why performance? ! Why images?
3. 3 What is “accessibility”?
4. “ 4 ‘Disability’ means… any degree of physical disability, infirmity, malformation or disfigurement that is caused by bodily injury, birth defect or illness… —Accessibility for Ontarians with Disabilities Act
5. 5 Accessibility Deliver a great experience to all users, regardless of their ability.
6. “ 6 Following these guidelines will make content accessible to a wider range of people with disabilities, including blindness and low vision, deafness and hearing loss, learning disabilities, cognitive limitations, limited movement, speech disabilities, photosensitivity and combinations of these. Following these guidelines will also often make your Web content more usable to users in general. —Web Content Accessibility Guidelines 2.0! (emphasis mine)
7. 7 Progressive enhancement
8. “ 8 The goal of Web design is not merely to dazzle, but to deliver information to the widest audience possible.! ! …Compromise should not come at the expense of the user, but rather in terms of the native capabilities of the user’s choice of device.…! ! Leave no one behind. —Steven Champeon, Inclusive Web Design for the Future! (emphasis mine)
9. 9 Progressive enhancement Deliver a great experience to all users, regardless of their browser’s ability.
10. 10 Responsive web design
11. “ 11 Rather than creating disconnected designs, each tailored to a particular device or browser, we should instead treat them as facets of the same experience. —Ethan Marcotte, Responsive Web Design! (emphasis mine)
12. 12 Responsive web design Deliver a great experience to all users, regardless of their viewing context.
13. 13 Web performance
14. “ 14 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)
15. 15 Web performance Deliver a great experience to all users, regardless of their connection.
16. 16 Accessibility Progressive enhancement Responsive web design Web performance
17. 17 Universal design Deliver a great experience to all users.
18. 17 Universal design Deliver a great experience to all users.
19. 18 Accessibility Progressive enhancement Responsive web design Web performance Universal web design Accessibility Progressive enhancement Responsive web design Web performance
20. 18 Accessibility Progressive enhancement Responsive web design Web performance Universal web design Accessibility Progressive enhancement Responsive web design Web performance
21. 18 Universal web design Accessibility Progressive enhancement Responsive web design Web performance
22. “ 19 Universal design is the design of products and environments to be usable by all people, to the greatest extent possible, without the need for adaptation or specialized design. —Ronald L. Mace
23. 20 Why performance? ! Why images?
24. 21 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
25. “ 22 More human beings today have access to a cellphone than…a clean toilet. –Anand Giridharadas, New York Times April 10 2010
26. “ 22 More human beings today have access to a cellphone than…a clean toilet. –Anand Giridharadas, New York Times April 10 2010
27. 23 — OpenSignal, Android Fragmentation Visualized (August 2014)
28. 24 —https://twitter.com/lukew/status/507880029737328640/photo/1
29. 25 img { max-width: 100%; }
30. 26
31. 27
32. 28 A solution: Serve one big image and let the browser scale it
33. 29
34. 30
35. 31 —HTTP Archive, September 15 2014 Stylesheets 56 KB HTML 59 KB Flash 75 KB Other 141 KB Scripts 296 KB Images 1,194 KB Total 1,890 KB
36. 32
37. 33 2x resolution = 4x as many pixels! 3x resolution = 9x as many pixels! 4x resolution = 16x as many pixels
38. 34 more pixels = more energy! more pixels = more money! more pixels = more time
39. 35 — Dave Rupert , Mo’ Pixels, Mo’ Problems Caption
40. 36 Why performance? ! Why images?
41. 37 Responsive images
42. 38 A solution: Serve one big image and let the browser scale it
43. 39 A better solution: Serve an appropriate image to each user
44. 40
45. 41
46. 42
47. 43 SVG! WebP! JPEG XR
48. 44
49. 45 Using JavaScript is a bad idea.
50. 46 Using CSS is a bad idea.
51. 47 http://whatwg.org/html#the-picture-element Responsive images specification
52. 48 Firefox! (Gecko) Chrome/Opera! (Blink) Safari! (WebKit) Internet Explorer! (Trident) srcset (partial) N/A Chrome 34! Opera 21 Safari 8 N/A? srcset (full)! +! sizes Behind a flag: FF 32! On by default: FF 36? Behind a flag: C37, O24! On by default: C38, O25 Safari 8.1? 12? picture Behind a flag: FF 33! On by default: FF 36? Behind a flag: C37, O24! On by default: C38, O25 Safari 8.1? 12?
53. 49 https://github.com/scottjehl/picturefill Picturefill by Scott Jehl http://filamentgroup.com/lab/to-picturefill.html To Picturefill, or not to Picturefill
54. 50 Resolution switching Markup
55. 50 Resolution switching Markup
56. 51 <img src="wolf4800.jpg" alt="A rad wolf" />
57. 52 <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" />
58. 53 <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" />
59. 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" />
60. 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" />
61. 56 <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" />
62. 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" />
63. 58 Viewport (and resolution!) switching Markup
64. 59 <img src="wolf4800.jpg" alt="A rad wolf" />
65. 60 <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" />
66. 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" />
67. 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" />
68. 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" />
69. 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" />
70. 65 <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" />
71. 66 <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" />
72. 67 <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" />
73. 68 <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" />
74. 69 <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" />
75. 70
76. 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" />
77. 72 <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" />
78. 73 File type switching Markup
79. 74 <img src="wolf4800.jpg" alt="A rad wolf" />
80. 75 <picture> <source type="image/webp" srcset="wolf4800.webp" /> <img src="wolf4800.jpg" alt="A rad wolf" /> </picture>
81. 76 <picture> <source type="image/webp" srcset="wolf4800.webp" /> <img src="wolf4800.jpg" alt="A rad wolf" /> </picture>
82. 77 <picture> <source type="image/webp" srcset="wolf4800.webp" /> <img src="wolf4800.jpg" alt="A rad wolf" /> </picture>
83. 78 <picture> <source type="image/webp" srcset="wolf4800.webp" /> <img src="wolf4800.jpg" alt="A rad wolf" /> </picture>
84. 79 <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>
85. 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>
86. 81 Art direction Markup
87. 82 —Adventure Time
88. 83
89. 84
90. 85 <img src="wolf4800.jpg" alt="A rad wolf" />
91. 86 <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. 87 <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. 88 <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. 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>
95. 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>
96. 91 All the things! Markup a.k.a. the scary slide
97. 91 All the things! Markup a.k.a. the scary slide
98. 92 <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> !
99. 93 <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" />
100. 94 http://whatwg.org/html#the-picture-element Responsive images specification
101. 95 Responsible images
102. 96 1. Responsive images! ! ! ! ! !
103. 97 1. Responsive images! 2. Image optimization! ! ! ! !
104. 98 https://imageoptim.com/ ImageOptim http://jamiemason.github.io/ImageOptim-CLI/ ImageOptim-CLI https://github.com/svg/svgo-gui SVGO-GUI https://github.com/svg/svgo SVGO
105. 99 SetOutputFilter DEFLATE AddOutputFilterByType DEFLATE "image/svg+xml" Note: Apache is confusing and I’m not guaranteeing this will work.
106. 100 1. Responsive images! 2. Image optimization! 3. Deferred image loading! ! ! !
107. 101
108. 102
109. 103 http://www.w3.org/TR/resource-priorities/ Resource Priorities https://lists.whatwg.org/htdig.cgi/whatwg-whatwg.org/2014-August/297533.html Preloading and deferred loading of scripts and other resources
110. 104 http://css-tricks.com/snippets/javascript/lazy-loading-images/ LazyLoad JS scripts and plugins, e.g.:
111. 105 1. Responsive images! 2. Image optimization! 3. Deferred image loading! 4. Caching & CDNs! ! !
112. 106 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.
113. 107 1. Responsive images! 2. Image optimization! 3. Deferred image loading! 4. Caching & CDNs! 5. Appropriate contrast and colour! !
114. 108 7% 8% 10% 11% 29% 35% April May June July August September
115. 109 7% 8% 10% 11% 29% 35% April May June July August September
116. 110
117. 111 http://colororacle.org/ Color Oracle
118. 112 September! 7% August! 8% July! 10% June! 11% May! 29% April! 35%
119. 113 1. Responsive images! 2. Image optimization! 3. Deferred image loading! 4. Caching & CDNs! 5. Appropriate contrast and colour! 6. Text-based alternatives!
120. 114 [alt]! [aria-describedby], [aria-labelledby]! [longdesc]! <a>! <figcaption>! SVG elements and attributes
121. 115 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
122. 116 1. Responsive images! 2. Image optimization! 3. Deferred image loading! 4. Caching & CDNs! 5. Appropriate contrast and colour! 6. Text-based alternatives! 7. Fewer images!
123. 117 Performance impact
124. 118
125. 119
126. 120 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)
127. 121 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)
128. 122
129. 123 Accessibility Progressive enhancement Responsive web design Web performance
130. David Newton, St. Michael’s Hospital 124 Using Responsive Images Responsibly: Performance & Accessibility: Accessibility Camp Toronto 2014 Twitter:!@newtron! Github:!@nwtn! Email:!! david@davidnewton.ca! ! Slides:! https://github.com/nwtn/pres-respimg-perf-a11yto