As total page weight recommendations for mobile devices being 500kb, optimising images and lazy loading them is important to ensure an optimally performant site.

Larger images require additional network time, slowing the overall speed index of a page. Larger images also require additional CPU time for decompression which is often a constrained resource on mobile devices.

srcset

provides a way to specify alternate images for differing device resolutions.

Requires pre-processing and multiple images on your server.

<img
  srcset="/images/asset.png 1x, /images/asset-2x.png 2x, /images/asset-3x.png 3x"
  src="/images/asset.png"
>

This technique allows the browser to select the most appropriate resolution based on its hardware characteristics, however adds complications to the developer and deployment workflow ensuring all images are generated and uploaded for the site.

Modern srcset

By utilising Peakhour's w and dpr URL parameters, we can use a single master image and avoid these complexities altogether.

<img
  srcset="/images/bluehat.jpg?w=400 1x,
          /images/bluehat.jpg?w=400&dpr=2 2x,
          /images/bluehat.jpg?w=400&dpr=3 3x"
  src="/images/bluehat.jpg?w=400"
>

By using the image transformation feature, we obtain the best resolution for each device based on its DPR capabilities.

srcset and sizes

srcset can be combined with the sizes attribute giving the developer the ability to target sizes based off media queries.

The following snippet demonstrates sizing multiple images based on the viewport size.

<img
  srcset="/images/bridge.jpg?w=1024&h=1024&fit=crop ;1024w,
          /images/bridge.jpg?w=640&h=640&fit=crop ;640w,
          /images/bridge.jpg?w=480&h=480&fit=crop ;480w"
  src="/images/bridge.jpg?w=640&h=640&fit=crop"
  sizes="(min-width: 36em) 33.3vw, 100vw"
>