<source>

The source tag, or Media or Image Source element, designates multiple media resources for the <video>, <audio>, and <picture> tags.

Syntax

The browser renders the first <source> tag that matches the current viewport width. or else displays any message inside the <source> tag if the browser does not support its parent.

<picture>
  <source media="(min-width:1040px)" srcset="img_for_larger_screens.jpg">
  <source media="(min-width:768px)" srcset="img_for_tablets.jpg">
  <img src="img_fallback.jpg" alt="Fallback image">
  Your browser does not support the picture element.
</picture>

Attributes

media
Used to define a media query that would otherwise be declared in CSS.

sizes
Designates image sizes for various page layouts.

src
The URL address of the media file when used with <audio> and <video>.

srcset
Designates the URL of the image to use in different situations. Required when <source> is used inside <picture>.

type
Provides the resource’s MIME-type.

Browser Compatibilty

Demos

Have a code example of <source>? Submit a codepen.io demo and we'll showcase it here ↴