source
The source element specifies multiple media resources for picture, video, and audio elements, enabling format fallbacks and responsive media selection.
Description
The <source> element is an empty element that specifies media resources for <picture>, <video>, and <audio> elements. It allows browsers to choose the most appropriate media file based on format support, media queries, or other criteria.
The browser evaluates <source> elements in order and uses the first one that matches. This enables progressive enhancement with modern formats while maintaining compatibility with older browsers.
When to Use
- Format fallback - Serve modern formats (WebP, AVIF, VP9) with older format fallbacks
- Art direction - Different images for different viewport sizes (with picture)
- Resolution switching - Different resolutions for different pixel densities
- Codec support - Alternative video/audio codecs for browser compatibility
Usage with Picture
In <picture>, use srcset (not src) to specify image sources.
Format Switching
Serve modern image formats to supporting browsers.
<picture> <source srcset="image.avif" type="image/avif" /> <source srcset="image.webp" type="image/webp" /> <img src="image.jpg" alt="Description" /></picture>Art Direction
Different image crops for different viewport sizes.
<picture> <source media="(min-width: 1200px)" srcset="hero-wide.jpg" /> <source media="(min-width: 768px)" srcset="hero-medium.jpg" /> <img src="hero-mobile.jpg" alt="Hero banner" /></picture>Combined: Format + Art Direction
<picture> <!-- Wide viewport, modern format --> <source media="(min-width: 1200px)" srcset="hero-wide.avif" type="image/avif" /> <source media="(min-width: 1200px)" srcset="hero-wide.webp" type="image/webp" /> <source media="(min-width: 1200px)" srcset="hero-wide.jpg" /> <!-- Narrow viewport, modern format --> <source srcset="hero-mobile.avif" type="image/avif" /> <source srcset="hero-mobile.webp" type="image/webp" /> <!-- Fallback --> <img src="hero-mobile.jpg" alt="Hero banner" /></picture>Resolution Switching
Serve high-resolution images to high-DPI displays.
<picture> <source srcset="image-1x.jpg 1x, image-2x.jpg 2x, image-3x.jpg 3x" /> <img src="image-1x.jpg" alt="Description" /></picture>Dark Mode Images
<picture> <source media="(prefers-color-scheme: dark)" srcset="logo-dark.svg" /> <img src="logo-light.svg" alt="Company logo" /></picture>Usage with Video
In <video>, use src to specify video sources.
Format Fallback
<video controls> <!-- Modern, efficient codec --> <source src="video.webm" type="video/webm; codecs=vp9,opus" /> <!-- Widely supported codec --> <source src="video.mp4" type="video/mp4" /> <!-- Fallback message --> <p>Your browser doesn't support video. <a href="video.mp4">Download</a></p></video>Video Codecs
| Format | Type | Notes |
|---|---|---|
| MP4 (H.264) | video/mp4 |
Universal support, good quality |
| WebM (VP9) | video/webm |
Better compression, modern browsers |
| WebM (AV1) | video/webm; codecs=av01 |
Best compression, newest browsers |
| Ogg (Theora) | video/ogg |
Open format, older |
Responsive Video
Different video files for different screen sizes (via media query).
<video controls> <source src="video-hd.mp4" type="video/mp4" media="(min-width: 1200px)" /> <source src="video-sd.mp4" type="video/mp4" /></video>Usage with Audio
Provide multiple audio formats for broad browser support.
<audio controls> <!-- Best quality and compression --> <source src="audio.opus" type="audio/opus" /> <!-- Open format fallback --> <source src="audio.ogg" type="audio/ogg" /> <!-- Universal fallback --> <source src="audio.mp3" type="audio/mpeg" /> <p>Your browser doesn't support audio. <a href="audio.mp3">Download</a></p></audio>Audio Codecs
| Format | Type | Notes |
|---|---|---|
| MP3 | audio/mpeg |
Universal support |
| AAC | audio/aac |
Good quality, wide support |
| Ogg Vorbis | audio/ogg |
Open format |
| Opus | audio/opus |
Best quality/size, modern browsers |
| WAV | audio/wav |
Uncompressed, large files |
| FLAC | audio/flac |
Lossless compression |
Attributes
| Attribute | Context | Description |
|---|---|---|
src |
video, audio | URL of the media file |
srcset |
picture | URL(s) of image files with optional descriptors |
type |
all | MIME type of the media file |
media |
picture, video | Media query for when this source applies |
sizes |
picture | Image sizes for responsive images |
width |
picture | Intrinsic width of the image |
height |
picture | Intrinsic height of the image |
Best Practices
Order Matters
Browsers use the first matching source, so order from most preferred to least preferred.
<!-- Correct: modern formats first --><source srcset="image.avif" type="image/avif" /><source srcset="image.webp" type="image/webp" /><img src="image.jpg" alt="..." /> <!-- Wrong: JPEG first defeats the purpose --><img src="image.jpg" alt="..." /><source srcset="image.webp" type="image/webp" />Always Include Type
The type attribute lets browsers skip unsupported formats without downloading.
<!-- Good: browser knows to skip if it doesn't support AVIF --><source srcset="image.avif" type="image/avif" /> <!-- Less efficient: browser may start downloading before realizing it can't use it --><source srcset="image.avif" />Include Codec Information
For video, specify codec in the type for more accurate format selection.
<source src="video.webm" type="video/webm; codecs=vp9,opus" /><source src="video.mp4" type="video/mp4; codecs=avc1.42E01E,mp4a.40.2" />Accessibility
The <source> element itself has no accessibility implications - it's purely a mechanism for resource selection. Accessibility considerations apply to the parent elements:
- Picture: Ensure the
<img>has appropriatealttext - Video: Provide
<track>elements for captions - Audio: Provide transcripts for audio content
Related
CSS Reference
The <source> element is not rendered and has no visual appearance. Vanilla Breeze sets display: none as a precaution.
source { display: none;}