Delivering Responsive Images

Presented at ImageCon 2017

Transcript

1. IMAGECON 2017
   Delivering Responsive Images
   Jason Grigsby
   

   View Slide

2. Responsive
   images have
   landed
   

   View Slide

3. View Slide

4. https://www.flickr.com/photos/gwendalcentrifugue/7395256948
   

   View Slide

5. View Slide

6. 
   
   type="image/webp"
   media="(min-width: 36em)"
   srcset="quilt_2/detail/large.webp 1920w,
   quilt_2/detail/medium.webp 960w,
   quilt_2/detail/small.webp 480w" />
   media="(min-width: 36em)"
   srcset="quilt_2/detail/large.jpg 1920w,
   quilt_2/detail/medium.jpg 960w,
   quilt_2/detail/small.jpg 480w" />
   

   View Slide

7. srcset="quilt_2/square/large.webp 822w,
   quilt_2/square/medium.webp 640w,
   quilt_2/square/small.webp 320w" />
   srcset="quilt_2/square/large.jpg 822w,
   quilt_2/square/medium.jpg 640w,
   quilt_2/square/small.jpg 320w" />
   src="quilt_2/detail/medium.jpg"
   alt="Detail of the above quilt, highlighting the
   embroidery and exotic stitchwork." />
   
   

   View Slide

8. ”This is way too complex and heavy markup language.
   Can you imagine yourselves doing that in 300 images in
   a web site? This will be a nightmare to manage.”
   ”There are so many things wrong with these new
   responsive image systems.”
   “
   

   View Slide

9. background-image:
   -webkit-linear-gradient(
   45deg, rgba(255, 255, 255, .15) 25%,
   transparent 25%, transparent 50%,
   rgba(255, 255, 255, .15) 50%,
   rgba(255, 255, 255, .15) 75%,
   transparent 75%,
   transparent);
   background-image:
   -o-linear-gradient(
   45deg,
   rgba(255, 255, 255, .15) 25%,
   

   View Slide

10. transparent 75%,
    transparent);
    background-image:
    linear-gradient(45deg,
    rgba(255, 255, 255, .15) 25%,
    transparent 25%, transparent 50%,
    rgba(255, 255, 255, .15) 50%,
    rgba(255, 255, 255, .15) 75%,
    transparent 75%,
    transparent);
    And that’s why no one uses gradients…
    

    View Slide

11. Images have always been difficult.
    

    View Slide

12. 216 Web Safe Colors
    http://moodlightinghire.com/wp-content/uploads/2013/06/RGB_color_chart_by_ervis.jpg
    

    View Slide

13. 1996
    258
    pages
    1997
    447
    pages
    1996
    235
    pages
    1997
    238
    pages
    1997
    235
    pages
    

    View Slide

14. PNG compression
    1,498 bytes 1,980 bytes 12,850 bytes
    

    View Slide

15. https://www.flickr.com/photos/jannem/3312115991
    

    View Slide

16. Use Cases
    https://www.flickr.com/photos/cgb_bbear/3082932860
    

    View Slide

17. https://www.flickr.com/photos/whitehouse/8491445521
    Resolution Switching
    Includes high-density (retina) images.
    

    View Slide

18. Art direction
    http://www.flickr.com/photos/barackobamadotcom/5795228030/
    

    View Slide

19. http://www.flickr.com/photos/barackobamadotcom/5795228030/
    Art direction
    

    View Slide

20. http://www.flickr.com/photos/barackobamadotcom/5795228030/
    Art direction
    

    View Slide

21. http://www.flickr.com/photos/barackobamadotcom/5795228030/
    Art direction
    

    View Slide

22. http://www.flickr.com/photos/barackobamadotcom/5795228030/
    Art direction
    

    View Slide

23. Not simply cropping
    

    View Slide

24. Art direction: Images with text
    

    View Slide

25. Art direction: Images with text
    

    View Slide

26. Art direction: Images with text
    

    View Slide

27. https://www.flickr.com/photos/lonelycoo/4393663498
    

    View Slide

28. 
    is always required
    

    View Slide

29. 
    Icon made by Daniel Bruce from www.flaticon.com is licensed under CC BY 3.0
    
    srcset media
    sizes type
    

    View Slide

30. 
    srcset="kitten-large.png">
    srcset="kitten-medium.png">
    alt="a cute kitten">
    
    All rules are applied to element
    Original Chrome Team Example: http://googlechrome.github.io/samples/picture-element/
    

    View Slide

31. 
    do you need anything else?
    

    View Slide

32. Fixed width, single density
    is all you need.
    

    View Slide

33. View Slide

34. View Slide

35. View Slide

36. Small difference in file
    size or using SVG?
    is all you need.
    

    View Slide

37. High density
    displays?
    

    View Slide

38. srcset
    

    View Slide

39. display density
    comma-separated list
    srcset="cat.jpg, cat-2X.jpg 2x">
    

    View Slide

40. Easy so far, right?
    

    View Slide

41. View Slide

42. 1849 × 749 – 256K
    2x = 3698 × 1498 – 508K
    

    View Slide

43. We need more source files.
    

    View Slide

44. width of the image sources
    Browser picks best source
    srcset="cat-160.jpg 160w,
    cat-320.jpg 320w,
    cat-640.jpg 640w,
    cat-1280.jpg 1280w">
    

    View Slide

45. Browser picks
    best source
    HOW?
    https://www.flickr.com/
    photos/ores2k/394359583
    

    View Slide

46. Image requested
    HTML requested
    CSS and JS requested
    HTML parsing starts
    Image requested
    Image requested
    Image requested
    

    View Slide

47. CSS evaluation beginning
    

    View Slide

48. CSS evaluation beginning
    Images are downloaded before size is known
    The only thing the lookahead pre-parser knows is the size of the viewport.
    

    View Slide

49. srcset="cat-160.jpg 160w,
    cat-320.jpg 320w,
    cat-640.jpg 640w,
    cat-1280.jpg 1280w">
    

    View Slide

50. Images are nearly same
    size as viewport
    

    View Slide

51. 1540px
    254px
    Viewport
    Tells Us
    Little
    

    View Slide

52. Tug of war between
    responsive images and the
    lookahead pre-parser.
    

    View Slide

53. https://www.flickr.com/photos/davechiu/24165369 https://www.flickr.com/photos/ostrosky/4149725733
    

    View Slide

54. https://www.flickr.com/photos/davechiu/24165369 https://www.flickr.com/photos/ostrosky/4149725733
    Lookahead
    pre-parser
    Know everything in advance.
    Start downloading immediately.
    Responsive
    images
    Wait until last minute.
    Know size of image after CSS / JS.
    

    View Slide

55. The pre-parser is why we can’t solve responsive
    images with CSS, JS or a magical new image format.
    https://www.flickr.com/photos/hamur0w0/6984884135
    

    View Slide

56. Lookahead Pre-parser Key to a Faster Web
    20% 19%
    http://andydavies.me/blog/2013/10/22/how-the-browser-pre-loader-makes-pages-load-faster/
    

    View Slide

57. ~43% of image fetches are initiated by the
    speculative HTML scanner, which account for
    ~50% of transferred bytes.
    —Ilya Grigorik
    “
    http://bigqueri.es/t/who-initiates-image-downloads/568
    

    View Slide

58. sizes
    https://www.flickr.com/photos/ashleyrosex/2861690380
    

    View Slide

59. srcset="cat-160.jpg 160w,
    cat-320.jpg 320w,
    cat-640.jpg 640w,
    cat-1280.jpg 1280w"
    sizes=“max-width(480px) 100vw,
    max-width(900px) 33vw,
    171px”>
    sizes="(max-width: 480px) 100vw,
    (max-width: 900px) 33vw,
    254px"
    sizes is required
    whenever srcset uses
    width descriptors
    

    View Slide

60. media condition (subset of media queries)
    length
    viewport width unit
    if there is no media condition,
    then it is the default length
    length can be
    absolute, relative
    or even calc()
    sizes="(max-width: 480px) 100vw,
    (max-width: 900px) 33vw,
    254px"
    

    View Slide

61. sizes="
    (max-width: 480px) 100vw,
    (max-width: 900px) 33vw,
    254px"
    

    View Slide

62. sizes="
    (max-width: 480px) 100vw,
    (max-width: 900px) 33vw,
    254px"
    

    View Slide

63. sizes="
    (max-width: 480px) 100vw,
    (max-width: 900px) 33vw,
    254px"
    

    View Slide

64. What about separation of
    content from style?
    

    View Slide

65. Sizes is a necessary compromise:

    responsive images and speculative downloading
    

    View Slide

66. srcset and sizes
    let browsers be smart
    https://www.flickr.com/photos/alicejamieson/3164148439
    

    View Slide

67. 
    

    View Slide

68. Art Direction
    http://www.gratisography.com/
    

    View Slide

69. 
    srcset="cat-vertical.jpg">
    srcset="cat-horizontal.jpg">
    
    
    media query
    full srcset
    multiple
    s
    
    required
    

    View Slide

70. Shopify using for art direction
    

    View Slide

71. Shopify using for art direction
    
    media="(min-width: 990px)">
    media="(min-width: 750px)">
    alt="Shopify Merchant, Corrine Anestopoulos">
    
    Simplified markup
    

    View Slide

72. another use for
    https://www.flickr.com/photos/delete08/4869608487
    

    View Slide

73. declare different types of images
    unless art direction, you
    don’t need media attribute
    
    
    
    
    
    

    View Slide

74. New image formats present new possibilities
    JPEG 2000 handles alpha channel images well
    http://www.useragentman.com/blog/2015/01/14/using-webp-jpeg2000-jpegxr-apng-now-with-picturefill-and-modernizr/
    

    View Slide

75. JPEG 2000 19.2K
    JPEG-XR 95.7K
    PNG 325.7K
    Web-P 56K
    Alpha Channel
    Dice Image
    http://www.useragentman.com/blog/2015/01/14/using-webp-jpeg2000-jpegxr-apng-now-with-picturefill-and-modernizr/
    

    View Slide

76. http://www.gratisography.com/
    

    View Slide

77. image breakpoints
    

    View Slide

78. http://www.gratisography.com/
    Art direction may dictate image breakpoints
    

    View Slide

79. https://www.flickr.com/photos/photosdavidgabrielfischer/15706338457
    Image breakpoints for resolution switching.
    

    View Slide

80. For responsive design breakpoints, resize the
    browser until the page looks bad then…
    BOOM!
    you need a breakpoint.
    

    View Slide

81. 2000 x 3010
    761K
    200 x 301
    15K
    How many image breakpoints?
    

    View Slide

82. 2000 x 3010
    761K
    200 x 301
    15K
    Scaled down images don’t look bad.
    

    View Slide

83. 2000 x 3010
    250K
    400 x 602
    Actual size in page
    800 x 1204
    73K
    

    View Slide

84. 2000 x 3010
    250K
    400 x 602
    Actual size in page
    800 x 1204
    73K
    600 x 903
    42K
    

    View Slide

85. 400 x 602
    Actual size in page
    800 x 1204
    73K
    600 x 903
    42K
    500 x 753
    31K
    450 x 678
    27K
    

    View Slide

86. 400 x 602
    Actual size in page
    

    View Slide

87. 400 x 602
    Actual size in page
    Is the only intrinsic information we have about image size.
    

    View Slide

88. In the responsive layouts I’ve worked on, content image sizes and their
    breakpoints were chosen for completely different reasons than the
    design (CSS) breakpoints: the former for sensible jumps in file size to
    match screen dimension and/or density, and the latter for how content
    modules are visibly designed at given viewport dimensions.
    —Scott Jehl, Filament Group
    http://lists.w3.org/Archives/Public/public-whatwg-archive/2012May/0613.html
    “
    

    View Slide

89. What is a sensible jump in file size?
    

    View Slide

90. Images compress differently
    Both images are 960x660 pixels
    151K, JPEG 13K PNG
    

    View Slide

91. Responsive Images Performance Budget
    

    View Slide

92. Source image:
    500x333
    58K
    What is the cost of flexible images?
    

    View Slide

93. Source image:
    500x333
    58K
    What is the cost of flexible images?
    Size in page:
    300x200
    24K
    Making this
    image
    flexible
    costs 34K.
    

    View Slide

94. What if we set a performance budget
    of 20K per image for flexible images?
    

    View Slide

95. Width Height File Size
    320 213 25K
    453 302 44K
    579 386 65K
    687 458 85K
    786 524 104K
    885 590 124K
    975 650 142K
    990 660 151K
    8 image breakpoints
    https://www.flickr.com/photos/lyza/6733380533
    

    View Slide

96. Width Height File Size
    320 213 9K
    731 487 29K
    990 660 40K
    3 image breakpoints
    https://www.flickr.com/photos/lyza/6210160407
    

    View Slide

97. 7 image breakpoints
    Width Height File Size
    320 213 24K
    471 314 43K
    612 408 64K
    728 485 84K
    840 560 103K
    944 629 122K
    990 660 131K
    https://www.flickr.com/photos/lyza/6167714218
    

    View Slide

98. Width Height File Size
    990 660 13K
    1 image breakpoint
    

    View Slide

99. View Slide

100. Pick representative
     images and test how
     many breakpoints
     you’ll need.
     Image breakpoints are not a science yet.
     https://www.flickr.com/photos/ecstaticist/5465673165
     

     View Slide

101. Humans
     shouldn’t
     be doing
     this work.
     https://www.flickr.com/photos/jdhancock/7801182534/
     

     View Slide

102. client hints
     

     View Slide

103. display density
     width of image in page
     may not be useful
     GET cat.jpg
     Accept: image/webp,image/*,*/*;q=0.8
     DPR: 2
     Viewport-Width: 1024
     Width: 508
     

     View Slide

104. sizes="(max-width: 480px) 100vw,
     (max-width: 900px) 33vw, 254px">
     srcset="cat-160.jpg 160w, cat-320.jpg 320w,
     cat-640.jpg 640w, cat-1280.jpg 1280w"
     

     View Slide

105. sizes="(max-width: 480px) 100vw,
     (max-width: 900px) 33vw, 254px">
     necessary to calculate
     image width
     

     View Slide

106. image formats browser understands
     GET cat.jpg
     Accept: image/webp,image/*,*/*;q=0.8
     DPR: 2
     Viewport-Width: 1024
     Width: 508
     

     View Slide

107. 
     
     media="(min-width: 50em)"
     sizes="50vw"
     srcset="/image/thing-200.webp 200w, /image/thing-400.webp 400w,
     /image/thing-800.webp 800w, /image/thing-1200.webp 1200w,
     /image/thing-1600.webp 1600w, /image/thing-2000.webp 2000w"
     type="image/webp">
     sizes="(min-width: 30em) 100vw"
     srcset="/image/thing-crop-200.webp 200w, /image/thing-crop-400.webp 400w,
     /image/thing-crop-800.webp 800w, /image/thing-crop-1200.webp 1200w,
     /image/thing-crop-1600.webp 1600w, /image/thing-crop-2000.webp 2000w"
     type="image/webp">
     
     

     View Slide

108. /image/thing-crop-1600.jpgxr 1600w, /image/thing-crop-2000.jpgxr 2000w"
     type="image/vnd.ms-photo">
     
     media="(min-width: 50em)"
     sizes="50vw"
     srcset="/image/thing-200.jpg 200w, /image/thing-400.jpg 400w,
     /image/thing-800.jpg 800w, /image/thing-1200.jpg 1200w,
     /image/thing-1600.jpg 1600w, /image/thing-2000.jpg 2000w">
     sizes="(min-width: 30em) 100vw"
     srcset="/image/thing-crop-200.jpg 200w, /image/thing-crop-400.jpg 400w,
     /image/thing-crop-800.jpg 800w, /image/thing-crop-1200.jpg 1200w,
     /image/thing-crop-1600.jpg 1600w, /image/thing-crop-2000.jpg 2000w">
     
     
     
     

     View Slide

109. 
     sizes="50vw"
     srcset="/image/thing">
     
     
     

     View Slide

110. content="DPR, Viewport-Width, Width">
     only declare the hints you need
     

     View Slide

111. View Slide

112. Client hints
     conundrum
     

     View Slide

113. https://www.flickr.com/photos/lendingmemo/11747440176
     

     View Slide

114. Questions to ask about images
     Where are the source files and what is the process for publishing?
     Is there a big difference between smallest and largest image size?
     Resolution switching or art direction?
     Can we use SVG?
     Are there representative images we can use to find sensible jumps in
     file sizes for our image breakpoints?
     Do we want to support multiple image formats?
     

     View Slide

115. Image Description Format Size Markup Notes
     Property logos
     PNG8
     (future SVG)
     Regular,
     Retina
     
     Little variance between the wide and
     small screen image sizes.
     Partner logos
     PNG8
     (future SVG)
     Regular,
     Retina
     
     Little variance between the wide and
     small screen image sizes.
     Iconography SVG — —
     Brand logos
     PNG8
     (future SVG)
     regular,
     Retina
     
     Assumes little variance between the
     wide and small screen image sizes.
     Property photography
     JPG 

     (conditional WebP)
     Dynamically resized and
     compressed
     srcset and sizes Templates specify breakpoints.
     Promo images w/ text 

     (art direction)
     Whichever is appropriate As many sizes as needed.
     Content producer defines images
     and breakpoints in CMS.
     Example of images audit for a large site
     

     View Slide

116. Big Hope: Automation
     https://www.flickr.com/photos/clement127/15631803492
     

     View Slide

117. http://scottjehl.github.io/picturefill/
     Picturefill is
     the polyfill.
     

     View Slide

118. https://www.drupal.org/project/picture
     Drupal
     Picture
     Module
     

     View Slide

119. https://wordpress.org/plugins/ricg-responsive-images/
     Wordpress
     Responsive
     Images
     Plugin
     

     View Slide

120. Image
     resizing
     services
     http://bit.ly/image-services
     

     View Slide

121. View Slide

122. https://www.flickr.com/photos/mariachily/5250487136
     Responsive images
     can seem daunting…
     

     View Slide

123. Remember, you’re
     not alone…
     https://www.flickr.com/photos/max-design/3751402935
     

     View Slide

124. View Slide

125. We will build tools to
     make the climb easier…
     

     View Slide

126. We merely
     need to
     take the
     first steps.
     https://www.flickr.com/photos/akras/1477140536
     

     View Slide

127. https://flickr.com/photos/
     ekosystem/4334671818
     

     View Slide

128. http://www.gratisography.com/
     

     View Slide

129. http://www.gratisography.com/
     Special thanks to Simon
     Pieters, Mat Marquis,
     Eric Portis, Yoav Weiss,
     and the rest of the RICG.
     Shout out to all of the
     amazing photographers
     who share their work
     under creative
     commons. You rule!
     

     View Slide