Responsive images have landed

An introduction to responsive images standards: , @srcset and @sizes.

Transcript

1. Responsive images ! Derek Johnson
2. <img src alt>
5. • Resolution switching • Viewport based • Pixel density • Art direction • Design breakpoints • Media types • Relative units • Image formats • User control of source
6. <img src alt srcset>
7. srcset= “cat.jpg 1x, cat2.jpg 2x”
11. srcset= “cat.jpg 300w, cat2.jpg 600w”
19. srcset= “cat.jpg 300w, cat2.jpg 600w” sizes= “(min-width:50em) 30vw, (min-width:20em) 50vw, 100vw”
27. <picture> <source srcset media> <source srcset media> <img src alt> </picture>
28. <picture> <source srcset type> <source srcset type> <img src alt> </picture>
29. <picture> <source srcset="images/asio-otus-300.webp 300w, images/asio-otus-400.webp 400w, images/asio-otus-600.webp 600w, images/asio-otus-800.webp 800w" sizes="(min-width:78.947em) 18.75em, (min-width:74em) 23.75vw, (min-width:60em) 31.6666667vw, (min-width:38em) 47.5vw, 95vw" type="image/webp"> <source srcset="images/asio-otus-300.jpg 300w, images/asio-otus-400.jpg 400w, images/asio-otus-600.jpg 600w, images/asio-otus-800.jpg 800w" sizes="(min-width:78.947em) 18.75em, (min-width:74em) 23.75vw, (min-width:60em) 31.6666667vw, (min-width:38em) 47.5vw, 95vw" type="image/jpeg"> <img src="images/asio-otus-300.jpg" alt="Long eared owl"> </picture>
30. browser support
31. polyfill