Successfully reported this slideshow.
Your SlideShare is downloading. ×

Lightning Talk: Responsive Images

Ad

<img alt="Ferrari" src="ferrari.png">

Ad

image credit: ericportis.com/posts/2014/srcset-sizes

Ad

image credit: ericportis.com/posts/2014/srcset-sizes

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Loading in …3
×

Check these out next

1 of 22 Ad
1 of 22 Ad

Lightning Talk: Responsive Images

Download to read offline

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/

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/

More Related Content

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

×