<img> with srcset using w values

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

Try changing the viewport size.

A browser that supports the srcset attribute will choose small.jpg, medium.jpg or large.jpg, depending on the viewport width and the screen resolution.

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

In this example, only the viewport width is taken into account by the browser when choosing which image file to request. The sizes example enables the browser to choose the appropriate file given the display width of the image.

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

View source on GitHub