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

by | January 18, 2021 | Website Development

This page may contain affiliate links to recommended products or services. If you choose to purchase after clicking a link, I may receive a commission at no additional cost to you.

Last updated on: February 7, 2023

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

Specify a normal fallback for people viewing your website using low-quality or older browsers with the src attribute’s 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" />

The image is fluid-width and changes with the size of the browser.

srcset

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. Instead of writing the screen resolution ratio (like 1.5) you want to add the image’s native pixel width with a designation of w in place of px.

sizes

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

Explanation

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 saying display the next largest specified image at 100% of the viewport’s width when the browser is wider than 568px.

The browser loops through each size’s value and finds the first matching size. It uses the image’s closest-sized option from the srcset.

Floyd Hartford is a website developer from southern Maine. He's focused on creating and building WordPress websites and loves spending time digging into code like HTML, CSS, scss, jQuery, PHP, and MySQL.

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

8 + fifteen =

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

Looking for WordPress Help?

I’m a freelance web developer specializing in small business and corporate marketing websites.

Pin It on Pinterest