HTML tags | source

It is used to specify multiple media assets for the <picture>, <video> and <audio> elements. Based on the specified criteria, the browser will decide which of them it uses to offer the multimedia content to the user.

It is an empty element, that is, it has no content or closing tag, that is, it can never be used </source>. It is often used to offer the same multimedia content in multiple file formats to provide compatibility with the largest possible number of browsers depending on the multimedia and image support they have.

It has several attributes:

• media: specifies a media query like the ones we specify in CSS.

<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>

• sizes: is a list of sizes that describes the final width of the image rendered by the browser. Each size consists of a comma-separated list of condition-length pairs. This information is used by the browser to determine, before generating the page layout, which image defined in srcset to use. This attribute only has an effect if width descriptors are specified in the srcset attribute, not if pixel ratios are specified (Ex: 200w instead of 2x).

<img srcset="elva-fairy-320w.jpg 320w,
             elva-fairy-480w.jpg 480w,
             elva-fairy-800w.jpg 800w"
     sizes="(max-width: 320px) 280px,
            (max-width: 480px) 440px,
            800px"
     src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy">

• srcset: is a list of one or more comma separated strings indicating a set of possible images that the browser can use. To be valid, each string in the list must have at least one width descriptor or one pixel density descriptor. There should only be a single string in the list that contains the same width descriptor and pixel density descriptor combination. At a certain point, the browser will choose which one is the most suitable to display. Each chain is made up of:
  • A URL specifying the image
  • A width descriptor, consisting of a string containing a positive integer followed directly by w, for example 300w. The default value, if not specified, is infinite.
  • A pixel density descriptor, consisting of a positive float number directly followed by x, for example 2.5x. The default value, if not specified, is 1x.
• src: it is a mandatory attribute for <audio> and <video>, and it specifies the address of the content that we want to indicate in each <source>. This attribute is ignored if the <source> is a child of a <picture> element.
• type: the MIME type of the <source>, optionally with a codecs parameter. If the type attribute is not specified, the media type is retrieved from the server and checked if the browser can process it. If it cannot be rendered, the following <source> is checked. If the type attribute is specified, it is compared with the types that the browser can present, and if it is not recognized, the server is not even queried. Instead, the following <source> element is checked at the same time. When this attribute is used within a <picture> element the browser will fall back to the image specified in the <img> of the <picture> if it is unable to find a suitable image after examining each <source>.

<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 HTML5 video.
</video>

The media, sizes and srcset attributes can only be used when <source> is a child of a <picture> element.

• Type: -
• Self-closing: Yes
• Semantic value: No

Definition and example | Support