Using Responsive Images Responsibly: Performance & Accessibility [WordCamp]

1.

David Newton, St. Michael’s Hospital 1 1 Using Responsive Images
Responsibly: Performance & Accessibility: WordCamp Toronto 2014 Twitter: @newtron Github: @nwtn Email: david@davidnewton.ca Slides: https://github.com/nwtn/pres-respimg-perf-wcto

2.

2 Why accessibility? Why performance?

3.

3 What is “accessibility”?

4.

“ 4 ‘Disability’ means… any degree of physical disability, inﬁrmity,
malformation or disﬁgurement 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 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, November 1 2014 Stylesheets 57 KB HTML
60 KB Flash 76 KB Other 152 KB Scripts 305 KB Images 1,206 KB Total 1,925 KB

36.

32

37.

33

38.

34 2x resolution = 4x as many pixels 3x resolution
= 9x as many pixels 4x resolution = 16x as many pixels

39.

35 more pixels = more energy more pixels = more
money more pixels = more time

40.

36 — Dave Rupert , Mo’ Pixels, Mo’ Problems Caption

41.

37 Why images?

42.

38 Responsive images

43.

39 A solution: Serve one big image and let the
browser scale it

44.

40 A better solution: Serve an appropriate image to each
user

45.

41

46.

42

47.

43

48.

44 SVG WebP JPEG XR JPEG 2000

49.

45

50.

46 Using JavaScript is a bad idea.

51.

47 Using CSS is a bad idea.

52.

48 http://whatwg.org/html#the-picture-element Responsive images speciﬁcation

53.

49 Firefox (Gecko) Chrome/Opera (Blink) Safari (WebKit) Internet Explorer (Trident)
srcset (x) N/A Chrome 34 Opera 21 Works now! Safari 8 Works now! N/A? srcset (x & w) + sizes Behind a flag: FF 32 On by default: FF 36? Chrome 38 Opera 25 Works now! Safari 8.1? 12? picture Behind a flag: FF 33 On by default: FF 36? Chrome 38 Opera 25 Works now! Safari 8.1? 12?

54.

50 https://github.com/scottjehl/picturefill Picturefill by Scott Jehl http://filamentgroup.com/lab/to-picturefill.html To Picturefill, or
not to Picturefill

55.

51 https://github.com/ResponsiveImagesCG/ wp-tevko-responsive-images WP-tevko-responsive-images

56.

52 Resolution switching Markup

57.

52 Resolution switching Markup

58.

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

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.


61.


62.


63.


64.


65.

60 Viewport (and resolution!) switching Markup

66.


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.


69.


70.


71.


72.


73.

68 <img src="wolf4800.jpg" alt="A rad wolf" sizes="600px" srcset="wolf300.jpg 300w, wolf600.jpg

74.

69 <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" />

75.

70 <img src="wolf4800.jpg" alt="A rad wolf" sizes=“100%" srcset="wolf300.jpg 300w, wolf600.jpg

76.


77.

72

78.

73 <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" />

79.


80.

75 File type switching Markup

81.


82.

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

83.

wolf" /> </picture>

84.

wolf" /> </picture>

85.

wolf" /> </picture>

86.

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>

87.

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>

88.

83 Art direction Markup

89.

84 —Adventure Time

90.

85

91.

86

92.


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.


95.


96.


97.


98.

93 All the things! Markup a.k.a. the scary slide

99.

93 All the things! Markup a.k.a. the scary slide

100.

94 <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>

101.


102.

96 http://whatwg.org/html#the-picture-element Responsive images speciﬁcation

103.

97 Responsible images

104.

98 1. Responsive images

105.

99 1. Responsive images 2. Image optimization

106.

100 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

107.

101 SetOutputFilter DEFLATE AddOutputFilterByType DEFLATE "image/svg+xml" Note: Apache is confusing
and I’m not guaranteeing this will work.

108.

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

109.

103

110.

104

111.

105 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

112.

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

113.

loading 4. Caching & CDNs

114.

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

115.

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

116.

110 7% 8% 10% 11% 29% 35% April May June
July August September

117.

111 7% 8% 10% 11% 29% 35% April May June
July August September

118.

112

119.

113 http://colororacle.org/ Color Oracle

120.

114 September 7% August 8% July 10% June 11% May
29% April 35%

121.

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

122.

116 [alt] [aria-describedby], [aria-labelledby] [longdesc] <a> <figcaption> SVG elements and
attributes

123.

117 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

124.

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

125.

119 Performance impact

126.

120

127.

121

128.

122 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)

129.

123 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)

130.

124

131.

125 Accessibility Progressive enhancement Responsive web design Web performance

132.

David Newton, St. Michael’s Hospital 126 Using Responsive Images Responsibly:
Performance & Accessibility: WordCamp Toronto 2014 Twitter: @newtron Github: @nwtn Email: david@davidnewton.ca Slides: https://github.com/nwtn/pres-respimg-perf-wcto

Using Responsive Images Responsibly: Performance & Accessibility [WordCamp]

Using Responsive Images Responsibly: Performance & Accessibility [WordCamp]

Want more?

Transcript