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
   

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

   View Slide

8. View Slide

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

   View Slide

10. View Slide

11. 11
    — OpenSignal, Android Fragmentation Visualized (August 2014)
    

    View Slide

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

    View Slide

13. 13
    A problem:
    We want images to look good e’rywhere
    

    View Slide

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

    View Slide

15. View Slide

16. View Slide

17. View Slide

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

    View Slide

19. View Slide

20. View Slide

21. 21
    Bullet 1
    Bullet 2
    Bullet 3
    

    View Slide

22. 22
    Bullet 1
    Bullet 2
    Bullet 3
    

    View Slide

23. View Slide

24. 24
    more pixels = more energy
    more pixels = more memory
    more pixels = more time
    

    View Slide

25. 25
    A problem:
    We want images to look good e’rywhere
    

    View Slide

26. 26
    A harder problem:
    We want images to look good e’rywhere,
    without hurting the user experience
    

    View Slide

27. 27
    Responsive images
    

    View Slide

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

    View Slide

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

    View Slide

30. View Slide

31. View Slide

32. View Slide

33. 33
    SVG
    WebP
    JPEG XR
    JPEG 2000
    

    View Slide

34. View Slide

35. 35
    Using CSS is a bad idea.
    

    View Slide

36. 36
    Using JavaScript is a bad idea.
    

    View Slide

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

    View Slide

38. 38
    Resolution switching
    Markup
    

    View Slide

39. 38
    Resolution switching
    Markup
    

    View Slide

40. 39
    alt="A rad wolf"
    />
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

47. 46
    Viewport (and resolution!) switching
    Markup
    

    View Slide

48. 47
    alt="A rad wolf"
    />
    

    View Slide

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

    View Slide

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

    View Slide

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

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

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

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

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

    View Slide

56. 55
    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

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

    View Slide

58. View Slide

59. 58
    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

60. 59
    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

61. 60
    File type switching
    Markup
    

    View Slide

62. 61
    alt="A rad wolf"
    />
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

69. 68
    Art direction
    Markup
    

    View Slide

70. 69
    —Adventure Time
    

    View Slide

71. View Slide

72. View Slide

73. 72
    alt="A rad wolf"
    />
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

79. 78
    All the things!
    Markup
    a.k.a. the scary slide
    

    View Slide

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

    View Slide

81. 79
    
    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

82. 80
    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

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

    View Slide

84. 82
    http://codepen.io/Tigt/blog/when-responsive-images-get-ugly
    When responsive images get ugly
    

    View Slide

85. 83
    You can use this now!
    

    View Slide

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
    

    View Slide

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

    View Slide

88. 86
    Responsive images
    are a pain in the butt
    

    View Slide

89. View Slide

90. 88
    https://www.npmjs.com/package/grunt-respimg
    grunt-respimg
    

    View Slide

91. 89
    https://github.com/nwtn/php-respimg/
    php-respimg
    

    View Slide

92. 90
    https://www.npmjs.com/package/grunt-
    responsive-images-extender/
    grunt-responsive-images-extender
    

    View Slide

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

    View Slide

94. 92
    Responsible images
    

    View Slide

95. 93
    1. Responsive images
    

    View Slide

96. 94
    1. Responsive images
    2. Image optimization
    

    View Slide

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
    

    View Slide

98. 96
    SetOutputFilter DEFLATE
    AddOutputFilterByType DEFLATE "image/svg+xml"
    

    View Slide

99. 97
    1. Responsive images
    2. Image optimization
    3. Deferred image loading (a.k.a. “lazy loading”)
    

    View Slide

100. View Slide

101. View Slide

102. 100
     http://afarkas.github.io/lazysizes/
     LazyLoad JS scripts and plugins, e.g.:
     

     View Slide

103. 101
     1. Responsive images
     2. Image optimization
     3. Deferred image loading (a.k.a. “lazy loading”)
     4. CDNs & Caching
     

     View Slide

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
     

     View Slide

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

     View Slide

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

     View Slide

107. View Slide

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

     View Slide

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

     View Slide

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
     

     View Slide

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

     View Slide

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
     

     View Slide

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!
     

     View Slide

114. “
     112
     Good performance is
     good design.
     —Brad Frost
     

     View Slide

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
     

     View Slide