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

Improving performance with responsive (and responsible!) images [CSSDay.io]

newtron
December 05, 2015

Improving performance with responsive (and responsible!) images [CSSDay.io]

newtron

December 05, 2015
Tweet

More Decks by newtron

Other Decks in Programming

Transcript

  1. 1
    Improving performance with responsive
    (and responsible!) images

    View full-size slide

  2. 1
    Improving performance with responsive
    (and responsible!) images
    Don’t tell anybody, but this is an HTML talk.

    View full-size slide

  3. 3
    twitter
    @newtron
    github
    @nwtn
    slides
    nwtn.ca/d

    View full-size slide

  4. 4
    Web performance

    View full-size slide


  5. 5
    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 full-size slide


  6. 6
    Good performance is

    good design.
    —Brad Frost

    View full-size slide

  7. 7
    Why images?

    View full-size slide

  8. 8
    —Marc Andreessen, www-talk, February 1993

    View full-size slide

  9. 9
    Fonts
    114 KB
    CSS
    74 KB
    Video
    187 KB
    HTML
    52 KB
    Scripts
    368 KB
    Other
    4 KB
    Images
    1,412 KB
    Total: 2,219 KB

    View full-size slide


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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  16. 23
    Bullet 1
    Bullet 2
    Bullet 3

    View full-size slide

  17. 24
    Bullet 1
    Bullet 2
    Bullet 3

    View full-size slide

  18. 26
    more pixels = more energy
    more pixels = more memory
    more pixels = more time

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  21. 29
    Responsive images

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  24. 35
    SVG
    WebP
    JPEG XR
    JPEG 2000

    View full-size slide

  25. 37
    Using CSS is a bad idea.

    View full-size slide

  26. 38
    Using JavaScript is a bad idea.

    View full-size slide

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

    View full-size slide

  28. 40
    Resolution switching
    Markup

    View full-size slide

  29. 41
    alt="A rad wolf"
    />

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  36. 48
    Viewport (and resolution!) switching
    Markup

    View full-size slide

  37. 49
    alt="A rad wolf"
    />

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  44. 56
    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 full-size slide

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

    View full-size slide

  46. 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 full-size slide

  47. 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 full-size slide

  48. 61
    File type switching
    Markup

    View full-size slide

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

    View full-size slide

  50. 63

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

    View full-size slide

  51. 64

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

    View full-size slide

  52. 65

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

    View full-size slide

  53. 66

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

    View full-size slide

  54. 67

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

    View full-size slide

  55. 68

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

    View full-size slide

  56. 69
    Art direction
    Markup

    View full-size slide

  57. 70
    —Adventure Time

    View full-size slide

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

    View full-size slide

  59. 74

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

    View full-size slide

  60. 75

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

    View full-size slide

  61. 76

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

    View full-size slide

  62. 77

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

    View full-size slide

  63. 78

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  66. 80

    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 full-size slide

  67. 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"
    /> 81

    View full-size slide

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

    View full-size slide

  69. 83
    http://codepen.io/Tigt/blog/when-responsive-images-get-ugly
    When responsive images get ugly

    View full-size slide

  70. 84
    You can use this now!

    View full-size slide

  71. 85
    Firefox
    (Gecko)
    Chrome/Opera
    (Blink)
    Safari
    (WebKit)
    Edge
    srcset
    +
    sizes
    Works now!
    Firefox 38

    Works now!
    Chrome 34

    Opera 21

    Works now!
    Safari 9

    iOS 9

    Works now!
    Edge 13
    picture
    Works now!
    Firefox 38

    Works now!
    Chrome 38

    Opera 25
    Almost there… Works now!
    Edge 13

    View full-size slide

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

    View full-size slide

  73. 87
    Responsive images
    are a pain in the butt

    View full-size slide

  74. 89
    https://www.npmjs.com/package/grunt-respimg
    grunt-respimg

    View full-size slide

  75. 90
    https://github.com/nwtn/php-respimg/
    php-respimg

    View full-size slide

  76. https://www.npmjs.com/package/grunt-responsive-images-extender/
    91
    grunt-responsive-images-extender

    View full-size slide

  77. http://www.smashingmagazine.com/2015/06/efficient-
    image-resizing-with-imagemagick/
    Efficient image resizing With ImageMagick
    92

    View full-size slide

  78. 93
    Responsible images

    View full-size slide

  79. 94
    1. Responsive images

    View full-size slide

  80. 95
    1. Responsive images
    2. Image optimization

    View full-size slide

  81. 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 full-size slide

  82. 97
    SetOutputFilter DEFLATE
    AddOutputFilterByType DEFLATE "image/svg+xml"

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  86. 103
    1. Responsive images
    2. Image optimization
    3. Deferred image loading (a.k.a. “lazy loading”)
    4. CDNs & Caching
    5. Appropriate contrast and colour

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  89. 107
    http://colororacle.org/
    Color Oracle

    View full-size slide

  90. 108
    September
    7%
    August
    8%
    July
    10%
    June
    11%
    May
    29%
    April
    35%

    View full-size slide

  91. 109
    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 full-size slide

  92. 110
    [alt]
    [aria-describedby]
    [aria-labelledby]
    [longdesc]


    SVG

    View full-size slide

  93. 111
    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 full-size slide

  94. 112
    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 full-size slide


  95. 113
    Good performance is
    good design.
    —Brad Frost

    View full-size slide

  96. 114
    https://www.shopify.com/careers
    We’re hiring!

    View full-size slide

  97. 115
    twitter
    @newtron
    github
    @nwtn
    slides
    nwtn.ca/d

    View full-size slide