Responsive Images

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

max-width or overflow: hidden The current way

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

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.

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

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

<picture>, srcset and sizes B <picture>, srcset and sizes The new way

<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>

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.

<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.

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

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.

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.

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

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.

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>

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

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.

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