← Back to All Tags

<source>

Specifies multiple media resources for media elements

✨ HTML5

Definition and Usage

The <source> element specifies multiple media resources for media elements (<video>, <audio>, and <picture>).

The <source> tag allows you to specify alternative media files which the browser may choose from, based on browser support or viewport width.

The browser will choose the first source it supports.

Tip: The <source> tag is a void element (self-closing) and does not have a closing tag.
Note: Always provide multiple formats to ensure compatibility across different browsers and devices.

Browser Support

The <source> tag is supported in all major browsers:

Chrome
Chrome
4.0+
Firefox
Firefox
3.5+
Safari
Safari
4.0+
Edge
Edge
9.0+
Opera
Opera
10.5+

Attributes

Attribute Value Description
src URL Required when used with <audio> and <video>. Specifies the URL of the media file
type media_type Specifies the MIME type of the media resource (e.g., video/mp4, audio/mpeg, image/webp)
media media_query Used with <picture>. Accepts any valid media query
srcset URL Used with <picture>. Specifies the URL of the image to use in different situations
sizes sizes Used with <picture>. Specifies image sizes for different page layouts
width pixels Used with <picture>. Specifies the intrinsic width of the image
height pixels Used with <picture>. Specifies the intrinsic height of the image

Examples

Video with Multiple Sources

Provide multiple video formats for maximum browser compatibility:

Example

<video controls width="640" height="360">
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.webm" type="video/webm">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>

Audio with Fallback

Provide multiple audio formats with fallback text:

Example

<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
  <source src="audio.ogg" type="audio/ogg">
  <source src="audio.wav" type="audio/wav">
  Your browser does not support the audio element.
</audio>

Picture with WebP and AVIF Support

Use modern image formats with fallbacks:

Example

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <source srcset="image.jpg" type="image/jpeg">
  <img src="image.jpg" alt="Description">
</picture>

Responsive Images with Media Queries

Serve different images based on screen size:

Example

<picture>
  <source media="(min-width: 1200px)" srcset="large.jpg">
  <source media="(min-width: 768px)" srcset="medium.jpg">
  <source media="(min-width: 480px)" srcset="small.jpg">
  <img src="default.jpg" alt="Responsive image">
</picture>

High-DPI Display Support

Provide different resolutions for retina displays:

Example

<picture>
  <source srcset="image-2x.jpg 2x, image-1x.jpg 1x">
  <img src="image-1x.jpg" alt="High-DPI image">
</picture>

Advanced Video with Codecs

Specify exact video codecs for better browser selection:

Example

<video controls>
  <source src="video.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
  <source src="video.webm" type='video/webm; codecs="vp8, vorbis"'>
  Your browser does not support HTML5 video.
</video>

Common Media MIME Types

Here are the most commonly used MIME types for the type attribute:

Video Types

  • video/mp4 - MP4 video (H.264)
  • video/webm - WebM video (VP8/VP9)
  • video/ogg - Ogg video (Theora)
  • video/quicktime - QuickTime video (.mov)

Audio Types

  • audio/mpeg - MP3 audio
  • audio/ogg - Ogg audio (Vorbis)
  • audio/wav - WAV audio
  • audio/webm - WebM audio
  • audio/aac - AAC audio

Image Types

  • image/avif - AVIF image (modern, best compression)
  • image/webp - WebP image (modern, good compression)
  • image/jpeg - JPEG image
  • image/png - PNG image
  • image/svg+xml - SVG image

Source Order Importance

Important: The order of <source> elements matters! Browsers will use the first source they support.
  • Best Practice: List sources from most preferred to least preferred
  • Modern First: Put newer formats (AVIF, WebP, WebM) before older formats
  • Fallback Last: Always include a widely-supported fallback format
  • Type Attribute: Always include the type attribute to help browsers skip unsupported formats

Try it Yourself

Interactive Example

Here's a live example with multiple source formats:

Video Example:

This video element uses multiple source formats. The browser will choose the first one it supports.

<video controls>
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
</video>

Best Practices

  • Multiple Formats: Always provide at least 2-3 format options for compatibility
  • Type Attribute: Include the type attribute to prevent unnecessary downloads
  • Order Matters: Place modern, efficient formats first (AVIF, WebP, WebM)
  • Fallback Content: Include fallback text or elements for unsupported browsers
  • Optimize Files: Compress media files to reduce bandwidth
  • Accessibility: Always include descriptive alt text for images
  • Performance: Use media queries to load appropriate image sizes

Related Tags