Why Responsive Images?

Presented at Responsive Day Out

Transcript

1. Responsive images have landed
2. Shipped Development
3. Why Responsive Images? Jason Grigsby • @grigs • cloudfour.com Photo by http://www.gratisography.com/
4. Why can’t I let go of responsive images?
5. http://www.flickr.com/photos/cdm/51747860/ 1. Responsive images provide interesting puzzles.
6. Use Cases https://www.flickr.com/photos/cgb_bbear/3082932860
7. https://www.flickr.com/photos/whitehouse/8491445521 Resolution Switching Includes high-density (retina) images.
8. Art direction http://www.flickr.com/photos/barackobamadotcom/5795228030/
9. http://www.flickr.com/photos/barackobamadotcom/5795228030/ Art direction
10. http://www.flickr.com/photos/barackobamadotcom/5795228030/ Art direction
11. http://www.flickr.com/photos/barackobamadotcom/5795228030/ Art direction
12. http://www.flickr.com/photos/barackobamadotcom/5795228030/ Art direction
13. Not simply cropping
14. Art direction: Images with text
15. image breakpoints
16. http://www.gratisography.com/ Art direction may dictate image breakpoints
17. https://www.flickr.com/photos/photosdavidgabrielfischer/15706338457 Image breakpoints for resolution switching.
18. For responsive design breakpoints, resize the browser until the page looks bad then… BOOM! you need a breakpoint.
19. 2000 x 3010 761K 200 x 301 15K How many image breakpoints?
20. 2000 x 3010 761K 200 x 301 15K Scaled down images don’t look bad.
21. 2000 x 3010 250K 400 x 602 Actual size in page 800 x 1204 73K
22. 2000 x 3010 250K 400 x 602 Actual size in page 800 x 1204 73K 600 x 903 42K
23. 400 x 602 Actual size in page 800 x 1204 73K 600 x 903 42K 500 x 753 31K 450 x 678 27K
24. 400 x 602 Actual size in page
25. 400 x 602 Actual size in page Is the only intrinsic information we have about image size.
26. 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 “
27. What is a sensible jump in file size?
28. Images compress differently Both images are 960x660 pixels 151K, JPEG 13K PNG
29. Responsive Images Performance Budget
30. Source image: 500x333 58K What is the cost of flexible images?
31. Source image: 500x333 58K What is the cost of flexible images? Size in page: 300x200 24K Making this image flexible costs 34K.
32. What if we set a performance budget of 20K per image for flexible images?
33. 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
34. Width Height File Size 320 213 9K 731 487 29K 990 660 40K 3 image breakpoints https://www.flickr.com/photos/lyza/6210160407
35. 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
36. Width Height File Size 990 660 13K 1 image breakpoint
37. Impact of image resizing on memory usage Source: https://speakerdeck.com/tkadlec/mobile-image-processing-at-velocity-sc-2015
38. 200 x 200 600 x 600 Source: https://speakerdeck.com/tkadlec/mobile-image-processing-at-velocity-sc-2015
39. 150 x 150 550 x 550 Source: https://speakerdeck.com/tkadlec/mobile-image-processing-at-velocity-sc-2015
40. (200 x 200 - 150 x 150) x 4 = 70,000 wasted bytes (600 x 600 - 550 x 550) x 4 = 230,000 wasted bytes Source: https://speakerdeck.com/tkadlec/mobile-image-processing-at-velocity-sc-2015
41. 200px 1200px 700px
42. 200px 1200px 700px Need more image sources at larger sizes Source: https://speakerdeck.com/tkadlec/mobile-image-processing-at-velocity-sc-2015
43. 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
44. https://www.flickr.com/photos/lendingmemo/11747440176
45. 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?
46. Real life example: hero images
47. Hero images are usually large promo images
48. Full requirements for a hero image:
49. Full requirements for a hero image: A box for marketing.
50. In an ideal world, you build HTML5 hero images…
51. Instead, maybe all hero images consist of HTML text placed on an image.
52. And every image you use has spots set aside just for your text.
53. But that may not be practical for your site.
54. Maybe just give them a box? Image breakpoints FTL
57. 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.
58. This worked for one project. Your project will likely be different.
59. But surveying your images will help you figure it out. https://www.flickr.com/photos/nate2009/13971372001
60. 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
61. http://www.flickr.com/photos/talkephotography/4523849236/ Creative Commons BY-NC-SA 2.0 2. Responsive images present great opportunities.
62. Browsers can make smart decisions if we let them. https://www.flickr.com/photos/vandergus/3349636231 Creative Commons BY-NC-SA 2.0
63. MUST media =
64. options image-set, srcset, and sizes =
65. 402 x 606 Actual size in page 400 x 603 Image Source #1 800 x 1204 Image Source #2 Sometimes upscaling makes sense
66. srcset and sizes let browsers be smart https://www.flickr.com/photos/alicejamieson/3164148439
67. another use for <picture> https://www.flickr.com/photos/delete08/4869608487
68. 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>
69. 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/
70. 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/
71. http://www.gratisography.com/
72. 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!