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.

simpl.info <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