srcset
and width descriptors, but no sizes<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.
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 thesrcset
attribute is present and has any image candidate strings using a width descriptor, thesizes
attribute must also be present...
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
.
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.