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

Why Responsive Images?

Why Responsive Images?

Presented at Responsive Day Out


Jason Grigsby

June 19, 2015

More Decks by Jason Grigsby

Other Decks in Technology


  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

  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

  55. None
  56. None
  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

  59. But surveying your images will help you figure it out.

  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

  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!