Picture & Source

The picture element lets us use different images in different situations. It contains multiple source elements, each of which defines a rule for when it is relevant and then specifies which image to use via its srcset attribute.

In this example three shapes of image are used. By default a small-screen mobile devide is assumed, so a wide horizontal masthead-style image is displayed. If the screen is larger than 800 pixels wide, a tall thin sidebar image replaces the original masthead. The CSS selector in the source element is complemented by an @media query that changes the direction of the flex layout from column to row.

Currently the page is 0 pixels wide.

If the page grows in width beyond 1600 pixels wide, a third layout is introduced, where a very large square version of the image is selected.

Note that in all cases, three different sizes of image are provided to allow for screens with different pixel densities.