HTML <source> Element
The HTML <source> element specifies alternative media resources that a browser can choose from when displaying images or playing audio and video.
Syntax
<picture>
<source media="(min-width: 800px)" srcset="/img/picture/peacock.jpg">
<source media="(min-width: 500px)" srcset="/img/picture/tiger-cub.jpg">
<img src="/img/picture/puppy.jpg" alt="Puppy">
</picture>The <source> element is a void element and does not have a closing tag. It is placed inside a <picture>, <audio>, or <video> element to provide one of the media resources available to the browser.
Attributes
The <source> element supports the global HTML attributes and the following element-specific attributes:
| Attribute | Description |
|---|---|
src |
Specifies the URL of an audio or video resource when <source> is used inside an <audio> or <video> element. |
srcset |
Provides one or more image sources when <source> is used inside a <picture> element. |
sizes |
Provides information about the intended display size of responsive images used with srcset. |
media |
Specifies a media condition that determines when an image source is appropriate. |
type |
Provides the MIME type of the referenced resource so the browser can determine whether it supports that media format. |
width |
Specifies the intrinsic width of an image source when the element is used inside <picture>. |
height |
Specifies the intrinsic height of an image source when the element is used inside <picture>. |
Example
This example uses <source> elements inside a <picture> element to display different images based on the width of the preview. Drag the divider between the code and result panes to change the preview width and see which image is displayed.
Usage Notes
The <source> element allows the browser to choose an appropriate media resource from several alternatives. The way the browser makes this choice depends on whether the element is being used with <picture>, <audio>, or <video>.
Inside <picture>, the srcset attribute identifies an image resource while media can specify the conditions under which that source should be used. This makes it possible to provide different images for different viewport sizes or display conditions.
Inside <audio> and <video>, the src attribute identifies the media file. Multiple <source> elements can provide the same media in different formats, allowing the browser to select a format it supports.
The type attribute can identify the MIME type of a resource. This can help the browser skip resources in formats it does not support without first downloading them.
When used inside <picture>, include an <img> element after the <source> elements. The <img> element provides the image itself and serves as the fallback when none of the preceding sources match.
Accessibility
The <source> element does not provide alternative text or other accessibility information by itself. When it is used for responsive images, provide appropriate alternative text with the alt attribute on the associated <img> element.
When <source> is used with audio or video, provide appropriate alternatives such as captions, transcripts, or other accessible media when the content requires them.
Alternative sources should communicate the same essential information when the browser may choose between them. Avoid changing the meaning of the content solely because a different source is selected.
Browser Support
Baseline: Widely available indicates a feature has been supported by core browsers for at least 30 months. At this stage, the feature is considered stable and safe for most websites to use without needing to worry about compatibility issues or fallbacks, as it is supported by the vast majority of users' devices and browser versions.
For detailed browser compatibility information, see Can I Use: HTML <source> Element .
Related Elements
The <source> element is closely related to the <picture> element for responsive images, the <img> element for displaying images, the <audio> element for audio content, and the <video> element for video content.