Unclear Fallback Selection in the <picture> Element Across Browsers

Direct Answer

The browser selects the first <source> in document order that satisfies both the media condition and the type support check. If no <source> qualifies, it renders the <img> element.

How the Selection Algorithm Works

The HTML standard defines a deterministic procedure. The browser walks the <source> children in the order they appear in the markup. For each candidate it checks whether srcset is present, whether the declared type is supported, and whether the media query matches. A source is chosen only when all applicable checks pass. The first source that passes is used; subsequent matches are ignored.

Answering the Specific Questions

1. When two <source> elements match the media query but only one has a supported type, the browser skips the unsupported one and loads the first source that satisfies both conditions.
2. Yes, order matters. Because the algorithm is first-match-wins, placing a source with a narrower media query or a more specific type earlier can change which image loads.
3. The documented fallback is the <img> element. It must be the last child of <picture>. All major engines implement this same fallback path.

Clarifying the "Ambiguity"

The premise that the specification leaves resolution order undefined is not accurate. The standard mandates document-order iteration and requires both media and type to match. If a browser appears to load a source whose type is unsupported, the likely explanation is that the type attribute is absent, misspelled, or the test is observing a cached network response rather than the selection logic.

Practical Verification

To confirm behavior in your environment, create a minimal test with overlapping media queries and a deliberately unsupported MIME type, then inspect the Network panel in your browser's developer tools.

<picture>
  <source media="(min-width: 800px)" type="image/avif" srcset="large.avif">
  <source media="(min-width: 800px)" type="image/webp" srcset="large.webp">
  <img src="fallback.jpg" alt="example">
</picture>

Reload the page and check which URL is requested. If the unsupported-type source is requested, verify that the type value is a valid MIME string and that the <img> is the final child.

When to Seek Further Diagnosis

If a specific browser still loads an unexpected resource after this test, share the exact <picture> markup and the browser version. That detail determines whether the issue is a markup edge case or an engine bug.