The <source> element is a supporting player that works inside <picture>, <video>, and <audio> elements. It lets you provide multiple media options and lets the browser choose the best one based on device capabilities, screen size, or format support.
Source Inside Picture
Inside a <picture> element, each <source> can specify a different image file with a media query or type attribute. The browser picks the first matching source.
<picture>
<source srcset="banner-large.jpg" media="(min-width: 1024px)">
<source srcset="banner-medium.jpg" media="(min-width: 600px)">
<img src="banner-small.jpg" alt="Website banner">
</picture>
Source Inside Video
For video, <source> lets you provide multiple video formats. Not every browser supports every video format, so you give the browser options like MP4, WebM, and Ogg. The browser plays the first format it understands.
<video controls width="600">
<source src="movie.mp4" type="video/mp4">
<source src="movie.webm" type="video/webm">
<source src="movie.ogv" type="video/ogg">
Your browser does not support the video tag.
</video>
Source Inside Audio
Same idea for audio — provide different audio formats so every browser can play your sound. MP3 has the widest support, but offering WebM or Ogg as alternatives ensures compatibility with virtually every browser out there.
<audio controls>
<source src="podcast.mp3" type="audio/mpeg">
<source src="podcast.ogg" type="audio/ogg">
Your browser does not support the audio tag.
</audio>
Media Queries on Sources
The media attribute on source elements accepts CSS media queries. This means you can serve different content based on screen width, orientation, resolution, or any other media feature. It is like having responsive design built right into your media elements.
<picture>
<source srcset="hero-dark.jpg" media="(prefers-color-scheme: dark)">
<source srcset="hero-retina.jpg" media="(min-resolution: 2dppx)">
<img src="hero.jpg" alt="Hero image">
</picture>