Why Responsive Images?

Why Responsive Images?

Presented at Responsive Day Out

Dac45089aeda3bca56193072601a49d4?s=128

Jason Grigsby

June 19, 2015
Tweet

Transcript

  1. 18.

    For responsive design breakpoints, resize the browser until the page

    looks bad then… BOOM! you need a breakpoint.
  2. 20.
  3. 22.

    2000 x 3010 250K 400 x 602 Actual size in

    page 800 x 1204 73K 600 x 903 42K
  4. 23.

    400 x 602 Actual size in page 800 x 1204

    73K 600 x 903 42K 500 x 753 31K 450 x 678 27K
  5. 25.

    400 x 602 Actual size in page Is the only

    intrinsic information we have about image size.
  6. 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 “
  7. 31.

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

    images? Size in page: 300x200 24K Making this image flexible costs 34K.
  8. 32.
  9. 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
  10. 34.

    Width Height File Size 320 213 9K 731 487 29K

    990 660 40K 3 image breakpoints https://www.flickr.com/photos/lyza/6210160407
  11. 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
  12. 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
  13. 42.

    200px 1200px 700px Need more image sources at larger sizes

    Source: https://speakerdeck.com/tkadlec/mobile-image-processing-at-velocity-sc-2015
  14. 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
  15. 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?
  16. 55.
  17. 56.
  18. 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.
  19. 59.

    But surveying your images will help you figure it out.

    https://www.flickr.com/photos/nate2009/13971372001
  20. 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
  21. 65.

    402 x 606 Actual size in page 400 x 603

    Image Source #1 800 x 1204 Image Source #2 Sometimes upscaling makes sense
  22. 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>
  23. 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/
  24. 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/
  25. 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!