Explain `w` in `srcset` of image

Question

I understand that the srcset is used to determine which image to load based on the dpi of the device. I came across this example on the Google Web Fundamentals which seems to use the w unit along with the vw unit which just happens to be the 1 % ofviewport width:

<img src="lighthouse-200.jpg" sizes="50vw"
     srcset="lighthouse-100.jpg 100w, lighthouse-200.jpg 200w,
             lighthouse-400.jpg 400w, lighthouse-800.jpg 800w,
             lighthouse-1000.jpg 1000w, lighthouse-1400.jpg 1400w,
             lighthouse-1800.jpg 1800w" alt="a lighthouse">

Help me understand what the unit of measure for this is and how I can use it?

Answer 1

According to MDN the w refers to:

a width descriptor (a positive integer directly followed by w). The width descriptor is divided by the source size given in the sizes attribute to calculate the effective pixel density.

Additionally, the W3 states:

The user agent will calculate the effective pixel density of each image from the specified w descriptors and the specified rendered size in the sizes attribute. It can then choose any of the given resources depending on the user’s screen’s pixel density, zoom level, and possibly other factors such as the user’s network conditions. If the user’s screen is 320 CSS pixels wide, this is equivalent to specifying wolf-400.jpg 1.25x, wolf-800.jpg 2.5x, wolf-1600.jpg 5x. On the other hand, if the user’s screen is 1200 CSS pixels wide, this is equivalent to specifying wolf-400.jpg 0.33x, wolf-800.jpg 0.67x, wolf-1600.jpg 1.33x. By using the w descriptors and the sizes attribute, the user agent can choose the correct image source to download regardless of how large the user’s device is.

Example 13 on the W3 page provides additional detail.

Answer 2

w is the intrinsic width of an image. It's the number you get when you right click the image and select Get Info on Mac, or Properties on Windows.

Why do you need to specify w? Because the first value of the srcset attribute only points to the link to load the image. It says nothing about the width of an image. The browser can't tell the dimension of an image until it has actually been loaded.

And why does the browser need to know the intrinsic width of an image?

Here is what browsers do when loading an image:

• look at its device width
• look at sizes and figure out which image size will be best to choose
• look at the reference list in srcSet and choose the image whose size matches, or is bigger than the number above.

To borrow the sample code from MDN:

<img srcset="elva-fairy-480w.jpg 480w,
             elva-fairy-800w.jpg 800w"
     sizes="(max-width: 600px) 480px,
            800px"
     src="elva-fairy-800w.jpg"
     alt="Elva dressed as a fairy">

A common practice is include the intrinsic image width in the image path. However, there is nothing that stops you from lying like this:

<img srcset="elva-fairy-480w.jpg 600w,
             elva-fairy-800w.jpg 800w"
     sizes="(max-width: 600px) 480px,
            800px"
     src="elva-fairy-800w.jpg"
     alt="Elva dressed as a fairy">

This means that if a browser with a viewport width of 480px loads the page, the max-width: 600px condition will be true, and the browser has a slot of 480px wide to load image.

The image elva-fairy-480w.jpg will be loaded, as its intrinsic width (600w - inflated!) is closest to the slot size.

So there is probably no harm if you overstate the intrinsic width of your image.

What if you understate the intrinsic width?

<img srcset="elva-fairy-480w.jpg 280w,
             elva-fairy-800w.jpg 800w"
     sizes="(max-width: 600px) 480px,
            800px"
     src="elva-fairy-800w.jpg"
     alt="Elva dressed as a fairy">

On a viewport width of 480px, the image elva-fairy-800w.jpg will be loaded instead because elva-fairy-480w.jpg is reported to be 280w and doesn't meet instruction in sizes.

So understating the intrinsic width of an image will result in the browser loading an overly large image, which defeats the very purpose of responsive iamges.

I haven't thought through all the ramifications from lying about the image's intrinsic width though.