How to Code Responsive Website Images Using Srcset and Sizes Media Queries

Wondering how to code responsive website images? Normal HTML img tags let you specify and use a single image – they're screen-size independent. Responsive images kick your website up a notch and take img tags to the next level by incorporating srcset and sizes attributes, too. Responsive images let you specify appropriately sized images for the screen size your site's being viewed on.

The three basic building blocks – or attributes – of responsive images are:

  • srcset
  • sizes
  • src

srcset provides different image options for different screen sizes.

sizes provides the sizes at which the srcset options should be used.

src is a normal basic image fallback incase the browser is old and doesn't support img srcset.

Fixed Width Responsive Images

Here's a basic example of using img with only the srcset attribute.

<img srcset="image-440.jpg 1x, image-660.jpg 1.5x, image-880.jpg 2x" src="image-440.jpg" alt="responsive fixed width image" />

In this scenario, you know the image is always going to be the same size. 

srcset accepts a comma separated list of values and allows you to set different images for different browser resolutions (i.e. 1x, 1.5x, 2x, etc.).

If the person viewing your website is using a low-quality or older browser (like Internet Explorer) you can specify a normal fallback using the src value.

Fluid Width Responsive Images

Here's a basic example of using img with srcset and sizes attributes.

<img
srcset="image-568.jpg 568w, 
        image-960.jpg 960w"
sizes="(max-width: 568px) 50vw, 100vw"
src="image-960.jpg"
alt="responsive fluid width image" />

In this scenario, the image is fluid-width and changes with the size of the browser.

The same as before, srcset specifies the images available for use. One notable difference is we're no longer specifying an image based on screen resolution, but instead specifying images by the values in sizes. And, instead of writing the screen resolution ration (like 1.5) you want to add the images native pixel width with a designation of w in place of px.

sizes tells the browser the size to display the images at the specified breakpoints. The last value in sizes isn't paired with a breakpoint and acts as the default when none of the prior media queries are matched. In this case, any browser widths above 568px with set the image's width to 100vw (i.e. 100% of the viewport).

In this example, we're telling the browser to display the image at 50% of the viewport's width and use the closest image size specified to 568px up until the browser reaches a maximum width of 568px. Then we're telling the browser to display the next larger specified image at 100% of the viewport's width when the browser is wider than 568px. The browser goes through each sizes value, finds the first one that matches, and uses the image closest sized image from the srcset..

This is a basic example and if you wanted to make it more complex you certainly could.