Last call for responses to our survey!

How do you use images on your website? What would make it easier?

Please complete our online questionnaire. It should only take a few minutes. We'll collate the responses then share the results.

Thanks for all the input so far. picture element: art direction

Horses in Hawaii

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