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

Responsive Images are Here. Now What?

Jason Grigsby
October 06, 2015

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.

Jason Grigsby

October 06, 2015
Tweet

More Decks by Jason Grigsby

Other Decks in Technology

Transcript

  1. Responsive Images Are Here. Now What? Jason Grigsby • @grigs

    • cloudfour.com Photo by http://www.gratisography.com/
  2. <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" />
  3. 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>
  4. ”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.” “
  5. ”Long story short, I don't think anyone should use images

    on the web.” https://www.flickr.com/photos/zeldman/7727532846
  6. ”Long story short, I don't think anyone should use images

    on the web.” https://www.flickr.com/photos/zeldman/7727532846
  7. 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%,
  8. 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…
  9. <img> Icon made by Daniel Bruce from www.flaticon.com is licensed

    under CC BY 3.0 <picture> <source> srcset media sizes type
  10. <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/
  11. 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">
  12. Image requested HTML requested CSS and JS requested HTML parsing

    starts Image requested Image requested Image requested
  13. CSS evaluation beginning Images are downloaded before size is known

    The only thing the lookahead pre-parser knows is the size of the viewport.
  14. 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
  15. ~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
  16. <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
  17. 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"
  18. <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
  19. Shopify using <picture> for art direction <picture> <source srcset="[email protected], [email protected]

    2x" media="(min-width: 990px)"> <source srcset="[email protected], [email protected] 2x" media="(min-width: 750px)"> <img srcset="[email protected], [email protected] 2x" alt="Shopify Merchant, Corrine Anestopoulos"> </picture> Simplified markup
  20. 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>
  21. 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/
  22. 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/
  23. 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);
  24. 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 */ }
  25. For responsive design breakpoints, resize the browser until the page

    looks bad then… BOOM! you need a breakpoint.
  26. 2000 x 3010 250K 400 x 602 Actual size in

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

    73K 600 x 903 42K 500 x 753 31K 450 x 678 27K
  28. 400 x 602 Actual size in page Is the only

    intrinsic information we have about image size.
  29. 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 “
  30. Source image: 500x333 58K What is the cost of flexible

    images? Size in page: 300x200 24K Making this image flexible costs 34K.
  31. 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
  32. Width Height File Size 320 213 9K 731 487 29K

    990 660 40K 3 image breakpoints https://www.flickr.com/photos/lyza/6210160407
  33. 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
  34. 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
  35. 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?
  36. 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.
  37. But surveying your images will help you figure it out.

    https://www.flickr.com/photos/nate2009/13971372001
  38. 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
  39. 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!