HTML <source> tag

By Jonathan Griffin. Editor, SEO Consultant, & Developer.

· 3 min read

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

Browser Support

Desktop

ChromeEdgeFirefoxIEOperaSafari
YesYesYesYesYesYes

Mobile

Android WebviewChrome AndroidFirefox AndroidOpera AndroidiOS SafariSamsung Internet
YesYesYesYesYesYes