simpl.info picture element: art direction

Resize the viewport: a different crop of the image is displayed at different widths, using a picture element with media queries.

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

The file types example uses the picture element to enable the browser to choose an image depending on what file formats are supported. The sizes example shows how to enable image choice using the srcset and sizes attributes.

View source on GitHub