Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Lightning Talk: Responsive Images

12 views

Published on

Let's talk about the `srcset` and `sizes` attributes, a progressive enhancement technique that allows the browser to choose the best image for the user's device. We'll also talk about the new `picture` element, and how it can be used for more advanced use cases like art direction or supporting new image formats.

Learn More:

`srcset` and `sizes` by Eric Portis: https://ericportis.com/posts/2014/srcset-sizes/

Responsive Images 101 by Jason Grigsby: https://cloudfour.com/thinks/responsive-images-101-part-9-image-breakpoints/

The Anatomy of Responsive Images by Jake Archibald: https://jakearchibald.com/2015/anatomy-of-responsive-images/

Published in: Internet
  • Be the first to comment

  • Be the first to like this

Lightning Talk: Responsive Images

  1. 1. <img alt="Ferrari" src="ferrari.png">
  2. 2. image credit: ericportis.com/posts/2014/srcset-sizes
  3. 3. image credit: ericportis.com/posts/2014/srcset-sizes
  4. 4. image credit: ericportis.com/posts/2014/srcset-sizes
  5. 5. image credit: ericportis.com/posts/2014/srcset-sizes
  6. 6. How can we give the browser the right image size?
  7. 7. <img alt="Ferrari" src="ferrari.png" srcset="ferrari-320.png 320w, ferrari-640.png 640w, ferrari-960.png 960w, ferrari-1280.png 1280w, ferrari-1920.png 1920w, ferrari-2560.png 2560w"> widths of the image sources fallback for browsers that don’t get srcset image URLs browser picks best source from set, including retina!
  8. 8. image credit: cloudfour.com/thinks/responsive-images-101-part-9-image-breakpoints
  9. 9. image credit: cloudfour.com/thinks/responsive-images-101-part-9-image-breakpoints
  10. 10. image credit: cloudfour.com/thinks/responsive-images-101-part-9-image-breakpoints
  11. 11. <img alt="Ferrari" src="ferrari.png" srcset="ferrari-320.png 320w, ferrari-640.png 640w, ferrari-960.png 960w, ferrari-1280.png 1280w, ferrari-1920.png 1920w, ferrari-2560.png 2560w"> standard image size array
  12. 12. How can we tell the browser what size our image will display?
  13. 13. <img alt="Ferrari" src="ferrari.png" sizes="(min-width: 1023px) 780px, (min-width: 675px) 620px, 100vw" srcset="ferrari-320.png 320w, ferrari-640.png 640w, ferrari-960.png 960w, ferrari-1280.png 1280w, ferrari-1920.png 1920w, ferrari-2560.png 2560w"> width of window width of image when condition matches default width when no condition matches browser uses first condition that matches
  14. 14. <img alt="Ferrari" src="ferrari.png" sizes="(min-width: 1023px) 780px, (min-width: 675px) 620px, 100vw" srcset="ferrari-320.png 320w, ferrari-640.png 640w, ferrari-960.png 960w, ferrari-1280.png 1280w, ferrari-1920.png 1920w, ferrari-2560.png 2560w"> 5. So please pick the best image for right now. 4. …which are this wide 3. You can choose from any of these images… 1. At this screen size, 2. I will be displayed at roughly this size.
  15. 15. What if we want different image crops per breakpoint?
  16. 16. <picture> <!-- square aspect ratio --> <source media="(max-width: 380px)" sizes="380px" srcset="ferrari-380.jpg 380w, ferrari-760.jpg 760w"> <!-- 16:9 aspect ratio --> <img alt="Ferrari" src="ferrari.jpg" sizes="(min-width: 641px) 100vw, 640px" srcset="ferrari-640.jpg 640w, ferrari-960.jpg 960w, ferrari-1280.jpg 1280w, ferrari-1920.jpg 1920w, ferrari-2560.jpg 2560w"> </picture> if this query matches use these sources …else these sources picture contains sources
  17. 17. What if we want to support new image filetypes?
  18. 18. <picture> <source type="image/webp" sizes="(min-width: 1023px) 780px, (min-width: 675px) 620px, 100vw" srcset="ferrari-320.webp 320w, ferrari-640.webp 640w, ferrari-960.webp 960w, ferrari-1280.webp 1280w, ferrari-1920.webp 1920w, ferrari-2560.webp 2560w"> <img alt="Ferrari" src="ferrari.png" sizes="(min-width: 1023px) 780px, (min-width: 675px) 620px, 100vw" srcset="ferrari-320.png 320w, ferrari-640.png 640w, ferrari-960.png 960w, ferrari-1280.png 1280w, ferrari-1920.png 1920w, ferrari-2560.png 2560w"> </picture> if this type is supported use these sources …else these sources
  19. 19. What about browser support?
  20. 20. caniuse.com/#search=srcset
  21. 21. Learn More • `srcset` and `sizes` by Eric Portis:
 ericportis.com/posts/2014/srcset-sizes • Responsive Images 101 by Jason Grigsby:
 cloudfour.com/thinks/responsive-images-101-definitions • The Anatomy of Responsive Images by Jake Archibald:
 jakearchibald.com/2015/anatomy-of-responsive-images

×