Picture

Not all browsers current support the <picture> element, and the specification is subject to change.

The HTML <picture> element is a container used to specify multiple <source> elements for a specific <img> contained in it. The browser will choose the most suitable source according to the current layout of the page (the constraints of the box the image will appear in) and the device it will be displayed on (e.g. a normal or hiDPI device.)

If your browser supports the <picture> element

In this demo, if the viewport is greater than 1000 pixels, an image with a width of 730 pixels will be displayed, otherwise an image with a width of 350 pixels will be shwon.

If your browser does not support the <picture> element

If your browser does not support the element, it will simply ignore it and fall back to the <img> element. In this demo, that will shown an image with a width of 200 pixels.

St Paul's Cathedral