Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Improving Performance with Responsive Images [NAGW]

newtron
September 10, 2014

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

newtron

September 10, 2014
Tweet

More Decks by newtron

Other Decks in Programming

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

    View Slide

  6. 6

    View Slide

  7. 7

    View Slide

  8. 8

    View Slide

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

    View Slide

  14. 14

    View Slide

  15. 15

    View Slide

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

    View Slide

  22. 22

    View Slide

  23. 23
    A solution:

    Serve one big image and let the
    browser scale it

    View Slide

  24. 24

    View Slide

  25. 25

    View Slide

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

    View Slide

  38. 38

    View Slide

  39. 39

    View Slide

  40. 40
    SVG
    WebP
    JPEG XR

    View Slide

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

    View Slide

  86. 86

    View Slide

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

    View Slide

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

    View Slide

  123. 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. 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: [email protected]

    Slides, links, image credits, and more:

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

    View Slide