<picture>

Example

Usage

<picture>
  <source
    srcset="images/2x-landscape.jpg 2x, images/1x-landscape.jpg 1x"
    media="(min-width: 50rem)"
  />
  <source srcset="images/2x-square.jpg 2x, images/1x-square.jpg 1x" />
  <img src="images/1x-landscape.jpg" />
</picture>

Description

An element containing one or more <source> elements. Each <source> describes a version of this image that should be displayed.

There should always be a final <img> to make sure an image displays if none of those conditions match, or it's being used in a browser that does not support <picture>.