target_uri"], attribs["imagesrcset"], and attribs["imagesizes"].
+ data-x="attr-link-imagesrcset">imagesrcset"], attribs["imagesizes"], and null.
Run the process a link header steps for rel given options.
source element is selected.
If the srcset attribute has any image candidate strings using a width descriptor, the sizes attribute must
- also be present, and is a sizes attribute. The sizes attribute contributes the source size to
- the source set, if the source element is selected.
sizes attribute may also be present. If, additionally,
+ the following sibling img element's loading
+ attribute is in the Eager state, the sizes attribute must be present. The sizes attribute is a sizes
+ attribute, which contributes the source size to the source set,
+ if the source element is selected.
The If the media
attribute may also be present. If present, the value must contain a valid media query
@@ -28491,11 +28497,19 @@ interface HTMLImageElement : HTMLElement {
srcset attribute is present and has any image candidate strings using a width
- descriptor, the sizes attribute must also
- be present, and is a sizes attribute. The sizes
- attribute contributes the source size to the source set (if no
+ descriptorsizes attribute may also be present.
+ If, additionally, the loading attribute is in the Eager state, the sizes attribute must be present. The sizes attribute is a sizes attribute,
+ which contributes the source size to the source set (if no
source element was selected).
When the loading attribute is in the Lazy state, the sizes attribute can be omitted, which is equivalent to sizes="auto".
The crossorigin
attribute is a CORS settings attribute. Its purpose is to allow images from
third-party sites that allow cross-origin access to be used with canvas.
The IDL attributes width and height must return the rendered width and height of the
- image, in CSS pixels, if the image is being rendered, and
- is being rendered to a visual medium; or else the density-corrected natural width and
- height of the image, in CSS pixels, if the image has
- density-corrected natural width and height and is available but not being rendered to a visual medium; or else 0, if the
- image is not available or does not have density-corrected
- natural width and height.
On setting, they must act as if they reflected the respective content attributes of the same name.
@@ -29550,6 +29563,30 @@ was an English <a href="/wiki/Music_hall">music hall</a> singer, ... + +This example is the same as the previous example, but the image is lazy-loaded. In this case, the sizes attribute can use the auto keyword (or the sizes attribute can be omitted), and the user agent will use the
+ width attribute (or the width specified in CSS) for the
+ source size.
<img loading="lazy" width="200" height="200" sizes="auto"
+ srcset="swing-200.jpg 200w, swing-400.jpg 400w, swing-800.jpg 800w, swing-1600.jpg 1600w"
+ src="swing-400.jpg" alt="Kettlebell Swing">For better backwards-compatibility with legacy user agents that don't support the auto keyword, fallback sizes can be specified if desired.
<img loading="lazy" width="200" height="200"
+ sizes="auto, (max-width: 30em) 100vw, (max-width: 50em) 50vw, calc(33vw - 100px)"
+ srcset="swing-200.jpg 200w, swing-400.jpg 400w, swing-800.jpg 800w, swing-1600.jpg 1600w"
+ src="swing-400.jpg" alt="Kettlebell Swing"><source-size-list> = <source-size>#? , <source-size-value>
-<source-size> = <media-condition> <source-size-value>
-<source-size-value> = <length>A <source-size-value> that is a <length> must not be negative, + and must not use CSS functions other than the math functions.
+ +The keyword auto is a width that is
+ computed in parse a sizes attribute.
If the img element that initiated the image loading (with the
+ update the image data or react to environment
+ changes algorithms) is being rendered, and its loading attribute is in the Lazy state, and its concrete object size ignoring
+ natural dimensions width is not zero, then auto is
+ the concrete object size ignoring natural dimensions width. Otherwise, auto is 100vw.
The concrete object size ignoring natural dimensions of an element is its + concrete object size but acting as if there are no natural dimensions, + thus producing a rectangle with an absolute width and height.
+ +The concrete object size ignoring natural dimensions of an
+ img element will match the concrete object size before an image has
+ loaded.
The auto keyword may be specified in the sizes attribute of source elements and sizes attribute of img elements, if the following
+ conditions are met. Otherwise, auto must not be
+ specified.
A <source-size-value> must not be negative, and must not use CSS functions - other than the math functions.
+The element is a source element with a following sibling
+ img element.
The element is an img element.
The img element referenced in either condition above has a loading attribute which is in the Lazy state.
In addition, it is strongly encouraged to specify dimensions using the width and height attributes
+ or with CSS. Without a specified width, the auto keyword
+ is equivalent to 100vw.
The <source-size-value> gives the intended layout width of the image. The author can specify different widths for different environments with @@ -29830,7 +29909,6 @@ was an English <a href="/wiki/Music_hall">music hall</a> singer, ...'vw' unit can be used for sizes relative to the viewport width.
-The element's adopting steps are run.
+If the element's loading attribute is in the Lazy state, and either the element has a srcset attribute with a width descriptor or the
+ element's parent is a picture element and a previous sibling source
+ element that has a srcset attribute with a width
+ descriptor: the element starts or stops being rendered, or its concrete
+ object size ignoring natural dimensions width changes. This must set the maybe omit
+ events flag for the update the image data algorithm.
When the user agent is to update the image data of an img element,
- optionally with the restart animations flag set,
- it must run the following steps:
Let previous URL be the current request's current URL.
Let selected source be null and selected pixel density be undefined.
If the element does not use srcset or picture and
@@ -30230,8 +30320,9 @@ was an English <a href="/wiki/Music_hall">music hall</a> singer, ...
Set current request's current URL to urlString.
Fire an event named load at the img element.
If maybe omit events is not set or previousURL is not equal to
+ urlString, then fire an event named
+ load at the img element.
Change the current request's current URL to the empty string.
-If the element has a src attribute or it uses srcset or picture, fire an event named error at the img element.
If all of the following conditions are true:
+ +the element has a src attribute or it uses srcset or
+ picture; and
maybe omit events is not set or previousURL is not the empty + string
then fire an event named error at the img element.
Change the current request's current URL to selected source.
-Fire an event named error at the img element.
If maybe omit events is not set or previousURL is not equal to
+ selected source, then fire an event
+ named error at the img element.
Queue an element task on the DOM manipulation task source +
If maybe omit events is not set or previousURL is not equal to
+ urlString, then queue an element task on the DOM manipulation task source
given the img element to fire an event
named load at the img element.
Abort the image request for image request.
Fire an event named error at the img element.
If maybe omit events is not set or previousURL is not equal to
+ urlString, then fire an event named
+ error at the img element.
Add the image to the list of available images using the key key, with the ignore higher-layer caching flag set.
-Fire an event named load at the img element.
If maybe omit events is not set or previousURL is not equal to
+ urlString, then fire an event named
+ load at the img element.
img element to fire an event named
- error at the img element.
+ then, if maybe omit events is not set or previousURL is not equal to
+ urlString, queue an element task on the DOM manipulation task
+ source given the img element to fire an
+ event named error at the img
+ element.
@@ -30699,7 +30807,7 @@ was an English <a href="/wiki/Music_hall">music hall</a> singer, ...Creating a source set from attributes
When asked to create a source set given a string default source, a string - srcset and a string sizes:
+ srcset, a string sizes, and an element or null img:Let source set be an empty source set.
Let source size be the result of parsing sizes.
If default source is not the empty string and source set does not contain an image source with a pixel @@ -30737,6 +30845,9 @@ was an English <a href="/wiki/Music_hall">music hall</a> singer, ...elements with el's parent node's child elements, retaining relative order.
Let img be el if el is an img element,
+ otherwise null.
For each child in elements:
@@ -30777,7 +30888,7 @@ was an English <a href="/wiki/Music_hall">music hall</a> singer, ...Let el's source set be the result of creating a source set given default source, srcset, - and sizes.
Return.
@@ -30805,8 +30916,9 @@ was an English <a href="/wiki/Music_hall">music hall</a> singer, ...match the environment, continue to the next child.Parse child's sizes attribute, - and let source set's source size be the returned value.
Parse child's sizes attribute + with img, and let source set's source size be the returned + value.
If child has a type attribute, and its
value is an unknown or unsupported MIME type, continue to the next child.
When asked to parse a sizes attribute from an element, parse a - comma-separated list of component values from the value of the element's sizes - attribute (or the empty string, if the attribute is absent), and let unparsed sizes - list be the result.
- -For each unparsed size in unparsed sizes list:
+When asked to parse a sizes attribute from an element element, with an
+ img element or null img:
Remove all consecutive <whitespace-token>s - from the end of unparsed size. - If unparsed size is now empty, - that is a parse error; - continue.
Let unparsed sizes list be the result of parsing a comma-separated list of component values from the + value of element's sizes attribute (or the empty string, if the + attribute is absent).
If the last component value in unparsed size - is a valid non-negative <source-size-value>, - let size be its value - and remove the component value from unparsed size. - Any CSS function other than the math functions is invalid. - Otherwise, there is a parse error; - continue.
Let size be null.
Remove all consecutive <whitespace-token>s - from the end of unparsed size. - If unparsed size is now empty, - return size and exit this algorithm. - If this was not the last item in unparsed sizes list, - that is a parse error.
For each unparsed size in unparsed sizes list:
-Parse the remaining component values in unparsed size - as a <media-condition>. - If it does not parse correctly, - or it does parse correctly but the <media-condition> evaluates to false, - continue.
Remove all consecutive <whitespace-token>s + from the end of unparsed size. + If unparsed size is now empty, + then that is a parse error; + continue.
Return size and exit this algorithm.
If the last component value in unparsed size + is a valid non-negative <source-size-value>, + then set size to its value + and remove the component value from unparsed size. + Any CSS function other than the math functions is invalid. + Otherwise, there is a parse error; + continue.
Remove all consecutive <whitespace-token>s
+ from the end of unparsed size.
+ If unparsed size is now empty,
+ then return size.
+ If this was not the keyword auto and
+ it was not the last item in unparsed sizes list,
+ that is a parse error.
Parse the remaining component values in unparsed size + as a <media-condition>. + If it does not parse correctly, + or it does parse correctly but the <media-condition> evaluates to false, + continue.
If the above algorithm exhausts unparsed sizes list without returning a
- size value, then return 100vw.
If size is not auto, then return
+ size.
Assert: size is null or auto.
If img is null, or img's loading attribute is not in the Lazy state, or img is not being
+ rendered, or img's concrete object size ignoring natural
+ dimensions width is zero, then return 100vw.
Return the concrete object size ignoring natural dimensions width of + img, in CSS pixels.
While a valid source size list only contains a bare <source-size-value> +
It is invalid to use a bare <source-size-value> that is a <length> (without an accompanying <media-condition>) - as the last entry in the <source-size-list>, - the parsing algorithm technically allows such at any point in the list, + as an entry in the <source-size-list> that is not the last entry. + However, the parsing algorithm allows it at any point in the <source-size-list>, and will accept it immediately as the size if the preceding entries in the list weren't used. This is to enable future extensions, - and protect against simple author errors such as a final trailing comma.
+ and protect against simple author errors such as a final trailing comma. + A bareauto keyword is allowed to have other entries
+ following it to provide a fallback for legacy user agents.
The user agent may at any time run the following algorithm to update an img
- element's image in order to react to changes in the environment. (User agents are not
- required to ever run this algorithm; for example, if the user is not looking at the page any
- more, the user agent might want to wait until the user has returned to the page before determining
- which image to use, in case the environment changes again in the meantime.)
The user agent may at any time run the following algorithm to update an img
+ element's image in order to react to changes in the
+ environment. (User agents are not required to ever run this algorithm; for example,
+ if the user is not looking at the page any more, the user agent might want to wait until the user
+ has returned to the page before determining which image to use, in case the environment changes
+ again in the meantime.)
User agents are encouraged to run this algorithm in particular when the user changes the viewport's size (e.g. by resizing the window or changing the page zoom), and when @@ -47300,10 +47434,10 @@ interface HTMLInputElement : HTMLElement {
The IDL attributes width and height must return the rendered width and height of the
- image, in CSS pixels, if an image is being rendered, and
- is being rendered to a visual medium; or else the natural
- width and height of the image, in CSS pixels, if an image is available but not being rendered to a visual medium; or else 0,
+ image, in CSS pixels, if an image is being rendered; or
+ else the natural width and height of the image, in
+ CSS pixels, if an image is available but not being rendered; or else 0,
if no image is available. When the input
element's type attribute is not in the Image Button state, then no image is