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

OpenWest,
2015-05-07
https://github.com/nwtn/pres-respimg-perf-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
   

   View Slide

2. 2
   Web performance
   

   View Slide

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)
   

   View Slide

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

   View Slide

5. 5
   Why images?
   

   View Slide

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

   View Slide

7. View Slide

8. “
   8
   More human beings today
   have access to a cellphone
   than…a clean toilet.
   –Anand Giridharadas, New York Times
   April 10 2010
   

   View Slide

9. “
   8
   More human beings today
   have access to a cellphone
   than…a clean toilet.
   –Anand Giridharadas, New York Times
   April 10 2010
   

   View Slide

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

    View Slide

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

    View Slide

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

    View Slide

13. View Slide

14. View Slide

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

    View Slide

16. View Slide

17. View Slide

18. View Slide

19. View Slide

20. 19
    Bullet 1
    Bullet 2
    Bullet 3
    

    View Slide

21. 20
    Bullet 1
    Bullet 2
    Bullet 3
    

    View Slide

22. View Slide

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

    View Slide

24. 23
    more pixels = more energy
    more pixels = more money
    more pixels = more time
    

    View Slide

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

    View Slide

26. 25
    That’s why images.
    

    View Slide

27. 26
    Responsive images
    

    View Slide

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

    View Slide

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

    View Slide

30. View Slide

31. View Slide

32. View Slide

33. 32
    SVG
    WebP
    JPEG XR
    JPEG 2000
    

    View Slide

34. View Slide

35. 34
    Using JavaScript is a bad idea.
    

    View Slide

36. 35
    Using CSS is a bad idea.
    

    View Slide

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

    View Slide

38. 37
    You can use this now!
    

    View Slide

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
    

    View Slide

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

    View Slide

41. 40
    Resolution switching
    Markup
    

    View Slide

42. 40
    Resolution switching
    Markup
    

    View Slide

43. 41
    alt="A rad wolf"
    />
    

    View Slide

44. 42
    alt="A rad wolf"
    srcset="wolf300.jpg 0.5x,
    wolf600.jpg 1x,
    wolf1200.jpg 2x,
    wolf2400.jpg 3x,
    wolf4800.jpg 4x"
    />
    

    View Slide

45. 43
    alt="A rad wolf"
    srcset="wolf300.jpg 0.5x,
    wolf600.jpg 1x,
    wolf1200.jpg 2x,
    wolf2400.jpg 3x,
    wolf4800.jpg 4x"
    />
    

    View Slide

46. 44
    alt="A rad wolf"
    srcset="wolf300.jpg 0.5x,
    wolf600.jpg 1x,
    wolf1200.jpg 2x,
    wolf2400.jpg 3x,
    wolf4800.jpg 4x"
    />
    

    View Slide

47. 45
    alt="A rad wolf"
    srcset="wolf300.jpg 0.5x,
    wolf600.jpg 1x,
    wolf1200.jpg 2x,
    wolf2400.jpg 3x,
    wolf4800.jpg 4x"
    />
    

    View Slide

48. 46
    alt="A rad wolf"
    srcset="wolf300.jpg 0.5x,
    wolf600.jpg 1x,
    wolf1200.jpg 2x,
    wolf2400.jpg 3x,
    wolf4800.jpg 4x"
    />
    

    View Slide

49. 47
    alt="A rad wolf"
    srcset="wolf300.jpg 0.5x,
    wolf600.jpg 1x,
    wolf1200.jpg 2x,
    wolf2400.jpg 3x,
    wolf4800.jpg 4x"
    />
    

    View Slide

50. 48
    Viewport (and resolution!) switching
    Markup
    

    View Slide

51. 49
    alt="A rad wolf"
    />
    

    View Slide

52. 50
    alt="A rad wolf"
    sizes="100vw"
    srcset="wolf300.jpg 300w,
    wolf600.jpg 600w,
    wolf1200.jpg 1200w,
    wolf2400.jpg 2400w,
    wolf4800.jpg 4800w"
    />
    

    View Slide

53. 51
    alt="A rad wolf"
    sizes="100vw"
    srcset="wolf300.jpg 300w,
    wolf600.jpg 600w,
    wolf1200.jpg 1200w,
    wolf2400.jpg 2400w,
    wolf4800.jpg 4800w"
    />
    

    View Slide

54. 52
    alt="A rad wolf"
    sizes="100vw"
    srcset="wolf300.jpg 300w,
    wolf600.jpg 600w,
    wolf1200.jpg 1200w,
    wolf2400.jpg 2400w,
    wolf4800.jpg 4800w"
    />
    

    View Slide

55. 53
    alt="A rad wolf"
    sizes="100vw"
    srcset="wolf300.jpg 300w,
    wolf600.jpg 600w,
    wolf1200.jpg 1200w,
    wolf2400.jpg 2400w,
    wolf4800.jpg 4800w"
    />
    

    View Slide

56. 54
    alt="A rad wolf"
    sizes="100vw"
    srcset="wolf300.jpg 300w,
    wolf600.jpg 600w,
    wolf1200.jpg 1200w,
    wolf2400.jpg 2400w,
    wolf4800.jpg 4800w"
    />
    

    View Slide

57. 55
    alt="A rad wolf"
    sizes="100vw"
    srcset="wolf300.jpg 300w,
    wolf600.jpg 600w,
    wolf1200.jpg 1200w,
    wolf2400.jpg 2400w,
    wolf4800.jpg 4800w"
    />
    

    View Slide

58. 56
    alt="A rad wolf"
    sizes="600px"
    srcset="wolf300.jpg 300w,
    wolf600.jpg 600w,
    wolf1200.jpg 1200w,
    wolf2400.jpg 2400w,
    wolf4800.jpg 4800w"
    />
    

    View Slide

59. 57
    alt="A rad wolf"
    sizes="calc(100vw - 10em)"
    srcset="wolf300.jpg 300w,
    wolf600.jpg 600w,
    wolf1200.jpg 1200w,
    wolf2400.jpg 2400w,
    wolf4800.jpg 4800w"
    />
    

    View Slide

60. 58
    alt="A rad wolf"
    sizes=“100%"
    srcset="wolf300.jpg 300w,
    wolf600.jpg 600w,
    wolf1200.jpg 1200w,
    wolf2400.jpg 2400w,
    wolf4800.jpg 4800w"
    />
    

    View Slide

61. View Slide

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

    View Slide

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

    View Slide

64. 62
    File type switching
    Markup
    

    View Slide

65. 63
    alt="A rad wolf"
    />
    

    View Slide

66. 64
    
    srcset="wolf4800.webp" />
    alt="A rad wolf"
    />
    
    

    View Slide

67. 65
    
    srcset="wolf4800.webp" />
    alt="A rad wolf"
    />
    
    

    View Slide

68. 66
    
    srcset="wolf4800.webp" />
    alt="A rad wolf"
    />
    
    

    View Slide

69. 67
    
    srcset="wolf4800.webp" />
    alt="A rad wolf"
    />
    
    

    View Slide

70. 68
    
    srcset="wolf4800.webp" />
    srcset="wolf4800.jxr" />
    alt="A rad wolf"
    />
    
    

    View Slide

71. 69
    
    srcset="wolf4800.webp" />
    srcset="wolf4800.jxr" />
    alt="A rad wolf"
    />
    
    

    View Slide

72. 70
    Art direction
    Markup
    

    View Slide

73. 71
    —Adventure Time
    

    View Slide

74. View Slide

75. View Slide

76. 74
    alt="A rad wolf"
    />
    

    View Slide

77. 75
    
    srcset="wolf-crop-bg.jpg" />
    srcset="wolf-crop-sm.jpg" />
    alt="A rad wolf" />
    
    

    View Slide

78. 76
    
    srcset="wolf-crop-bg.jpg" />
    srcset="wolf-crop-sm.jpg" />
    alt="A rad wolf" />
    
    

    View Slide

79. 77
    
    srcset="wolf-crop-bg.jpg" />
    srcset="wolf-crop-sm.jpg" />
    alt="A rad wolf" />
    
    

    View Slide

80. 78
    
    srcset="wolf-crop-bg.jpg" />
    srcset="wolf-crop-sm.jpg" />
    alt="A rad wolf" />
    
    

    View Slide

81. 79
    
    srcset="wolf-crop-bg.jpg" />
    srcset="wolf-crop-sm.jpg" />
    alt="A rad wolf" />
    
    

    View Slide

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

    View Slide

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

    View Slide

84. 81
    
    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"
    />
    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"
    />
    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"
    />
    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"
    />
    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"
    />
    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"
    />
    alt="A rad wolf" />
    
    

    View Slide

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

    View Slide

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

    View Slide

87. 84
    Responsive images
    are a pain in the butt
    

    View Slide

88. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

94. 91
    $ composer require nwtn/php-respimg
    

    View Slide

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

    View Slide

96. 93
    Responsible images
    

    View Slide

97. 94
    1. Responsive images
    

    View Slide

98. 95
    1. Responsive images
    2. Image optimization
    

    View Slide

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
    

    View Slide

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

     View Slide

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

     View Slide

102. View Slide

103. View Slide

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

     View Slide

105. 102
     1. Responsive images
     2. Image optimization
     3. Deferred image loading
     4. CDNs & Caching
     

     View Slide

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"
     

     View Slide

107. 104
     1. Responsive images
     2. Image optimization
     3. Deferred image loading
     4. CDNs & Caching
     5. Appropriate contrast and colour
     

     View Slide

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

     View Slide

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

     View Slide

110. View Slide

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

     View Slide

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

     View Slide

113. 110
     1. Responsive images
     2. Image optimization
     3. Deferred image loading
     4. CDNs & Caching
     5. Appropriate contrast and colour
     6. Text-based alternatives
     

     View Slide

114. 111
     [alt]
     [aria-describedby], [aria-labelledby]
     [longdesc]
     
     
     SVG elements and attributes
     

     View Slide

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
     

     View Slide

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!
     

     View Slide

117. 114
     Performance impact
     

     View Slide

118. View Slide

119. View Slide

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)
     

     View Slide

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)
     

     View Slide

122. View Slide

123. 120
     Accessibility
     Progressive
     enhancement
     Responsive
     web design
     Web
     performance
     

     View Slide

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
     

     View Slide