The source element

Definition

source supplies an alternative resource candidate inside picture, audio, or video. Its permitted attributes and selection behavior depend on the parent. It has no visible fallback content of its own.

Responsive images

<picture>
  <source media="(min-width: 60rem)" srcset="workshop-wide.webp" />
  <img src="workshop.jpg" alt="Students reviewing a page outline" />
</picture>

The browser evaluates sources in order and falls back to img, which remains the element carrying alternative text and intrinsic dimensions.

Audio and video formats

Inside media elements, multiple sources can provide formats or codecs. Declare an accurate type so the browser can skip unsupported candidates without downloading them. Include fallback text or a download link through the parent media element, not inside source.

Browser and accessibility behavior

The selected resource does not add separate semantics. For images, the img element still supplies the accessible name. For audio and video, the parent provides controls and fallback. Media queries in picture should support art direction or performance, not remove information from narrow-screen users.

Common failures

• The fallback img is missing, so the picture has no semantic image or alt text.
• Candidates differ in meaning rather than presentation.
• Source order selects a larger or less appropriate file before a better match.
• Servers send incorrect content types or omit byte-range support for media.

Verification checklist

Inspect the selected current source at narrow and wide widths, different pixel densities, and with unsupported formats simulated. Confirm all candidates convey the same essential information. Request each URL and check status, content type, cache policy, dimensions, and file size. Test the fallback path instead of assuming the preferred format is universal.

For media, seek through the complete duration and test a constrained connection. Selection that begins successfully can still stall when range requests, codec support, or fallback order is wrong. Record the candidate actually chosen by each representative browser. Keep that evidence with the release record.