simpl.info <img> with srcset and sizes

Lias and Little Puss: two ten week old grey tabby kittens

Try changing the viewport size.

The sizes attribute enables the browser to choose small.jpg, medium.jpg or large.jpg, depending on the screen resolution and image display width (set to be 50% of viewport width).

Image used:
Image natural width: px
Image display width: px
Device pixel ratio:
Minimum acceptable image width: px
Viewport width: px
Available screen width: px

Without the sizes attribute the browser can only take into account viewport width, not image display width.

The art direction and file types examples show ways to use the picture element.

View source on GitHub