Unclear Fallback Selection in the <picture> Element Across Browsers

Goal

Identify which element the browser will use when multiple sources satisfy both a media query and a type attribute, given the current spec’s ambiguity.

Constraints

• The HTML5 spec defines a priority order—media match, type match, then the first child—yet it does not mandate the resolution order when both media and type match.
• Different browsers (Chrome, Firefox, Safari, Edge) have been observed to prioritize the first matching source regardless of type, or to enforce strict type matching.
• Future browser updates may alter this behavior, creating potential inconsistencies in production image delivery.

Unresolved Questions

1. When two elements match the media query but only one has a supported type, which will the browser load?
2. Does the order of elements in the markup influence the selection when type compatibility differs?
3. What is the documented fallback path if no matches both media and type, and how does it differ across major browsers?