The tag is a powerful tool for providing the browser with information about the most appropriate image to display. This can include changing aspect ratios and cropping. With the tag, you can maintain a single source image, eliminating the need to pre-process images for each viewport size.

Dynamic image resizing

With the < picture> tag, you can change the appearance of an image based on the browser window size. The following example shows how URL parameters are used to crop the image based on media queries:

<picture>
  <source
   srcset="/images/unsplash-kiss.jpg?w=1280"
   media="(min-width: 1280px)"
  >
  <source
    srcset="/images/unsplash-kiss.jpg?w=768&h=1024&fit=crop"
    media="(min-width: 768px)"
  >
  <source
    srcset="/images/unsplash-kiss.jpg?w=568&h=320&fit=crop"
    media="(min-width: 480px)"
  >
  <img src="/images/unsplash-kiss.jpg?w=320&h=568&fit=crop">
</picture>

DPR selection

The tag also allows you to support multiple pixel resolutions with just one master copy. You don't need to pre-process multiple sets of images. Instead, you can use the appropriate markup to create different variations as your design needs change.

Here is an example of how to add DPR variations to each srcset in your HTML code:

<picture>
  <source
    srcset="/images/unsplash-kiss.jpg?w=1280 1x,
            /images/unsplash-kiss.jpg?w=1280&dpr=2 2x"
    media="(min-width: 1280px)"
  >
  <source
    srcset="/images/unsplash-kiss.jpg?w=768&h=1024&fit=crop 1x,
            /images/unsplash-kiss.jpg?w=768&h=1024&fit=crop&dpr=2 2x"
    media="(min-width: 768px)"
  >
  <source
    srcset="/images/unsplash-kiss.jpg?w=568&h=320&fit=crop 1x,
            /images/unsplash-kiss.jpg?w=568&h=320&fit=crop&dpr=2 2x"
    media="(min-width: 480px)"
  >
  <img src="/images/unsplash-kiss.jpg?w=320&h=568&fit=crop 1x,
            /images/unsplash-kiss.jpg?w=320&h=568&fit=crop&dpr=2 2x">
</picture>