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

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

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

newtron

May 07, 2015
Tweet

More Decks by newtron

Other Decks in Programming

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

    View Slide

  14. 13

    View Slide

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

    View Slide

  16. 15

    View Slide

  17. 16

    View Slide

  18. 17

    View Slide

  19. 18

    View Slide

  20. 19
    Bullet 1
    Bullet 2
    Bullet 3

    View Slide

  21. 20
    Bullet 1
    Bullet 2
    Bullet 3

    View Slide

  22. 21

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

    View Slide

  31. 30

    View Slide

  32. 31

    View Slide

  33. 32
    SVG
    WebP
    JPEG XR
    JPEG 2000

    View Slide

  34. 33

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

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

    View Slide

  75. 73

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

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

    View Slide

  103. 100

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

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

    View Slide

  119. 116

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

    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: [email protected]
    Slides: https://github.com/nwtn/pres-respimg-perf-openwest

    View Slide