picture/source Art Direction Order
Chooses the first eligible picture source in document order from supplied media-match and format-support flags. Supply only source elements before the fallback img that have usable source sets. Reports selected element presence without fetching or selecting image candidates.
Description
Picture sources enable art direction and format selection.
Picture sources enable art direction and format selection. Their document order matters because the first source with matching media and supported format is eligible.1
Chooses the first eligible picture source in document order from supplied media-match and format-support flags. Supply only source elements before the fallback img that have usable source sets. Reports selected element presence without fetching or selecting image candidates.
When to use picture/source Art Direction Order
Use this for the following task: Chooses the first eligible picture source in document order from supplied media-match and format-support flags. Supply only source elements before the fallback img that have usable source sets. Reports selected element presence without fetching or selecting image candidates.
Prepare the parsed attribute values, element states or ordered local lists requested below. Keep attribute presence separate from value.
How to use picture/source Art Direction Order and understand its results
- Prepare the parsed attribute values, element states or ordered local lists requested below. Keep attribute presence separate from value.
- Enter mediaMatches, formatSupported, hasFallbackImg using the field table, then run the tool.
- Read sourceIndex, usesFallback, hasSelectedElement. Interpret flags, units, ordering and placeholder values using the rules below.
- Review any reported issue or failed check, correct the supplied values when appropriate, and verify the result in its intended context.
| Input field | Meaning | Value type and bounds | Requirement |
|---|---|---|---|
| mediaMatches | Media Matches | list of boolean; minimum entries 0; maximum entries 10000; each entry: boolean | Required |
| formatSupported | Format Supported | list of boolean; minimum entries 0; maximum entries 10000; each entry: boolean | Required |
| hasFallbackImg | Has Fallback Img | boolean | Required |
Supply only usable source elements before the fallback img, with aligned flags. Return their zero-based first match; use the fallback only when no source matches and an img exists.2
sourceIndex = first i with mediaMatches[i] AND formatSupported[i] This summarizes the declared operation. Units, indexing, inclusivity and exceptional cases are explained in the surrounding text.
| Output field | Meaning | Value type |
|---|---|---|
| sourceIndex | Source Index | integer |
| usesFallback | Uses Fallback | boolean |
| hasSelectedElement | Has Selected Element | boolean |
{
"input": {
"mediaMatches": [
true,
true,
true
],
"formatSupported": [
false,
true,
true
],
"hasFallbackImg": true
},
"output": {
"sourceIndex": 1,
"usesFallback": false,
"hasSelectedElement": true
}
}Limitations and assumptions
This does not fetch images or choose a candidate within a srcset.
This evaluates supplied local information; it does not fetch a page or run a browser. Malformed requests produce input errors. A successfully evaluated request can still contain false flags, empty result lists or a result outside the supplied threshold; those outcomes have the meanings stated above.
Alternative or Complementary methods
Choose srcset x-Descriptor vs sizes w for this operation: Classifies a single srcset descriptor using conforming author syntax. Empty descriptor means 1x; width is a positive safe integer and density a positive finite float. Width descriptors use sizes, while density descriptors do not. For a complementary task, use sizes Attribute Width Formula Lookup for this operation: Resolves the first matching sizes clause from parsed media flags and already-resolved nonnegative CSS pixel lengths. If none matches, source size defaults to viewport width (100vw). Auto sizes and CSS parsing are outside this profile.
Further background: HTML / accessibility reference: picture/source Art Direction Order.
References
Similar or alternative tools
- srcset x-Descriptor vs sizes w
Classifies a single srcset descriptor using conforming author syntax. Empty descriptor means 1x; width is a positive safe integer and density a positive finite float. Width descriptors use sizes, while density descriptors do not.
- sizes Attribute Width Formula Lookup
Resolves the first matching sizes clause from parsed media flags and already-resolved nonnegative CSS pixel lengths. If none matches, source size defaults to viewport width (100vw). Auto sizes and CSS parsing are outside this profile.