Is it compulsory to use the sizes attribute with w-descriptors in srcset?

Question

I have read through a number of articles on using srcset for both device-pixel-density adjustments as well as art direction:

The State of Responsive Images in 2015 by Paddi Macdonnell

srcset Part 2: The W descriptor and sizes attribute by Rich Finelli

Neither of these makes it clear whether w-descriptors can be used without the sizes attribute. Most indicate the contrary (w-descriptor work together with sizes)

My own rudimentary testing confirms that image switching does work using only w descriptors.

I have found that when a number of different images are specified according to their width using the w-descriptor, the browser will choose the best image that will fit within a confined space.

No other code is necessary.

This is obviously confusing when designing responsive sites because, I as a designer only need the following cases:

1. Change the image based on the device-pixel-density (Works for me. Great!)
2. Change the image (art-direction) based on the available width (Works for me. Great!)

I am wondering how the sizes would factor into this debacle. I do wholly appreciate that this is a new-ish feature.

Answer 1

sizes isn't strictly required, but if you don't use it, those w descriptors will resolve against the default values of sizes, which is 100vw. In other words, omitting sizes is equivalent to specifying sizes=100vw, which implies that the image is intended to be rendered at the full screen width. If this is what you intend, great, feel free to omit it, tho specifying it (to make your intent clear) is probably better.

But if you intended anything else, like the example in ausi's answer where the element it set to 200px, then you better specify sizes or else you'll get bad results.

I haven't read the tutorials you're linking to, but just in case they didn't make this clear: the algorithm for deciding what source to download is based on the pixel density, as expressed by the x descriptor. The w descriptor is converted into an equivalent x descriptor by dividing its value by the appropriate sizes value. They exist solely because sometimes you don't know the final laid-out size of the image in pixels at authoring time. If you do know the final size, using x is probably easier.

(Tho it wasn't designed for this purpose, you can also use w even if you do know the laid-out size if you just want to avoid doing the math to figure out the x descriptors. Just listing the source widths and the laid-out width and letting the browser figure things out can be easier in some cases. However, if you know the laid-out width, you should be designing for it explicitly so your ratios are simple integers anyway - it's much better to send a 1x or 2x image than it is to send to .9x image and have the browser scale it up.)