Responsive images and art direction

Responsive images are often implemented with the srcset attribute. The srcset attribute is a comma-separated list of image filenames and their width or density descriptors.

To prevent layout shifts, set the width and height attributes on <img> and <source> tags that use srcset.

Density descriptors

To create responsive images that use density descriptors:

  • All images listed in src and srcset should have the same aspect ratio.
  • Set the width and height attributes to match the dimensions of the 1x image.
  • The src attribute should refer to the 1x image.

Width descriptors

To create responsive images that use width descriptors:

  • All images listed in src and srcset should have the same aspect ratio.
  • The width and height attributes should match the dimensions of the fallback image.
  • Adjust image styling as needed. Without CSS, if you set a width and height on a responsive image that has width descriptors, the image always renders at that set size. This is true even when the images listed in srcset have varying dimensions. This behavior may not be what you want. Add width: 100%; height: auto; or width: 100vw; height: auto; to your image style may give you the visual appearance you want.

Picture elements

To create responsive <picture> elements:

  • Set the width and height attributes for all <source> tags. The appropriate values for these attribute depend on how the <source> tag uses srcset.
  • Adjust the image by styling the corresponding <img> tag. The <source> tag is an empty element, and therefore style has no affect.
  • Set the width and height attributes on the <img> tag. These values should match the intrinsic size of the fallback image.

Examples

HTML

<!-- Using density descriptors -->
<img width="480" height="330"
    srcset="cat-1x.jpg, cat-2x.jpg 2x, cat-3x.jpg 3x"
    src="cat-1x.jpg"
    alt="Photo of a cat on a green background">
<!-- Using width descriptors -->    
<img width="256" height="128"
    srcset="dog-256w.jpg 256w, dog-512w.jpg 512w, dog-1028w.jpg 1028w"
    src="dog-256w.jpg"
    alt="Photo of a dog on a orange background">
<!-- Picture tag -->
<picture>
    <source media="(max-width: 720px)" width="600" height="300" srcset="newyork-rectangle.jpg" />
    <source media="(min-width: 721px)" width="600" height="600" srcset="newyork-square-1x.jpg, newyork-square-2x.jpg 2x, newyork-square-3x.jpg 3x" />
    <img src="newyork-rectangle.jpg" width="600" height="300" alt="Photo of the Empire State Building">
</picture>