HTML <Source> Tag

Definition

The <source> tag is used to specify multiple alternative media sources for the <video>, <audio>, and <picture> elements.

Example

<picture>
  <source
    media="(min-width: 800px)"
    srcset="
      https://res.cloudinary.com/thewebmaster/image/upload/ar_16:9,c_fill,f_auto,g_auto,q_auto,w_320/image/fired.jpg   320w,
      https://res.cloudinary.com/thewebmaster/image/upload/ar_16:9,c_fill,f_auto,g_auto,q_auto,w_800/image/fired.jpg   800w,
      https://res.cloudinary.com/thewebmaster/image/upload/ar_16:9,c_fill,f_auto,g_auto,q_auto,w_1200/image/fired.jpg 1200w
    "
    sizes="(min-width: 60rem) 35vw,
        (min-width: 40rem) 45vw,
        100vw"
  />
  <source
    media="(min-width: 400px)"
    srcset="
      https://res.cloudinary.com/thewebmaster/image/upload/ar_16:9,c_fill,f_auto,g_auto,q_auto,w_320/image/thumbs-down.png   320w,
      https://res.cloudinary.com/thewebmaster/image/upload/ar_16:9,c_fill,f_auto,g_auto,q_auto,w_800/image/thumbs-down.png   800w,
      https://res.cloudinary.com/thewebmaster/image/upload/ar_16:9,c_fill,f_auto,g_auto,q_auto,w_1200/image/thumbs-down.png 1200w
    "
    sizes="(min-width: 60rem) 35vw,
        (min-width: 40rem) 45vw,
        100vw"
  />
  <source
    media="(min-width: 200px)"
    srcset="
      https://res.cloudinary.com/thewebmaster/image/upload/ar_16:9,c_fill,f_auto,g_auto,q_auto,w_320/image/thumbs-up-large.png   320w,
      https://res.cloudinary.com/thewebmaster/image/upload/ar_16:9,c_fill,f_auto,g_auto,q_auto,w_800/image/thumbs-up-large.png   800w,
      https://res.cloudinary.com/thewebmaster/image/upload/ar_16:9,c_fill,f_auto,g_auto,q_auto,w_1200/image/thumbs-up-large.png 1200w
    "
    sizes="(min-width: 60rem) 35vw,
        (min-width: 40rem) 45vw,
        100vw"
  />
  <img
    src="https://res.cloudinary.com/thewebmaster/image/upload/ar_16:9,c_fill,f_auto,g_auto,q_auto,w_320/image/thumbs-up-large.png"
    alt="Image description"
  />
</picture>

Usage

• The <source> element is an empty element. It has no content and no closing tag.
• The <source> element must be a child of the <picture> element, and appear before the <img> element.
• For other media elements such as <audio> or <video>, the <source> must be their child, and appear before any flow content elements, or <track> elements.
• See the <picture> element for more specific usage with images.
• See the <audio> element for more specific usage with audio.
• See the <video> element for more specific usage with video.

Attributes

The <source> element supports the Global Attributes, along with the following:

• media

  The media attribute is used with the <picture> element that specifies a media query.

• sizes

  The sizes attribute is used with the <picture> element. Use this when you want your images to be a specific width at various viewport sizes. This is a separate concept to the real image widths set in the srcset attribute.

  Additionally, it doesn’t tell the browser what image to load, as these are not regular media queries. The browser will generate empty image containers based on your sizes attribute. Then it will then choose the best images from your srcset to fill them.

  The sizes attribute requires srcset descriptions to use width values, such as 200w, not the pixel density method.

• src

  The src attribute is a required attribute for the <audio> and <video> elements. It specifies the source URL of the relevant media. It does not affect <picture> elements.

• srcset

  The srcset attribute is used with the <picture> element and specifies the various images that the browser may use when representing your <source>.

  It takes one or more strings composed of:

  • An URL representing the source of the image.
  • A pixel density or width descriptor. For example:
    • 300w indicates the image is 300 pixels wide.
    • 2x indicates that the image is twice the pixel density.

  The browser will then choose the most appropriate image to display based on the user’s browser.

• type

  The type attribute specifies the MIME type of the resource.

  When used with the <picture> element you can specify different images to use depending on browser compatibility. This allows you to serve modern image formats to modern browsers. For example:

  <picture>
  <source type="image/webp" srcset="example.webp">
  <source type="image/svg+xml" srcset="example.svg"> 
  <img src="example.png" alt="Example showing partially supported image loading.">
  </picture>

Best Practices

• With the <picture> element, you must include a fallback <img>, along with an alt attribute for accessibility purposes. It is also good practice to have the fallback image as a <source> as well.

Specification

• HTML Living Standard Specification
• HTML5 Specification

Browser Support

Desktop

Mobile