Improving Performance with Responsive Images [NAGW]

National Association of Government Web Professionals (NAGW) 2014,
September 10, 2014
https://github.com/nwtn/pres-respimg-perf-nagw

Transcript

1. 1
   Improving Performance with Responsive Images
   David Newton | St. Michael’s Hospital
   

   View Slide

2. 2
   2
   https://github.com/nwtn/pres-respimg-perf-nagw
   

   View Slide

3. 3
   “Good performance is
   good design”
   —Brad Frost
   

   View Slide

4. Responsive Web Design
   4
   

   View Slide

5. View Slide

6. View Slide

7. View Slide

8. View Slide

9. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

13. View Slide

14. View Slide

15. View Slide

16. View Slide

17. 17
    1. A flexible, grid-based layout,
    2. Flexible images and media,
    3. Media queries, a module from the CSS3
    specification
    

    View Slide

18. 18
    1. A flexible, grid-based layout,
    2. Flexible images and media,
    3. Media queries, a module from the CSS3
    specification
    

    View Slide

19. Responsive Images
    19
    

    View Slide

20. 20
    img {
    max-width: 100%;
    }
    

    View Slide

21. View Slide

22. View Slide

23. 23
    A solution:
    

    Serve one big image and let the
    browser scale it
    

    View Slide

24. View Slide

25. View Slide

26. View Slide

27. Performance
    27
    

    View Slide

28. 28
    Average web page size: 1,860 KB

    

    Images account for: 1,180 KB (>63%)

    

    HTTP Archive, September 1 2014
    

    View Slide

29. View Slide

30. 30
    2x resolution = 4x as many pixels
    !
    3x resolution = 9x as many pixels
    !
    4x resolution = 16x as many pixels
    

    View Slide

31. 31
    energy
    more pixels = more money
    time
    

    View Slide

32. 32
    —Dave Rupert
    

    View Slide

33. 33
    “Good performance is
    good design”
    —Brad Frost
    

    View Slide

34. 34
    A solution:
    

    Serve one big image and let the
    browser scale it
    

    View Slide

35. 35
    A better solution:
    

    Serve an appropriate image to
    each user
    

    View Slide

36. Responsive Images
    36
    (Again)
    

    View Slide

37. View Slide

38. View Slide

39. View Slide

40. 40
    SVG
    WebP
    JPEG XR
    

    View Slide

41. View Slide

42. 42
    + srcset + sizes

    

    http://whatwg.org/html#the-picture-element
    

    View Slide

43. 43
    Using CSS is a bad idea.
    

    View Slide

44. 44
    Using JavaScript is a bad idea.
    

    View Slide

45. 45
    + srcset + sizes

    

    http://whatwg.org/html#the-picture-element
    

    View Slide

46. 46
    Firefox
    (Gecko)
    srcset (partial) N/A
    srcset (full) +
    sizes
    behind a flag: FF33
    on by default: FF34?
    picture behind a flag: FF33
    on by default: FF34?
    

    View Slide

47. 47
    Firefox
    (Gecko)
    Chrome/Opera
    (Blink)
    srcset (partial) N/A Chrome 34
    srcset (full) +
    sizes
    behind a flag: FF33
    on by default: FF34?
    behind a flag: Chrome 37
    on by default: Chrome 38
    picture behind a flag: FF33
    on by default: FF34?
    behind a flag: Chrome 37
    on by default: Chrome 38
    

    View Slide

48. 48
    Firefox
    (Gecko)
    Chrome/Opera
    (Blink)
    Safari
    (WebKit)
    srcset (partial) N/A Chrome 34 Safari 8
    srcset (full) +
    sizes
    behind a flag: FF33
    on by default: FF34?
    behind a flag: Chrome 37
    on by default: Chrome 38
    Safari 8.1?
    picture behind a flag: FF33
    on by default: FF34?
    behind a flag: Chrome 37
    on by default: Chrome 38
    Safari 8.1?
    

    View Slide

49. 49
    Firefox
    (Gecko)
    Chrome/Opera
    (Blink)
    Safari
    (WebKit)
    IE
    (Trident)
    srcset (partial) N/A Chrome 34 Safari 8 12?
    srcset (full) +
    sizes
    behind a flag: FF33
    on by default: FF34?
    behind a flag: Chrome 37
    on by default: Chrome 38
    Safari 8.1? 12?
    picture behind a flag: FF33
    on by default: FF34?
    behind a flag: Chrome 37
    on by default: Chrome 38
    Safari 8.1? 12?
    

    View Slide

50. 50
    Picturefill by Scott Jehl
    !
    https://github.com/scottjehl/picturefill
    

    View Slide

51. Markup
    51
    

    View Slide

52. Markup
    52
    Device Pixel Ratio-Switching
    

    View Slide

53. 53
    alt="A rad wolf"
    />
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

59. Markup
    59
    Viewport- and screen resolution-switching
    

    View Slide

60. 60
    alt="A rad wolf"
    />
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

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

    View Slide

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

    View Slide

69. View Slide

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

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

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

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

74. Markup
    74
    File type-switching
    

    View Slide

75. 75
    alt="A rad wolf"
    />
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

83. Markup
    83
    Art direction
    

    View Slide

84. 84
    alt="A rad wolf"
    />
    

    View Slide

85. View Slide

86. View Slide

87. View Slide

88. 88
    alt="A rad wolf"
    />
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

95. Markup
    95
    All the things!
    

    View Slide

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

    View Slide

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

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

99. 99
    http://whatwg.org/html#the-picture-element
    

    View Slide

100. 100
     A better solution:
     

     Serve an appropriate image to
     each user
     

     View Slide

101. 1
     Improving Performance with Responsive Images
     David Newton | St. Michael’s Hospital
     

     View Slide

102. 1
     Improving Performance with Responsive Images
     David Newton | St. Michael’s Hospital
     RESPONSIBLE!
     

     View Slide

103. 1. Responsive images
     2.
     3.
     4.
     5.
     6.
     103
     

     View Slide

104. 104
     1. Responsive images
     2. Image optimization
     3.
     4.
     5.
     6.
     

     View Slide

105. 105
     ImageOptim

     https://imageoptim.com/
     !
     ImageOptim-CLI
     http://jamiemason.github.io/ImageOptim-CLI/
     !
     Scour
     https://launchpad.net/scour
     !
     grunt-svgmin
     https://github.com/sindresorhus/grunt-svgmin
     

     View Slide

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

     View Slide

107. 107
     1. Responsive images
     2. Image optimization
     3.
     4.
     5.
     6.
     

     View Slide

108. 108
     1. Responsive images
     2. Image optimization
     3. Deferred image loading
     4.
     5.
     6.
     

     View Slide

109. View Slide

110. View Slide

111. 111
     Resource Priorities
     http://www.w3.org/TR/resource-priorities/
     !
     Preloading and deferred loading of scripts
     and other resources
     http://lists.whatwg.org/htdig.cgi/whatwg-
     whatwg.org/2014-August/297533.html
     

     View Slide

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

     View Slide

113. 113
     1. Responsive images
     2. Image optimization
     3. Deferred image loading
     4.
     5.
     6.
     

     View Slide

114. 114
     1. Responsive images
     2. Image optimization
     3. Deferred image loading
     4. Caching
     5.
     6.
     

     View Slide

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

     View Slide

116. 116
     1. Responsive images
     2. Image optimization
     3. Deferred image loading
     4. Caching
     5.
     6.
     

     View Slide

117. 117
     1. Responsive images
     2. Image optimization
     3. Deferred image loading
     4. Caching
     5. CDNs
     6.
     

     View Slide

118. 118
     1. Responsive images
     2. Image optimization
     3. Deferred image loading
     4. Caching
     5. CDNs
     6. Fewer images
     

     View Slide

119. View Slide

120. 120
     1. Responsive images
     2. Image optimization
     3. Deferred image loading
     4. Caching
     5. CDNs
     6. Fewer images
     

     View Slide

121. Impact
     121
     

     View Slide

122. View Slide

123. View Slide

124. 124
     HTML
     2 KB
     Scripts
     29 KB
     CSS
     1 KB
     Images
     661 KB
     Total: 693 KB
     

     View Slide

125. 125
     Unoptimized
     (Firefox)
     Unoptimized
     (Safari/iOS)
     Load time 2.2s 2.1s
     

     View Slide

126. ▪ Responsive images #1: use srcset and sizes to serve images at an
     appropriate size

     ▪ Responsive images #2: use picture, source, and type to serve SVG and
     WebP versions where possible

     ▪ Optimization: progressive encoding; use ImageOptim and Scour to
     optimize file size; serve SVGs gzipped

     ▪ Deferred image loading: use a modified lazyload.js to defer loading of
     images that are below the fold
     126
     

     View Slide

127. 127
     2 KB
     29 KB
     1 KB
     Images
     661 KB
     Total: 693KB
     

     View Slide

128. 128
     HTML
     3 KB
     Scripts
     33 KB
     CSS
     1 KB
     Images
     253 KB
     Total: 290KB (~58% savings)
     2 KB
     29 KB
     1 KB
     Images
     661 KB
     Total: 693KB
     

     View Slide

129. 129
     HTML
     3 KB
     Scripts
     33 KB
     CSS
     1 KB
     Images
     87 KB
     Total: 119 KB (~83% savings)
     2 KB
     29 KB
     1 KB
     Images
     661 KB
     Total: 693 KB
     

     View Slide

130. 130
     Unoptimized
     (Firefox/Desktop)
     Optimized
     (Firefox/Desktop)
     Unoptimized
     (Safari/iOS)
     Optimized
     (Safari/iOS)
     Load time 2.2s 2.0s 2.1s 1.7s
     

     View Slide

131. View Slide

132. 132
     “Good performance is
     good design”
     —Brad Frost
     

     View Slide

133. 133
     “Responsible images are
     good design”
     —Dave Newton
     

     View Slide

134. 134
     Dave Newton
     

     Twitter: @newtron
     GitHub: @nwtn
     Email: david@davidnewton.ca

     

     Slides, links, image credits, and more:

     https://github.com/nwtn/pres-respimg-perf-nagw
     

     View Slide