Using Srcset

As mobile devices become more varied,
optimising image delivery matters.
Keep mobile page weight low,
use lazy loading,
and minimise network and CPU time.

The srcset attribute lets the browser choose
the right image for each device resolution.
Without an image transformation service,
that usually means pre-processing and uploading
multiple image files.

Responsive image delivery diagram showing srcset, sizes, client hints, and auto optimize format flowing through Peakhour to device-specific variants. — `srcset` and `sizes` describe the browser's layout choices; Peakhour turns those choices into optimized image variants.

<img
  srcset="/images/bluehat.jpg 1x,
          /images/bluehat.jpg 2x,
          /images/bluehat.jpg 3x"
  src="/images/bluehat.jpg"
>

A more modern approach to responsive images is to use the w and dpr URL parameters offered by image transformation services like Peakhour. This method enables developers to use a single master image and avoid the complexities of generating and uploading multiple images to their site.

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

With this approach, the browser selects the best resolution for each device based on its DPR capabilities, simplifying the development and deployment process.

In addition to srcset, the sizes attribute can be used to target image sizes based on media queries. This attribute, combined with srcset, gives developers the ability to choose different image resolutions based on the size of the viewport.

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

Using srcset and sizes attributes provides an effective solution for optimising images for responsiveness and ensuring optimal performance on mobile devices. By utilising image transformation services and combining srcset with sizes, developers can simplify the process and achieve the best possible resolution for each device.