Image with srcset and width descriptors, but no sizes

A test responsive image
<img alt="A test responsive image"
     src="fallback.png"
     srcset="300x300.png 300w,
             600x600.png 600w,
             1200x1200.png 1200w,
             1500x1500.png 1500w" />
			

Here srcset is used to define at images at different sizes. The format is: <image-url> <width descriptor>. Width descriptor describes the pixel width of the source image.

Without sizes

Some resources online say that when srcset is used without sizes, it is assumed the image should fill the entire browser width, and this seems to be the de-facto behaviour. But note that according to the specification it is invalid to use srcset with width descriptors without a sizes attribute:

If the srcset attribute is present and has any image candidate strings using a width descriptor, the sizes attribute must also be present...

Pixel density

Note that even when using width descriptors with srcset, the browser will try and take pixel density into account. It will do this by selecting an image size according to device pixels rather than CSS pixels. You can see this value in the info section as devicePixelRatio * innerWidth.

Image element width

As described above when srcset is used without sizes, it is assumed the image should fill the entire browser width. The image element size follows and is the same size as the width of the page.