Tag

Defines multiple media resources for media
elements (

Examples

<video controls>
  <source src="foo.webm" type="video/webm" />
  <source src="foo.ogg" type="video/ogg" />
  <source src="foo.mov" type="video/quicktime" />
  I'm sorry; your browser doesn't support HTML
video.
</video>

<picture>
  <source srcset="mdn-logo-wide.png"
media="(min-width: 800px)" />
  <source srcset="mdn-logo-medium.png"
media="(min-width: 600px)" />
  <img src="mdn-logo-narrow.png" alt="MDN Web
Docs" />
</picture>

<picture>
  <source
    srcset="landscape.png"
    media="(min-width: 1000px)"
    width="1000"
    height="400" />
  <source
    srcset="square.png"
    media="(min-width: 800px)"
    width="800"
    height="800" />
  <source
    srcset="portrait.png"
    media="(min-width: 600px)"
    width="600"
    height="800" />
  <img
    src="fallback.png"
    alt="Image used when the browser does not
support the sources"
    width="500"
    height="400" />
</picture>