How a list of image source options can be specified to achieve image responsiveness, in terms of the image resolution (using w-descriptors)?

By using the srcset and sizes attributes inside the img element, and specifying the w-descriptors (400w, 600w, etc.):

<img src="/files/16797/clock-demo-200px.png"
       alt="Clock"
       srcset="/files/16864/clock-demo-400px.png 400w, 
		           /files/16797/clock-demo-600px.png 600w"
			 sizes="(max-width: 480px) 100vw,
							(max-width: 960px) 70vw,
							 700px">

The sizes attribute specifies a media-feature (max-width in this case) and a condition (480px or 960px), and the length the image will take on the viewport (100vw or 70vw). For viewports of up to 480px, the image will appear as 100% of the viewport. For viewports of up to 960px, the image will appear as 70% of the viewport. If the viewport is larger than 960px, the image size will be exactly 700px.

After analysing the sizes attribute, the browser knows the width of the viewport and how big the image will appear within it, so it can select the most appropriate image from the srcset list to download.

https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images