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

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

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

newtron

June 18, 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
    CSSConf, 2015-06-18
    Twitter: @newtron
    Github: @nwtn
    Email: [email protected]
    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. 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. 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. 15

    View Slide

  16. 16

    View Slide

  17. 17

    View Slide

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

    View Slide

  19. 19

    View Slide

  20. 20

    View Slide

  21. 21
    Bullet 1
    Bullet 2
    Bullet 3

    View Slide

  22. 22
    Bullet 1
    Bullet 2
    Bullet 3

    View Slide

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

    View Slide

  31. 31

    View Slide

  32. 32

    View Slide

  33. 33
    SVG
    WebP
    JPEG XR
    JPEG 2000

    View Slide

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

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

    View Slide

  72. 71

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

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

    View Slide

  101. 99

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

    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: [email protected]
    Slides: http://nwtn.ca/b

    View Slide