1. Responsive Images

3. A B
Approach A max-width or overflow: hidden Approach B <picture>, srcset and sizes

4. max-width or overflow: hidden
The current way

5. img {
width: 100%;
height: auto; }

6. max-width img { max-width: 100%; height: auto; }
The image will never get bigger than its container.
Can be used on other types of media such as videos and embedded elements.

7. overflow: hidden div { overflow: hidden }
Cuts the image off before it goes outside the container
Not ideal unless the image is a pattern or similar

8. Browser support for max-width and overflow
CSS min/max-width/height
overflow (visible | hidden | scroll | auto)
Browser support for max-width and overflow

9. <picture>, srcset and sizesB
<picture>, srcset and sizes
The new way

10. <picture>
The <picture> allows for declaring multiple sources for an image. Its source attributes are used to choose one of the listed images based on different conditions in the browser, and is then fed into the <img>.
<picture>
<source media=“(min-width: 1000px)”
srcset=“large.jpg”>
<source media=“(min-width: 780px)”
srcset=“medium.jpg”>
<img src=“small.jpg”>
</picture>

11. Source attributes srcset sizes media type
Specifies the URL of the image to use in different situations. <picture> or <img>. Specifies image sizes for different page layouts. <picture> or <img>. Specifies media queries to determine a source. <picture> required. Specifies a type for the sources given in the srcset attribute. <picture> required.

12. <picture> srcset and sizes
Giving the browser rules it must follow.
Providing the browser with information it is missing.
We want to let the browser decide on the image as it can optimize better for performance that way while also take user preferences and network connectivity into account.

13. Use cases Fluid Art direction Pixel ratio Type switch
When we have a fluid layout and need our images to resize accordingly. When we want to crop our images differently to fit in with the content. When have images that need to render well at different device-pixel-ratios. When we want to adapt our image format depending on what browsers support them.
Fluid
Art direction
Pixel ratio
Type switch

14. Fluid images - srcset srcset specifies the URL of the image to use.
large.jpg (1024 x 768 px) for big screens.
medium.jpg (640 x 480 px) for medium screens.
small.jpg (320 x 240 px) for small screens.
<img srcset=“large.jpg 1024w, medium.jpg 640w, small.jpg 320w”>
w descriptors describe the width of the file, in pixels.

15. Fluid images – sizes
sizes tells the browser how many pixels it needs by describing the final desired width of the image within our layout.
<img srcset="large.jpg 1024w, medium.jpg 640w, small.jpg 320w” sizes="(min-width: 36em) 33.3vw, 100vw”> breakpoint
vw descriptor stating the % of the width of the container. We want the image to be 33.3% wide.
default width that applies if the breakpoint isn’t relevant.

16. Art direction portrait.jpg (192 × 192 px) landscape.jpg (320 × 240 px)
<picture>
<source media=“(max-width: 25em)” srcset=“portrait.jpg”>
<img src=“landscape.jpg”>
</picture>
If the screen is smaller than 25em
If the screen is bigger than 25em

17. Pixel ratio small.jpg (320 x 240 px) for low resolution screens.
large.jpg (640 x 480 px) for high resolution screens.
lower resolution= 1x
higher resolution= 2x
<img srcset=“small.jpg 1x, large.jpg 2x”>
x descriptor stating the device-pixel-ratio that that file is intended for.

18. Type switch puppy.svg puppy.png puppy.gif <picture>
<source type="image/svg" srcset=”puppy.svg”> <source type="image/png" srcset=”puppy.png”>
<img src=”puppy.gif”>
</picture>

19. Browser support for <picture> and srcset
Picture element
Srcset attribute
Browser support for <picture> and srcset

20. Background images background-size:
contain
100% 100%
cover
Image will scale to fit the content area while keeping aspect ratio.
Image will stretch to cover the area.
Image will scale to cover the are while keeping aspect ratio. Risk for cropping.

21. Browser support for background-size
Background-image options
Browser support for background-size