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.
Description
A sizes attribute supplies the image source size used with width descriptors.
A sizes attribute supplies the image source size used with width descriptors. Its clauses are evaluated in order, and the first eligible length wins.1
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.
When to use sizes Attribute Width Formula Lookup
Use this for the following task: 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.
Prepare the parsed attribute values, element states or ordered local lists requested below. Keep attribute presence separate from value.
How to use sizes Attribute Width Formula Lookup and understand its results
- Prepare the parsed attribute values, element states or ordered local lists requested below. Keep attribute presence separate from value.
- Enter matches, lengthsPx, viewportWidthPx using the field table, then run the tool.
- Read clauseIndex, sourceSizePx, usedDefault. 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 |
|---|---|---|---|
| matches | Matches | list of boolean; minimum entries 0; maximum entries 10000; each entry: boolean | Required |
| lengthsPx | Lengths Px | list of number; minimum entries 0; maximum entries 10000; each entry: number; minimum 0 | Required |
| viewportWidthPx | Viewport Width Px | number; minimum 0 | Required |
Provide already-evaluated media flags and resolved nonnegative CSS pixel lengths in matching order. Reject unequal lists. Return a zero-based clauseIndex or −1 for the 100vw fallback.2
sourceSizePx = lengthsPx[first true match], otherwise viewportWidthPx This summarizes the declared operation. Units, indexing, inclusivity and exceptional cases are explained in the surrounding text.
| Output field | Meaning | Value type |
|---|---|---|
| clauseIndex | Clause Index | integer |
| sourceSizePx | Source Size Px | number |
| usedDefault | Used Default | boolean |
{
"input": {
"matches": [
false,
true,
true
],
"lengthsPx": [
320,
640,
960
],
"viewportWidthPx": 1200
},
"output": {
"clauseIndex": 1,
"sourceSizePx": 640,
"usedDefault": false
}
}Limitations and assumptions
The tool does not parse CSS or media queries and does not implement auto sizes.
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 picture/source Art Direction Order for this operation: 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.
Further background: HTML / accessibility reference: sizes Attribute Width Formula Lookup.
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.
- 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.