Pro Yearly is on sale from $80 to $50! »

Delivering Responsive Images

Delivering Responsive Images

Presented at ImageCon 2017

Dac45089aeda3bca56193072601a49d4?s=128

Jason Grigsby

March 01, 2017
Tweet

Transcript

  1. IMAGECON 2017 Delivering Responsive Images Jason Grigsby

  2. Responsive images have landed

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

  5. None
  6. <picture> <!-- 16:9 crop --> <source 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" /> <source media="(min-width: 36em)" srcset="quilt_2/detail/large.jpg 1920w, quilt_2/detail/medium.jpg 960w, quilt_2/detail/small.jpg 480w" />
  7. srcset="quilt_2/square/large.webp 822w, quilt_2/square/medium.webp 640w, quilt_2/square/small.webp 320w" /> <source srcset="quilt_2/square/large.jpg 822w,

    quilt_2/square/medium.jpg 640w, quilt_2/square/small.jpg 320w" /> <img src="quilt_2/detail/medium.jpg" alt="Detail of the above quilt, highlighting the embroidery and exotic stitchwork." /> </picture>
  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.” “
  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%,
  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…
  11. Images have always been difficult.

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

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

    238 pages 1997 235 pages
  14. PNG compression 1,498 bytes 1,980 bytes 12,850 bytes

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

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

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

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

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

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

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

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

  23. Not simply cropping

  24. Art direction: Images with text

  25. Art direction: Images with text

  26. Art direction: Images with text

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

  28. <img> is always required

  29. <img> Icon made by Daniel Bruce from www.flaticon.com is licensed

    under CC BY 3.0 <picture> <source> srcset media sizes type
  30. <picture> <source media="(min-width: 650px)" srcset="kitten-large.png"> <source media="(min-width: 465px)" srcset="kitten-medium.png"> <img

    src="kitten-small.png" alt="a cute kitten"> </picture> All rules are applied to <img> element Original Chrome Team Example: http://googlechrome.github.io/samples/picture-element/
  31. <img> do you need anything else?

  32. Fixed width, single density <img> is all you need.

  33. None
  34. None
  35. None
  36. Small difference in file size or using SVG? <img> is

    all you need.
  37. High density displays?

  38. srcset

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

  40. Easy so far, right?

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

  43. We need more source files.

  44. width of the image sources Browser picks best source <img

    src="cat.jpg" alt="cat" srcset="cat-160.jpg 160w, cat-320.jpg 320w, cat-640.jpg 640w, cat-1280.jpg 1280w">
  45. Browser picks best source HOW? https://www.flickr.com/ photos/ores2k/394359583

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

    starts Image requested Image requested Image requested
  47. CSS evaluation beginning

  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.
  49. <img src="cat.jpg" alt="cat" srcset="cat-160.jpg 160w, cat-320.jpg 320w, cat-640.jpg 640w, cat-1280.jpg

    1280w">
  50. Images are nearly same size as viewport

  51. 1540px 254px Viewport Tells Us Little

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

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

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

  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
  58. sizes https://www.flickr.com/photos/ashleyrosex/2861690380

  59. <img src="cat.jpg" alt="cat" 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
  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"
  61. sizes=" (max-width: 480px) 100vw, (max-width: 900px) 33vw, 254px"

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

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

  64. What about separation of content from style?

  65. Sizes is a necessary compromise:
 responsive images and speculative downloading

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

  67. <picture?>

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

  69. <picture> <source media="(min-width: 900px)" srcset="cat-vertical.jpg"> <source media="(min-width: 750px)" srcset="cat-horizontal.jpg"> <img

    src="cat.jpg" alt="cat"> </picture> media query full srcset multiple <source>s <img> required
  70. Shopify using <picture> for art direction

  71. Shopify using <picture> for art direction <picture> <source srcset="homepage-person@desktop.png, homepage-person@desktop-2x.png

    2x" media="(min-width: 990px)"> <source srcset="homepage-person@tablet.png, homepage-person@tablet-2x.png 2x" media="(min-width: 750px)"> <img srcset="homepage-person@mobile.png, homepage-person@mobile-2x.png 2x" alt="Shopify Merchant, Corrine Anestopoulos"> </picture> Simplified markup
  72. another use for <picture> https://www.flickr.com/photos/delete08/4869608487

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

    need media attribute <picture> <source type="image/svg+xml" srcset="logo.xml"> <source type="image/webp" srcset="logo.webp"> <img src="logo.png" alt="ACME Corp"> </picture>
  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/
  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/
  76. http://www.gratisography.com/

  77. image breakpoints

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

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

  80. For responsive design breakpoints, resize the browser until the page

    looks bad then… BOOM! you need a breakpoint.
  81. 2000 x 3010 761K 200 x 301 15K How many

    image breakpoints?
  82. 2000 x 3010 761K 200 x 301 15K Scaled down

    images don’t look bad.
  83. 2000 x 3010 250K 400 x 602 Actual size in

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

    page 800 x 1204 73K 600 x 903 42K
  85. 400 x 602 Actual size in page 800 x 1204

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

  87. 400 x 602 Actual size in page Is the only

    intrinsic information we have about image size.
  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 “
  89. What is a sensible jump in file size?

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

    13K PNG
  91. Responsive Images Performance Budget

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

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

    images? Size in page: 300x200 24K Making this image flexible costs 34K.
  94. What if we set a performance budget of 20K per

    image for flexible images?
  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
  96. Width Height File Size 320 213 9K 731 487 29K

    990 660 40K 3 image breakpoints https://www.flickr.com/photos/lyza/6210160407
  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
  98. Width Height File Size 990 660 13K 1 image breakpoint

  99. None
  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
  101. Humans shouldn’t be doing this work. https://www.flickr.com/photos/jdhancock/7801182534/

  102. client hints

  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
  104. <img src="cat.jpg" alt="cat" 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"
  105. sizes="(max-width: 480px) 100vw, (max-width: 900px) 33vw, 254px"> <img src="cat.jpg" alt="cat"

    necessary to calculate image width
  106. image formats browser understands GET cat.jpg Accept: image/webp,image/*,*/*;q=0.8 DPR: 2

    Viewport-Width: 1024 Width: 508
  107. <picture> <!-- serve WebP to Chrome and Opera --> <source

    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"> <source 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"> <!-- serve JPEGXR to Edge --> <source
  108. /image/thing-crop-1600.jpgxr 1600w, /image/thing-crop-2000.jpgxr 2000w" type="image/vnd.ms-photo"> <!-- serve JPEG to others

    --> <source 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"> <source 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"> <!-- fallback for browsers that don't support picture --> <img src="/image/thing.jpg" width="50%"> </picture>
  109. <picture> <source media="(min-width: 50em)" sizes="50vw" srcset="/image/thing"> <img sizes="100vw" src="/image/thing-crop"> </picture>

  110. <meta http-equiv="Accept-CH" content="DPR, Viewport-Width, Width"> only declare the hints you

    need
  111. None
  112. Client hints conundrum

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

  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?
  115. Image Description Format Size Markup Notes Property logos PNG8 (future

    SVG) Regular, Retina <img> Little variance between the wide and small screen image sizes. Partner logos PNG8 (future SVG) Regular, Retina <img> Little variance between the wide and small screen image sizes. Iconography SVG — <img> — Brand logos PNG8 (future SVG) regular, Retina <img> 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. <picture> Content producer defines images and breakpoints in CMS. Example of images audit for a large site
  116. Big Hope: Automation https://www.flickr.com/photos/clement127/15631803492

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

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

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

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

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

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

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

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

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

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

  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!