Responsive Images are Here. Now What?

It took nearly four years, four proposed standards, the formation of a community group, and a funding campaign to pay for development, but we finally got what we've been clamoring for—a solution for responsive images baked into browsers. Now the hard work begins. Learn how to use the new responsive image specifications, which ones are appropriate for which images, and how to tackle the riddle of responsive image breakpoints.

Transcript

1. Responsive Images Are Here. Now What? Jason Grigsby • @grigs • cloudfour.com Photo by http://www.gratisography.com/
2. Responsive images have landed Also sprach Zarathustra
3. Shipped Development
4. https://www.flickr.com/photos/gwendalcentrifugue/7395256948
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. ”Long story short, I don't think anyone should use images on the web.” https://www.flickr.com/photos/zeldman/7727532846
10. ”Long story short, I don't think anyone should use images on the web.” https://www.flickr.com/photos/zeldman/7727532846
11. https://www.flickr.com/photos/zeldman/7727532846
13. 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%,
14. 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…
15. Images have always been difficult.
16. 216 Web Safe Colors http://moodlightinghire.com/wp-content/uploads/2013/06/RGB_color_chart_by_ervis.jpg
17. 1996 258 pages 1997 447 pages 1996 235 pages 1997 238 pages 1997 235 pages
18. PNG compression 1,498 bytes 1,980 bytes 12,850 bytes
19. https://www.flickr.com/photos/jannem/3312115991
20. Use Cases https://www.flickr.com/photos/cgb_bbear/3082932860
21. https://www.flickr.com/photos/whitehouse/8491445521 Resolution Switching Includes high-density (retina) images.
22. Art direction http://www.flickr.com/photos/barackobamadotcom/5795228030/
23. http://www.flickr.com/photos/barackobamadotcom/5795228030/ Art direction
24. http://www.flickr.com/photos/barackobamadotcom/5795228030/ Art direction
25. http://www.flickr.com/photos/barackobamadotcom/5795228030/ Art direction
26. http://www.flickr.com/photos/barackobamadotcom/5795228030/ Art direction
27. Not simply cropping
28. Art direction: Images with text
29. Art direction: Images with text
30. Art direction: Images with text
31. https://www.flickr.com/photos/lonelycoo/4393663498
32. <img> is always required
33. <img> Icon made by Daniel Bruce from www.flaticon.com is licensed under CC BY 3.0 <picture> <source> srcset media sizes type
34. <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/
35. <img> do you need anything else?
36. Fixed width, single density <img> is all you need.
40. Small difference in file size or using SVG? <img> is all you need.
41. High density displays?
42. srcset
43. display density comma-separated list <img src="cat.jpg" alt="cat" srcset="cat.jpg, cat-2X.jpg 2x">
44. Easy so far, right?
46. 1849 × 749 – 256K 2x = 3698 × 1498 – 508K
47. We need more source files.
48. 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">
49. Browser picks best source HOW? https://www.flickr.com/ photos/ores2k/394359583
50. Image requested HTML requested CSS and JS requested HTML parsing starts Image requested Image requested Image requested
51. CSS evaluation beginning
52. CSS evaluation beginning Images are downloaded before size is known The only thing the lookahead pre-parser knows is the size of the viewport.
53. <img src="cat.jpg" alt="cat" srcset="cat-160.jpg 160w, cat-320.jpg 320w, cat-640.jpg 640w, cat-1280.jpg 1280w">
54. Images are nearly same size as viewport
55. 1540px 254px Viewport Tells Us Little
56. Tug of war between responsive images and the lookahead pre-parser.
57. https://www.flickr.com/photos/davechiu/24165369 https://www.flickr.com/photos/ostrosky/4149725733
58. 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.
59. 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
60. 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/
61. ~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
62. sizes https://www.flickr.com/photos/ashleyrosex/2861690380
63. <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
64. 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"
65. sizes=" (max-width: 480px) 100vw, (max-width: 900px) 33vw, 254px"
66. sizes=" (max-width: 480px) 100vw, (max-width: 900px) 33vw, 254px"
67. sizes=" (max-width: 480px) 100vw, (max-width: 900px) 33vw, 254px"
68. What about separation of content from style?
69. Sizes is a necessary compromise:
 responsive images and speculative downloading
70. srcset and sizes let browsers be smart https://www.flickr.com/photos/alicejamieson/3164148439
71. <picture?>
72. Art Direction http://www.gratisography.com/
73. <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
74. Shopify using <picture> for art direction
75. 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
76. another use for <picture> https://www.flickr.com/photos/delete08/4869608487
77. 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>
78. 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/
79. 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/
80. http://www.gratisography.com/
81. inline image tricks https://www.flickr.com/photos/sk8mama/238533452
82. inline image tricks https://www.flickr.com/photos/sk8mama/238533452
83. What about CSS? https://www.flickr.com/photos/mauriz/4059476052
84. http://www.gratisography.com/ https://www.flickr.com/photos/shaheershahid/3635625771
85. http://www.gratisography.com/ https://www.flickr.com/photos/shaheershahid/3635625771 Art Direction Resolution Switching
86. Resolution Switching
87. image-set()
88. works for any CSS that takes images (e.g., border-image) display density => precursor to srcset, similar syntax does not, yet, support declaring image widths background-image: image-set( "foo.png" 1x, "foo-2x.png" 2x);
90. Art Direction http://www.gratisography.com/
91. media queries!
92. old style, webkit only resolution media query, max-resolution also valid dots per inch (dpi), dots per centimeter (dpcm) or dots per px unit (dppx) Due to the 1:96 fixed ratio of CSS in to CSS px, 1dppx is equivalent to 96dpi https://developer.mozilla.org/en-US/docs/Web/CSS/resolution @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { /* High density stuff here */ }
93. image breakpoints
94. http://www.gratisography.com/ Art direction may dictate image breakpoints
95. https://www.flickr.com/photos/photosdavidgabrielfischer/15706338457 Image breakpoints for resolution switching.
96. For responsive design breakpoints, resize the browser until the page looks bad then… BOOM! you need a breakpoint.
97. 2000 x 3010 761K 200 x 301 15K How many image breakpoints?
98. 2000 x 3010 761K 200 x 301 15K Scaled down images don’t look bad.
99. 2000 x 3010 250K 400 x 602 Actual size in page 800 x 1204 73K
100. 2000 x 3010 250K 400 x 602 Actual size in page 800 x 1204 73K 600 x 903 42K
101. 400 x 602 Actual size in page 800 x 1204 73K 600 x 903 42K 500 x 753 31K 450 x 678 27K
102. 400 x 602 Actual size in page
103. 400 x 602 Actual size in page Is the only intrinsic information we have about image size.
104. 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 “
105. What is a sensible jump in file size?
106. Images compress differently Both images are 960x660 pixels 151K, JPEG 13K PNG
107. Responsive Images Performance Budget
108. Source image: 500x333 58K What is the cost of flexible images?
109. Source image: 500x333 58K What is the cost of flexible images? Size in page: 300x200 24K Making this image flexible costs 34K.
110. What if we set a performance budget of 20K per image for flexible images?
111. 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
112. Width Height File Size 320 213 9K 731 487 29K 990 660 40K 3 image breakpoints https://www.flickr.com/photos/lyza/6210160407
113. 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
114. Width Height File Size 990 660 13K 1 image breakpoint
115. 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
116. Humans shouldn’t be doing this work. https://www.flickr.com/photos/jdhancock/7801182534/
117. https://www.flickr.com/photos/lendingmemo/11747440176
118. 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?
119. Real life example: hero images
120. Hero images are usually large promo images
121. Full requirements for a hero image:
122. Full requirements for a hero image: A box for marketing.
123. In an ideal world, you build HTML5 hero images…
124. Instead, maybe all hero images consist of HTML text placed on an image.
125. And every image you use has spots set aside just for your text.
126. But that may not be practical for your site.
127. Maybe just give them a box? Image breakpoints FTL
130. Image Breakpoints Name Width Height Max Width Min Width Large 1080 360 n/a 781 Medium 780 320 780 541 Small 540 270 540 n/a Text readability dictated 3 image breakpoints Need to support 16 pt in this font? Requires 4 breakpoints.
131. This worked for one project. Your project will likely be different.
132. But surveying your images will help you figure it out. https://www.flickr.com/photos/nate2009/13971372001
133. 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
134. Big Hope: Automation https://www.flickr.com/photos/clement127/15631803492
135. http://scottjehl.github.io/picturefill/ Picturefill is the polyfill.
136. https://www.drupal.org/project/picture Drupal Picture Module
137. https://wordpress.org/plugins/ricg-responsive-images/ Wordpress Responsive Images Plugin
138. Image resizing services http://bit.ly/image-services
139. https://www.flickr.com/photos/mariachily/5250487136 Responsive images can seem daunting…
140. https://www.flickr.com/photos/zeldman/14847023657 And you may feel like giving up…
141. Remember, you’re not alone… https://www.flickr.com/photos/max-design/3751402935
143. We will build tools to make the climb easier…
144. We merely need to take the first steps. https://www.flickr.com/photos/akras/1477140536
145. https://flickr.com/photos/ ekosystem/4334671818
146. http://www.gratisography.com/
147. 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!