Responsive images with srcset and sizes

Wouter van der Zee
Nov 21, 2016 · 7 min read

These new attributes are available for some time now. However, I didn’t manage to understand it fully. There are great articles explaining this new syntax. But I couldn’t wrap my head around it. And especially, I missed in those articles how one could apply srcset and sizes to real world problems.

So, that’s why I wrote this article about srcset and sizes. It comes with an example of a common website layout: a page with sidebar. I hope it will help you better understand srcset and sizes and how to apply it to your website projects.

Why using srcset and sizes?

Let’s start with the beginning. Why even use srcset and sizes? I see two advantages:

  • serving better images to the user,
  • improving the website loading time

With srcset and sizes it is possible to offer multiple sizes of the same image. The browser does the calculation (yeah!) and chooses the best size to display to the user. Browser support of srcset and sizes is good and the fallback is perfect. More about browser support at the end of this article.

The browser does the calculation and chooses the best size to display to the user.

The browser not only takes into account the width of the screen (viewport width), but also the pixel density. Whether a user is viewing your website on a desktop screen with low resolution or a tablet screen with high resolution, the browser chooses the best size.

Because you can offer multiple sizes of the same image, you can improve the loading time of your site. It’s no longer needed to serve that big hero image on a small screen. With srcset and sizes you can offer a smaller size which will be used by the browser. This results in a faster website. And most users will appreciate that!

I think we have sufficient reasons to get acquainted with srcset and sizes.

How srcset and sizes works

An example of an <img> tag with the new srcset and sizes attributes:

To make it a little easier to read:

Let us walk through each part.

As with each <img> tag, you just use the alt text.

The familiar way to specify the location of your image. Browsers that do not support srcset and sizes will fallback to src.

This is where the magic begins. With scrset you specify a list of the image in different sizes. In this example we have three sizes of the same image. Behind the file name of each image you specify the width in pixels (w of width). For example, small.jpg 240w means that this image is 240px wide.

With sizes you specify the size of the image and in which situation it must be displayed. This is done by a combination of a media query and the width of the image. For me, sizes was the most difficult part to understand. But I think it’s also the most powerful one.

The above code for sizes does the following:

  • if viewport width equals to 960px or greater than show the image with a width of 540px,
  • if the viewport width is smaller than 960px than show the image as wide as the viewport (100vw means 100% of the viewport width).

Now you may notice that in our example of srcset there’s no image with a width of 540px. That’s not a problem. The browser will select the best image available upwards in size. In this case, large.jpg will be used with a width of 720px.

HD and Retina screens

On ‘normal’ screens, using the viewport width seems sufficient to choose the correct size of the image. But with HD and Retina screens you want to serve bigger sizes of the image. Et voilá, here comes srcset and sizes! With srcset and sizes the browser also takes into account the pixel density of the screen.

To calculate the pixel density of a screen, browsers make use of the pixel-device-ratio. A pixel-device-ratio of 1 means that one device pixel corresponds to one CSS pixel. A pixel-device-ratio of 2 means that two device pixels corresponds to one CSS pixel.

For example, an iPad Air 2 has a screen resolution of 2048 by 1536 pixels (source: Wikipedia). The pixel-device-ratio of this iPad is 2. Which means that for the browser, the screen is 1024 by 768 pixels.

Let’s see if this all works for a real world example.

Example: page with sidebar

For this example, I’ve choosen a common website layout: a page with a sidebar. I’ll look through three situations: viewing this page on mobile, tablet and desktop.

In addition, the following applies:

  • the width of the page content is 67%, the sidebar is 33%
  • on mobile, the sidebar is displayed below the content,
  • mobile and tablet have a pixel-device-ratio of 2

The media queries in this example are based on devices. For your projects it’s best practice to base your media queries on the site layout.


When this layout is viewed on mobile, we get the following result:

  • viewport width is 320px,
  • pixel-device-ratio is 2,
  • the number of actual pixels is therefore 320px x 2 = 640px,
  • the sidebar is displayed below the content at full screen width,
  • we therefore need an image of 640px wide,
  • and sizes is set to `100vw`

Our preliminary HTML for srcset and sizes:


On a tablet, we get the following result:

  • viewport width is 768px,
  • pixel-device-ratio is 2,
  • the number of actual pixels: 768px x 2 = 1536px,
  • the sidebar is displayed right of the content,
  • the width of the content is 67%,
  • the width of the image is 67% of 1536px = 1030px,
  • sizes can be set as: (min-width: 1536px) 1030px
  • that means something like: is the viewport width 1536px or higher, show the image with a width of 1030px

For this example, I set the media queries of sizes equal to the size of the image. For your projects it’s better choosing media queries that take into account the entire site, not just this image.

This brings our HTML to:


The final situation where we want to load the correct image size is desktop. I’ve picked a display with a resolution of 1366 x 768px. Which is a common resolution at this moment (see statistics of ).

This results to:

  • the viewport width is 1366px,
  • the pixel-device-ratio is 1,
  • CSS pixel width is 1366px x 1 = 1366px,
  • the width of the content and the image is 67%,
  • the width of the image is 67% of 1366px = 916px,
  • for sizes we get: (min-width: 1366px) 916px,

Adding this to our srcset and sizes we get:

To complete the <img> tag for this example, let’s add the attributes alt and src.

In summary, this code does the following:

  • it serves small.jpg when viewed on mobile,
  • it serves medium.jpg when viewed on desktop,
  • it serves large.jpg when viewed on a tablet

I think that’s well done!


It seems that the difference between medium.jpg and large.jpg is not big. Why not use the same image for both situations, e.g. large.jpg?

Well, the difference is greater than you think. Let’s assume that the image size has a ratio of 3:2 (length:width). Then large.jpg is 21% larger in size than medium.jpg.

The calculation is as follows. The area of medium.jpg is 916px x 614px = 562.424px, that of large.jpg is 710.700px.

Using both sizes is certainly worth it.

Browser support for srcset and sizes

Browser support for srcset and sizes is good, but not excellent. Globally, ca. 83% of the browsers support srcset and sizes. It is not supported by Internet Explorer, Opera Mini and older versions of Android. But remember, the fallback is perfect! If srcset and sizes is not supported, the browser will use the src attribute.

Wouter van der Zee

Written by

web designer, teacher, introvert, morningness person, less is more, loves details, basketballer

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade