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 appropriate alt text
  • Video: Provide <track> elements for captions
  • Audio: Provide transcripts for audio content

Related Elements

  • <picture> - Container for responsive images using source
  • <img> - Required fallback within picture
  • <video> - Video player that accepts source elements
  • <audio> - Audio player that accepts source elements
  • <track> - Timed text tracks for video/audio

CSS Reference

The <source> element is not rendered and has no visual appearance. Vanilla Breeze sets display: none as a precaution.

source { display: none; }