The tag is used to provide the browser information to select the most appropriate image including changing aspect ratios and cropping.

Peakhour allows maintaining a single source image, avoiding the requirement of pre-processing images for each viewport size.

Dynamic image resizing

Change your browser window size to see how the URL parameters crop the image appropriately based on the media query.

<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 supporting multiple pixel resolutions. There is no need to pre-process multiple sets of images, just create a master copy and use the appropriate mark up to create multiple variations as your design needs change.

By adding DPR variations to each srcset the HTML code could look like this:

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