画像（埋め込みの内容） — Images ( Embedded content )

4.8.4.1.1. 適応的な画像

~CSSと媒体~queryを利用すれば、利用者の環境に動的に適応するような~graphic的な頁~layoutを構築できる — 特に，異なる`表示域$寸法と画素~密度に応じて。 しかしながら，内容に対しては~CSSは助けにならない — その代わりとして、 `img$e 要素の `srcset$a 属性, および `picture$e 要素がある。 この節では、これらの特色機能の用法を示す見本~事例を順に見ていく。 ◎ CSS and media queries can be used to construct graphical page layouts that adapt dynamically to the user's environment, in particular to different viewport dimensions and pixel densities. For content, however, CSS does not help; instead, we have the img element's srcset attribute and the picture element. This section walks through a sample case showing how to use these features.

次の状況を考える： ~screenが幅広のときは（ 600 `px$css より幅広），名前 `a-rectangle.png^v の 300×150 画像が利用され、 より狭い~screenのときは（ 600 `px$css 以下） より小さい 100×100 の画像 `a-square.png^v が利用されることになるような。 このための~markupは、次の様な見かけになるであろう： ◎ Consider a situation where on wide screens (wider than 600 CSS pixels) a 300×150 image named a-rectangle.png is to be used, but on smaller screens (600 CSS pixels and less), a smaller 100×100 image called a-square.png is to be used. The markup for this would look like this:

注記： `alt$a 属性~内に何を置くかについての詳細は、`~textを画像の代替として供する際の要件$ 節を見よ。 ◎ For details on what to put in the alt attribute, see the Requirements for providing text to act as an alternative for images section.

ここでの問題は、~UAにとっては，当の画像を読込んでいる間 画像に利用する寸法を知れるとは限らないことである。 ~CSSと~CSS媒体~queryを用いて寸法を供すれば、頁を読込んでいる間に ~layoutが何回も再flowされるのを避けれる： ◎ The problem with this is that the user agent does not necessarily know what dimensions to use for the image when the image is loading. To avoid the layout having to be reflowed multiple times as the page is loading, CSS and CSS media queries can be used to provide the dimensions:

代替として， `width$a, `height$a 属性を利用すれば、旧来の~UA用にも横幅と縦幅を供せる — ~CSSは `picture$e を~supportする~UAにだけ用いることにして： ◎ Alternatively, the width and height attributes can be used to provide the width and height for legacy user agents, using CSS just for the user agents that support picture:

`img$e 要素に利用されている `src$a 属性は、 `picture$e 要素を~supportしない旧来の~UAに対しては，利用する画像の~URLを与える。 ここで、どの画像を `src$a 属性に供するかの 問いが浮かび上がる。 ◎ The img element is used with the src attribute, which gives the URL of the image to use for legacy user agents that do not support the picture element. This leads to a question of which image to provide in the src attribute.

作者が 旧来の~UAでは最~大の画像を求める場合、~markupは，次のようにも記せる： ◎ If the author wants the biggest image in legacy user agents, the markup could be as follows:

しかしながら，旧来の携帯機~UAの方が重要な場合、 3 個の画像すべてを `source$e 要素~内に挙げれば `src$a 属性を まるごと上書きできる： ◎ However, if legacy mobile user agents are more important, one can list all three images in the source elements, overriding the src attribute entirely.

この場合の `src$a 属性は，実際に `picture$e を~supportする~UAからは まるごと無視されるので、どの画像であれ，その大きさに関わらず既定として与えれる： ◎ Since at this point the src attribute is actually being ignored entirely by picture-supporting user agents, the src attribute can default to any image, including one that is neither the smallest nor biggest:

上では，最大~寸法（`表示域$のそれ）を与えるため、画像に意図される `max-width^css ~media特色機能が利用されている。 代わりに `min-width^css も利用できる。 ◎ Above the max-width media feature is used, giving the maximum (viewport) dimensions that an image is intended for. It is also possible to use min-width instead.

4.8.4.2.1. ~srcset属性

`~srcset属性@ には、この節に定義される要件が課される。 ◎ A srcset attribute is an attribute with requirements defined in this section.

【 この “~srcset属性” は、［ `source^e 要素の `srcset$aS 属性, `img^e 要素の `srcset$a 属性 ］の総称を表す。 】

各 `画像~候補~文字列@ は、挙げられる順に，次の成分からなる — この~listの他にも，その下に述べる制約がある： ◎ An image candidate string consists of the following components, in order, with the further restrictions described below this list:

1. 0 個~以上の`~ASCII空白$ ◎ Zero or more ASCII whitespace.
2. 1 個の`妥当かつ空でない~URL$であって， 先頭, 末尾の両~文字とも `002C^U `,^smb でないものであって、対話的でも, 多頁でも, ~scriptありでもない画像~資源（~animate化されていてもよい）を参照しているもの。 ◎ A valid non-empty URL that does not start or end with a U+002C COMMA character (,), referencing a non-interactive, optionally animated, image resource that is neither paged nor scripted.
3. 0 個~以上の`~ASCII空白$ ◎ Zero or more ASCII whitespace.

4. 次のうち，いずれか 1 つ： ◎ Zero or one of the following:

   • 空~文字列

   • `横幅~記述子@ を与える，次の並び：

     1. 1 個の`~ASCII空白$
     2. 1 個の`妥当な非負~整数$であって、 0 より大きい数を与えるもの — これは `横幅~値@ を表現する
     3. 1 個の文字 `0077^U `w^smb
     ◎ A width descriptor, consisting of: ASCII whitespace, a valid non-negative integer giving a number greater than zero representing the width descriptor value, and a U+0077 LATIN SMALL LETTER W character.

   • `画素~密度~記述子@ を与える，次の並び：

     1. 1 個の`~ASCII空白$
     2. 1 個の`妥当な浮動小数点数$であって、 0 より大きい数を与えるもの — これは `密度~値@ を表現する
     3. 1 個の文字 `0078^U `x^smb
     ◎ A pixel density descriptor, consisting of: ASCII whitespace, a valid floating-point number giving a number greater than zero representing the pixel density descriptor value, and a U+0078 LATIN SMALL LETTER X character.

   【 これらの記述子は、文脈に応じて，そのような文字列を指すこともあれば, 抽象的な値~型を意味することもある。 】

5. 0 個~以上の`~ASCII空白$ ◎ Zero or more ASCII whitespace.

要素の ある`画像~候補~文字列$に `横幅~記述子$が指定されている場合、他のすべての`画像~候補~文字列$にも`横幅~記述子$が指定され~MUST。 ◎ If an image candidate string for an element has the width descriptor specified, all other image candidate strings for that element must also have the width descriptor specified.

`画像~候補~文字列$の`横幅~記述子$にて指定される`横幅~値$は、`画像~候補~文字列$の~URLで与えられる資源に`内在的~横幅$がある場合には，それに合致し~MUST。 ◎ The specified width in an image candidate string's width descriptor must match the intrinsic width in the resource given by the image candidate string's URL, if it has an intrinsic width.

要素が`~srcset属性$を有する場合、その要素に対する どの`画像~候補~文字列$にも`横幅~記述子$が指定され~MUST。 ◎ If an element has a srcset attribute present, all image candidate strings for that element must have the width descriptor specified.

【 意図不明な要件 — この仕様の`画素~密度~記述子$に関する記述すべてが無意味と化してしまう。 】

4.8.4.2.2. ~sizes属性

`~sizes属性@ には、この節に定義される要件が課される。 ◎ A sizes attribute is an attribute with requirements defined in this section.

【 この “~sizes属性” は、［ `source^e 要素の `sizes$aS 属性, `img^e 要素の `sizes$a 属性 ］の総称を表す。 】

指定する値は、`妥当な~source~size~list$で~MUST。 ◎ If present, the value must be a valid source size list.

`妥当な~source~size~list@ は、次の文法に合致する文字列とする： `CSSVALUES$r `MQ$r ◎ A valid source size list is a string that matches the following grammar: [CSSVALUES] [MQ]

`source-size-list@t = [ `source-size$t# , ]? `source-size-value$t
`source-size@t = `media-condition$t `source-size-value$t
`source-size-value@t = `length$t

`source-size-value$t は、負になっては~MUST_NOTことに加え，`~math関数$以外の~CSS関数が利用されては~MUST_NOT。 ◎ A <source-size-value> must not be negative, and must not use CSS functions other than the math functions.

`source-size-value$t は、画像に意図される~layout横幅を与える。 作者は、 `media-condition$t で環境ごとに異なる横幅を指定できる。 ◎ The <source-size-value> gives the intended layout width of the image. The author can specify different widths for different environments with <media-condition>s.

注記： `source-size-value$t においては、百分率は許容されない — 何に相対的になるかについての混同を避けるため。 `表示域$の横幅に相対的な~sizeには、 `vw$css 単位を利用できる。 ◎ Percentages are not allowed in a <source-size-value>, to avoid confusion about what it would be relative to. The 'vw' unit can be used for sizes relative to the viewport width.

4.8.4.3.1. 画像をいつ得るか

~UAは、`閲覧文脈$において`~scriptingは不能化されて$いるならば、画像を即時に得ても, 必要時に得てもよい。 逆に，`~scriptingは可能化されて$いるならば、画像を即時に得~MUST。 ◎ In a browsing context where scripting is disabled, user agents may obtain images immediately or on demand. In a browsing context where scripting is enabled, user agents must obtain images immediately.

~UAは、 `img$e 要素の画像を必要時に得る場合は、次に従わ~MUST： ◎ A user agent that obtains images on demand must＼

• ［ 要素の`現在の要請$の`状態$ ~EQ `不可用$st ］場合に限り、要素の画像~dataが必要になり次第（すなわち，必要時に），`画像~dataを更新する$。 ◎ update the image data of an img element whenever it needs the image data (i.e., on demand), but only if the img element's current request's state is unavailable.＼
• 要素が`関連する変異$を経た時点で，［ 要素の`現在の要請$の`状態$ ~SET `不可用$st ］に戻す。 ◎ When an img element has experienced relevant mutations, if the user agent only obtains images on demand, the img element's current request's state must return to unavailable.

4.8.4.3.2. ~DOM変異に対する反応-法

`img$e 要素 %img に `関連する変異@ とは、次のいずれかが生じたことを表す： ◎ The relevant mutations for an img element are as follows:

• %img の［ `src$a, `srcset$a, `width$a, `sizes$a ］属性のうちいずれかが［ 設定- ／ 変更- ／ 除去- ］された。 ◎ The element's src, srcset, width, or sizes attributes are set, changed, or removed.
• %img が `src$a 属性を有している下で，その値が前と同じ値に設定された — この場合 ⇒ `画像~dataを更新する$際には、［ `~animation再始動~flag^i ~SET ~ON ］にされ~MUST。 ◎ The element's src attribute is set to the same value as the previous value. This must set the restart animation flag for the update the image data algorithm.
• %img の `crossorigin$a 属性の状態が変化した。 ◎ The element's crossorigin attribute's state is changed.
• %img は `picture$e 要素の子として`挿入された$node。 ◎ ↓

• %img の親は `picture$e 要素である下で，次のいずれかが生じた： ◎ ↓

  • %img は親から`除去された$node。 ◎ The element is inserted into or removed from a picture parent element.
  • %img に先行する同胞として `source$e 要素が`挿入された$node。 ◎ The element's parent is a picture element and a source element is inserted as a previous sibling.

• %img の親は `picture$e 要素である, かつ %img に先行する同胞に `source$e 要素 %source がある下で，次のいずれかが生じた：

  • %source は`除去された$node。
  • %source の［ `srcset$aS, `sizes$aS, `media$aS, `type$aS ］属性のうちいずれかが［ 設定- ／変更- ／ 除去- ］された。
  ◎ The element's parent is a picture element and a source element that was a previous sibling is removed. ◎ The element's parent is a picture element and a source element that is a previous sibling has its srcset, sizes, media, or type attributes set, changed, or removed.
• %img に対する`受入-時の手続き$が走った。 ◎ The element's adopting steps are run.

4.8.4.3.3. 可用な画像の~list

各 `文書$は `可用な画像~list@ を持ってい~MUST。 この~list内の~entryにされる各 画像は： ◎ Each Document object must have a list of available images. Each image in this list is＼

• ( `絶対~URL$, ~mode, `生成元$または ε ) からなる組による~keyで識別される — ここで：

  • ~modeは `~CORS設定群~属性$がとり得る状態と同じ~~範囲の値をとる。
  • 3 個目の成分は、［ ~mode ~EQ `~NoCORS$st ］の場合は，常に ε （なし）にされる。
  ◎ identified by a tuple consisting of an absolute URL, a CORS settings attribute mode, and, if the mode is not No CORS, an origin.＼
• 加えて， `上層~caching無視-~flag@ も伴われる。 ◎ Each image furthermore has an ignore higher-layer caching flag.＼

~UAは，いつでも、異なる`文書$~間で，一方の`可用な画像~list$内の~entryを他方へ複製してよい（例： ~UAは， ある`文書$の作成-時に，他の`文書$~内に読込まれたすべての画像を~listに追加できる）。ただし、この仕方で複製された~entryに対しては： ◎ User agents may copy entries from one Document object's list of available images to another at any time (e.g. when the Document is created, user agents can add to it all the images that are loaded in other Documents),＼

• その~keyを変更しては~MUST_NOT。 ◎ but must not change the keys of entries copied in this way when doing so, and＼
• その`上層~caching無視-~flag$は ~OFF にし~MUST。 ◎ must unset the ignore higher-layer caching flag for the copied entry.＼

~UAは，いつでも、`可用な画像~list$内から画像を除去してもよい（例：~memoryを節約する）。ただし，除去する~entryの［ `上層~caching無視-~flag$ ~EQ ~OFF ］の場合は、当の資源~用の上層~caching意味論に適切になるよう除去し~MUST（例： ~HTTP `Cache-Control$h 応答~header）。 ◎ User agents may also remove images from such lists at any time (e.g. to save memory). User agents must remove entries in the list of available images as appropriate given higher-layer caching semantics for the resource (e.g. the HTTP `Cache-Control` response header) when the ignore higher-layer caching flag is unset.

注記： `可用な画像~list$は、~HTTPによる~cachingが許容されないときでも，［ `src$a 属性が 以前に読込んだ~URLに変更された際に、同じ文書~内の画像を再~downloadするのを避けて， 同期的な切替えを可能化する ］ために意図されている。 それは、［ 前の画像をまだ読込んでいる間に，同じ画像を再~downloadするのを避ける ］ために利用されるものではない。 ◎ The list of available images is intended to enable synchronous switching when changing the src attribute to a URL that has previously been loaded, and to avoid re-downloading images in the same document even when they don't allow caching per HTTP. It is not used to avoid re-downloading the same image while the previous image is still loading.

注記： ~UAは、画像~dataを`可用な画像~list$とは別々に格納することもできる。 ◎ The user agent can also store the image data separately from the list of available images.

例えば、資源に［ `must-revalidate$v を値にとる ~HTTP `Cache-Control$h 応答~header ］が伴われていて，［ 資源の`上層~caching無視-~flag$ ~EQ ~OFF ］の場合、~UAは，それを`可用な画像~list$から除去することになるが、画像~dataは別々に保っておいて，~serverが ~status~code `304^st （ Not Modified ）で応答してきたときには，それを利用することもできる。 ◎ For example, if a resource has the HTTP response header `Cache-Control: must-revalidate`, and its ignore higher-layer caching flag is unset, the user agent would remove it from the list of available images but could keep the image data separately, and use that if the server responds with a 304 Not Modified status.

4.8.4.3.4 画像の復号-法

画像~dataは、~file~sizeを抑制するため，通例的に符号化される。 すなわち、~UAが画像を~screenに呈示する前に，~dataは復号される必要がある。 `復号-@ は、画像の媒体~dataを~screenに呈示するに相応しい~bitmap形に変換する処理-である。 この処理-は、内容を呈示するときに孕まれる他の処理-に比して，低速にもなり得ることに注意。 したがって~UAは、最良の利用者~体験を~~供するため，復号をいつ遂行するか選べる。 ◎ Image data is usually encoded in order to reduce file size. This means that in order for the user agent to present the image to the screen, the data needs to be decoded. Decoding is the process which converts an image's media data into a bitmap form, suitable for presentation to the screen. Note that this process can be slow relative to other processes involved in presenting content. Thus, the user agent can choose when to perform decoding, in order to create the best user experience.

画像の復号は、それが完遂するまで 他の内容の呈示を防止するならば，同期的という。 これには概して、画像と他の内容を，同時かつ不可分に呈示する効果がある。 しかしながら、この呈示は，復号にかかった時間だけ遅延される。 ◎ Image decoding is said to be synchronous if it prevents presentation of other content until it is finished. Typically, this has an effect of atomically presenting the image and any other content at the same time. However, this presentation is delayed by the amount of time it takes to perform the decode.

画像の復号は、他の内容の呈示を防止しないならば，非同期的という。 これには、画像でない内容を より高速に呈示する効果がある。 しかしながら，復号-が完遂するまで、画像~内容は~screenに~~現れない。 復号-が完遂したなら，~screenは画像で更新される。 ◎ Image decoding is said to be asynchronous if it does not prevent presentation of other content. This has an effect of presenting non-image content faster. However, the image content is missing on screen until the decode finishes. Once the decode is finished, the screen is updated with the image.

同期的, 非同期的 どちらの復号~modeであれ，最終的な内容が~screenに呈示されるまでに費やされる時間は同じになる。 主な相違は、~UAが最終的な内容を呈示するに先立って，画像でない内容を呈示するかどうかになる。 ◎ In both synchronous and asynchronous decoding modes, the final content is presented to screen after the same amount of time has elapsed. The main difference is whether the user agent presents non-image content ahead of presenting the final content.

~UAが［ 同期的, 非同期的 ］どちらで復号するか決めるのを援助するため、 `img$e 要素には `decoding$a 属性を設定できる。 この属性がとれる値は、 `画像~復号~hint@ ~keywordである： ◎ In order to aid the user agent in deciding whether to perform synchronous or asynchronous decode, the decoding attribute can be set on img elements. The possible values of of the decoding attribute are the following image decoding hint keywords:

~UAは，画像を`復号-$するときは、 `decoding$a 属性の状態にて指示された選好を尊重するべきである。 指示された状態が `Auto$st の場合、~UAは，復号の挙動を自由に選べる。 ◎ When decoding an image, the user agent should respect the preference indicated by the decoding attribute's state. If the state indicated is auto, then the user agent is free to choose any decoding behavior.

`decode$m ~methodを用いて，復号の挙動を制御することも可能である。 この~methodは、［ 内容を~screenに呈示する処理-からは独立に，`復号-$を遂行する ］ので， `decoding$a 属性からは影響されない。 ◎ It is also possible to control the decoding behavior using the decode() method. Since the decode() method performs decoding independently from the process responsible for presenting content to screen, it is unaffected by the decoding attribute.

4.8.4.3.5. 画像~dataの更新-法

~UAは， `img$e 要素 %img の `画像~dataを更新する@ ときは、所与の ( `~animation再始動~flag^i （省略時は ~OFF ）) に対し，次の手続きを走らせ~MUST： ◎ 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:

1. ~IF［ %img の`~node文書$は`作動中$docでない ］： ◎ If the element's node document is not the active document, then:

   1. この~algoを`並列的$に走らせ続ける ◎ Continue running this algorithm in parallel.
   2. %img の`~node文書$が`作動中$docになるまで待機する ◎ Wait until the element's node document is the active document.
   3. ~IF［ %img に対し この~algoの別の~instanceが，この~instanceより後に開始されていた（それが早々に ~RET して，最早~走ってない場合でも） ］ ⇒ ~RET ◎ If another instance of this algorithm for this img element was started after this instance (even if it aborted and is no longer running), then return.
   4. この~algoを~~静止すると同時に，~~再開するための`小taskを~queueする$ 【並列的に走らすのは、ここまで】 ◎ Queue a microtask to continue this algorithm.

2. ~IF［ ~UAは画像を~supportできない ］~OR［ 画像の~supportは不能化されている ］： ◎ If the user agent cannot support images, or its support for images has been disabled, then＼

   1. %img の`現在の要請$による`画像~要請を中止する$ ◎ abort the image request for the current request and＼
   2. %img の`処理待ち要請$による`画像~要請を中止する$ ◎ the pending request,＼
   3. %img の`現在の要請$の`状態$ ~SET `不可用$st ◎ set current request's state to unavailable,＼
   4. %img の`処理待ち要請$ ~SET ε ◎ set pending request to null, and＼
   5. ~RET ◎ return.
3. ( %被選定~source, %被選定~画素~密度 ) ~LET ( ε, ε ) ◎ Let selected source be null and selected pixel density be undefined.
4. ~IF［ %img は`~srcsetまたは~pictureを利用して$いない ］~AND［ %img は `src$a 属性 %src を有する ］~AND［ %src の値 ~NEQ 空~文字列 ］ ⇒ ( %被選定~source, %被選定~画素~密度 ) ~SET ( %src の値, 1.0 ) ◎ If the element does not use srcset or picture and it has a src attribute specified whose value is not the empty string, then set selected source to the value of the element's src attribute and set selected pixel density to 1.0.
5. %img の`最後に選定された~source$ ~SET %被選定~source ◎ Set the element's last selected source to selected source.

6. `(A)^i：
   ~IF［ %被選定~source ~NEQ ε ］： ◎ If selected source is not null, then:

   1. %文書 ~LET %img の`~node文書$ ◎ ↓
   2. %~URL文字列 ~LET %被選定~source を %文書 に`相対的に構文解析-$した`結果の~URL文字列$ ◎ Parse selected source, relative to the element's node document.＼
   3. ~IF［ %~URL文字列 ~EQ ~error ］ ⇒ ~BREAK `(A)^i ◎ If that is not successful, then abort this inner set of steps. Otherwise, let urlString be the resulting URL string.

   4. %~key ~LET 次の成分からなる~key：

      1. %~URL文字列
      2. %img の `crossorigin$a 内容~属性の状態
      3. %~CORS属性~状態 ~NEQ `~NoCORS$st ならば %文書 の`生成元$ ／ ~ELSE_ ε
      ◎ Let key be a tuple consisting of urlString, the img element's crossorigin attribute's mode, and, if that mode is not No CORS, the node document's origin.

   5. ~IF［ %文書 の`可用な画像~list$内に， %~key に対応する~entry %~entry はある ］： ◎ If the list of available images contains an entry for key, then:

      1. %~entry の`上層~caching無視-~flag$ ~SET ~ON ◎ Set the ignore higher-layer caching flag for that entry.
      2. %img の`現在の要請$による`画像~要請を中止する$ ◎ Abort the image request for the current request and＼
      3. %img の`処理待ち要請$による`画像~要請を中止する$ ◎ the pending request.
      4. %img の`処理待ち要請$ ~SET ε ◎ Set pending request to null.
      5. %img の`現在の要請$ ~LET 次のようにされた新たな`画像~要請$ ⇒＃ `画像~data$ ~SET %~entry の`画像~data$； `状態$ ~SET `完全に可用$st ◎ Let current request be a new image request whose image data is that of the entry and whose state is completely available.
      6. 画像の呈示を適切に更新する ◎ Update the presentation of the image appropriately.
      7. %img の`現在の画素~密度$ ~SET %被選定~画素~密度 ◎ Set current request's current pixel density to selected pixel density.

      8. 次を走らす`~taskを~queueする$： ◎ Queue a task to:

         1. ~IF［ `~animation再始動~flag^i ~EQ ~ON ］ ⇒ `~animationを再始動する$ ◎ If restart animation is set, then restart the animation.
         2. %img の`現在の要請$の`現在の~URL$ ~SET %~URL文字列 ◎ Set current request's current URL to urlString.
         3. %img に向けて，名前 `load$et の`~eventを発火する$ ◎ Fire an event named load at the img element.
      9. ~RET ◎ Abort the update the image data algorithm.

7. 次の手続きを`同期区間$として，`安定~状態を待受ける$： ◎ Await a stable state, allowing the task that invoked this algorithm to continue. The synchronous section consists of all the remaining steps of this algorithm until the algorithm says the synchronous section has ended. (Steps in synchronous sections are marked with ⌛.)

   1. ~IF［ %img に対するこの~algoの別の~instanceが，この~instanceより後に開始されていた（それが早々に ~RET して，最早~走ってない場合でも） ］ ⇒ ~RET ◎ ⌛ If another instance of this algorithm for this img element was started after this instance (even if it aborted and is no longer running), then return.

      注記： 複数の要請を避けるため、効果があるのは，最後の~instanceに限られる — 例えば［ `src$a, `srcset$a, `crossorigin$a ］属性が続けて設定されたときでも。 ◎ Only the last instance takes effect, to avoid multiple requests when, for example, the src, srcset, and crossorigin attributes are all set in succession.

   2. %現~要請 ~LET %img の`現在の要請$ ◎ ↓
   3. ( %被選定~source, %被選定~画素~密度 ) ~LET %img の`画像~sourceを選定する$ ◎ ⌛ Let selected source and selected pixel density be the URL and pixel density that results from selecting an image source, respectively.

   4. ~IF［ %被選定~source ~EQ ε ］： ◎ ⌛ If selected source is null, then:

      1. %現~要請 の`状態$ ~SET `壊en$st ◎ ⌛ Set the current request's state to broken,＼
      2. %現~要請 による`画像~要請を中止する$ ◎ abort the image request for the current request and＼
      3. %img の`処理待ち要請$による`画像~要請を中止する$ ◎ the pending request, and＼
      4. %img の`処理待ち要請$ ~SET ε ◎ set pending request to null.
      5. 次を走らす`~taskを~queueする$ ⇒ %現~要請 の`現在の~URL$ ~SET 空~文字列 ◎ ⌛ Queue a task to change the current request's current URL to the empty string, and then,＼
      6. ~IF［ %img は `src$a 属性を有する ］~OR［ %img は`~srcsetまたは~pictureを利用して$いる ］ ⇒ %img に向けて，名前 `error$et の`~eventを発火する$ ◎ if the element has a src attribute or it uses srcset or picture, fire an event named error at the img element.
      7. ~RET ◎ ⌛ Return.
   5. 次を走らす`~taskを~queueする$ ⇒ %img に向けて，名前 `loadstart$et の`進捗~eventを発火する$ ◎ ⌛ Queue a task to fire a progress event named loadstart at the img element.
   6. %文書 ~LET %img の`~node文書$ ◎ ⌛ Parse selected source, relative to the element's node document, and＼
   7. ( %~URL~record, %~URL文字列 ) ~LET %被選定~source を %文書 に`相対的に構文解析-$した ( `結果の~URL~record$, `結果の~URL文字列$ ) ◎ let urlString be the resulting URL string.＼

   8. ~IF［ %~URL文字列 ~EQ ~error ］： ◎ If that is not successful, then:

      1. %現~要請 による`画像~要請を中止する$ ◎ ⌛ Abort the image request for the current request and＼
      2. %img の`処理待ち要請$による`画像~要請を中止する$ ◎ the pending request.
      3. %現~要請 の`状態$ ~SET `壊en$st ◎ ⌛ Set the current request's state to broken.
      4. %img の`処理待ち要請$ ~SET ε ◎ ⌛ Set pending request to null.

      5. 次を走らす`~taskを~queueする$： ◎ ⌛ Queue a task to＼

         1. %現~要請 の`現在の~URL$ ~SET %被選定~source ◎ change the current request's current URL to selected source,＼
         2. %img に向けて，名前 `error$et の`~eventを発火する$ ◎ fire an event named error at the img element and then＼
         3. %img に向けて，名前 `loadend$et の`~eventを発火する$ ◎ fire an event named loadend at the img element.
      6. ~RET ◎ ⌛ Return.
   9. %処理待ち要請 ~LET %img の`処理待ち要請$ ◎ ↓
   10. ~IF［ %処理待ち要請 ~NEQ ε ］~AND［ %~URL文字列 ~EQ %処理待ち要請 の`現在の~URL$ ］ ⇒ ~RET ◎ ⌛ If the pending request is not null and urlString is the same as the pending request's current URL, then return.

   11. ~IF［ %~URL文字列 ~EQ %現~要請 の`現在の~URL$ ］~AND［ %現~要請 の`状態$ ~EQ `部分的に可用$st ］： ◎ ⌛ If urlString is the same as the current request's current URL and current request's state is partially available, then＼

       1. %処理待ち要請 による`画像~要請を中止する$ ◎ abort the image request for the pending request,＼
       2. ~IF［ `~animation再始動~flag^i ~EQ ~ON ］ ⇒ 次を走らす`~taskを~queueする$ ⇒ `~animationを再始動する$ ◎ queue a task to restart the animation if restart animation is set, and＼
       3. ~RET ◎ return.
   12. ~IF［ %処理待ち要請 ~NEQ ε ］ ⇒ %処理待ち要請 による`画像~要請を中止する$ ◎ ⌛ If the pending request is not null, then abort the image request for the pending request.
   13. %画像~要請 ~LET 新たな`画像~要請$ ◎ ⌛ Set image request to a new image request＼
   14. %画像~要請 の`現在の~URL$ ~SET %~URL文字列 ◎ whose current URL is urlString.
   15. ~IF［ %現~要請 の`状態$ ~IN { `不可用$st, `壊en$st } ］ ⇒ %img の`現在の要請$ ~SET %画像~要請 ◎ ⌛ If current request's state is unavailable or broken, then set the current request to image request.＼
   16. ~ELSE ⇒ %img の`処理待ち要請$ ~SET %画像~要請 ◎ Otherwise, set the pending request to image request.
   17. %要請 ~LET `~CORSになり得る要請を作成する$( %~URL~record, `image^l, %img の`crossorigin$a 内容~属性の現在の状態 ) ◎ ⌛ Let request be the result of creating a potential-CORS request given urlString, "image", and the current state of the element's crossorigin content attribute.
   18. %要請 の`~client$rq ~SET %文書 の`Window$I ~objの`環境~設定群~obj$ ◎ ⌛ Set request's client to the element's node document's Window object's environment settings object.
   19. ~IF［ %img は`~srcsetまたは~pictureを利用して$いる ］ ⇒ %要請 の`起動元$rq ~SET `imageset^l ◎ ⌛ If the element uses srcset or picture, set request's initiator to "imageset".
   20. %要請 の`~referrer施策$rq ~SET %img の `referrerpolicy$a 属性の現在の状態 ◎ ⌛ Set request's referrer policy to the current state of the element's referrerpolicy attribute.

   21. %要請 を用いて`~fetch$すると同時に~fetch~algoの~instanceを %画像~要請 に結付ける ◎ ⌛ Fetch request. Let this instance of the fetching algorithm be associated with image request.

       `同期区間$はここで終端し、以降の手続きは，~fetchingによる~dataを取り逃がすことなく`並列的$に走らす。 加えて： ◎ ↓↓

       • このようにして得られた資源があれば、それが %画像~要請 の`画像~data$になる。 それは、［ `~CORS同一生成元$, `~CORS非同一生成元$ ］のいずれかになる — これは、画像~自身の`生成元$に影響する（例： `canvas$e 上で利用されるとき）。 ◎ The resource obtained in this fashion, if any, is image request's image data. It can be either CORS-same-origin or CORS-cross-origin; this affects the origin of the image itself (e.g. when used on a canvas).

       • 画像の~fetchingは、資源が~fetchされて `~network用~task源$から`~queueされ$た`~task$が走るまで（下に定義される）， %文書 の`~load~eventを遅延-$させ~MUST ◎ Fetching the image must delay the load event of the element's node document until the task that is queued by the networking task source once the resource has been fetched (defined below) has been run.

         あいにくこれは、利用者の局所~networkに対する原始的な~port-scanを遂行するためにも利用され得る（とりわけ，~scriptingとの併用で — 実際には，~scriptingは、そのような攻撃を~~実施するために必要とはされないが）。 ~UAは、この攻撃を軽減するため，上に述べたものより厳格な`生成元$~access制御~施策を実装してよいが、あいにく そのような施策は，概して既存の~Web内容と互換にならない。 ◎ This, unfortunately, can be used to perform a rudimentary port scan of the user's local network (especially in conjunction with scripting, though scripting isn't actually necessary to carry out such an attack). User agents may implement cross-origin access control policies that are stricter than those described above to mitigate this attack, but unfortunately such policies are typically not compatible with existing Web content.

       • 資源は`~CORS同一生成元$である場合、次をし~MUST ⇒ 画像が~fetchされている間に`~network用~task源$から`~queueされ$た各`~task$に対し ⇒ ~IF［ %画像~要請 ~EQ %img の`現在の要請$ ］ ⇒ %img に向けて，名前 `progress$et の`進捗~eventを発火する$ ◎ If the resource is CORS-same-origin, each task that is queued by the networking task source while the image is being fetched, if image request is the current request, must fire a progress event named progress at the img element.

8. 可能な限り早く，以下の項目のうち，最初に適用-可能なものに対応する段を走らす：

   この段における `画像~fetch~task@ とは、画像が~fetchされている間に`~network用~task源$から`~queueされ$ることになる，個々の`~task$を指すとする。

   ◎ ↑↑End the synchronous section, continuing the remaining steps in parallel, but without missing any data from fetching. ◎ As soon as possible, jump to the first applicable entry from the following list:

   資源の~MIME型 ~EQ `multipart/x-mixed-replace$mt ： ◎ If the resource type is multipart/x-mixed-replace

   次回の`画像~fetch~task$は、次の下位手続きを走らせ~MUST： ◎ The next task that is queued by the networking task source while the image is being fetched must run the following steps:

   1. %状態 ~LET ~UAは %画像~要請 の画像の寸法を［ 決定できたならば `部分的に可用$st ／ 何らかの致命的な仕方で得れないまでに壊れていると決定できたならば `壊en$st ］ ◎ ↓

   2. ~IF［ %画像~要請 ~EQ %img の`処理待ち要請$ ］：

      1. ~Assert†： ［ 完全に復号された本体部位が少なくとも 1 個以上ある ］~OR［ %状態 ~EQ `壊en$st ］
      2. %img の`現在の要請$による`画像~要請を中止する$
      3. %img の`処理待ち要請を現在の要請に昇格する$
      4. ~IF［ 完全に復号された本体部位はまだない ］~AND［ %状態 ~EQ `壊en$st ］ ⇒ %画像~要請 の`状態$ ~SET `壊en$st

      【† この ~Assert は訳者による補完。 原文では，この ~Assert が満たされない場合の挙動が記されておらず、満たされない場合，処理待ち要請が現在の要請に昇格する機会が来なくなってしまうので。 】

      ◎ If image request is the pending request and at least one body part has been completely decoded, abort the image request for the current request, upgrade the pending request to the current request. ◎ Otherwise, if image request is the pending request and the user agent is able to determine that image request's image is corrupted in some fatal way such that the image dimensions cannot be obtained, abort the image request for the current request, upgrade the pending request to the current request, and set the current request's state to broken.
   3. ~ELIF［ %画像~要請 ~EQ %img の`現在の要請$ ］~AND［ %画像~要請 の`状態$ ~EQ `不可用$st ］ ⇒ %画像~要請 の`状態$ ~SET %状態 ◎ Otherwise, if image request is the current request, its state is unavailable, and the user agent is able to determine image request's image's width and height, set the current request's state to partially available. ◎ Otherwise, if image request is the current request, its state is unavailable, and the user agent is able to determine that image request's image is corrupted in some fatal way such that the image dimensions cannot be obtained, set the current request's state to broken.

   各`画像~fetch~task$は、画像の呈示を更新し~MUSTが、新たな本体部位が来る度に，前の画像を置換し~MUST — ある本体部位が完全に復号された時点で，~UAは次を走らせ~MUST：

   1. %img の`現在の要請$の`状態$ ~SET `完全に可用$st
   2. 次を走らす`~taskを~queueする$ ⇒ %img に向けて，名前 `load$et の`~eventを発火する$

   ◎ Each task that is queued by the networking task source while the image is being fetched must update the presentation of the image, but as each new body part comes in, it must replace the previous image. Once one body part has been completely decoded, the user agent must set the img element's current request's state to completely available and queue a task to fire an event named load at the img element.

   注記： `multipart/x-mixed-replace$mt 画像~streamに対しては、 `progress$et ／ `loadend$et ~eventは発火されない。 ◎ The progress and loadend events are not fired for multipart/x-mixed-replace image streams.

   資源の~MIME型と~dataは 下に述べるように ~supportする画像~形式に対応する： ◎ If the resource type and data corresponds to a supported image format, as described below

   次回の`画像~fetch~task$は、次の下位手続きを走らせ~MUST： ◎ The next task that is queued by the networking task source while the image is being fetched must run the following steps:

   1. ~IF［ ~UAは %画像~要請 の画像の寸法を決定できた ］：

      1. ~IF［ %画像~要請 ~EQ %img の`現在の要請$ ］ ⇒ %img の呈示を適切に更新する
      2. %画像~要請 の`状態$ ~SET `部分的に可用$st
      ◎ If the user agent is able to determine image request's image's width and height, and image request is pending request, set image request's state to partially available. ◎ Otherwise, if the user agent is able to determine image request's image's width and height, and image request is current request, update the img element's presentation appropriately and set image request's state to partially available.

   2. ~ELSE（画像は 何らかの致命的な仕方で壊れていると決定できた） ：

      1. %img の`現在の要請$による`画像~要請を中止する$

      2. ~IF［ %画像~要請 ~EQ %img の`処理待ち要請$ ］：

         1. %img の`処理待ち要請$による`画像~要請を中止する$
         2. %img の`処理待ち要請を現在の要請に昇格する$
         3. %img の`現在の要請$の`状態$ ~SET `壊en$st
      3. %img に向けて，名前 `error$et の`~eventを発火する$
      4. %img に向けて，名前 `loadend$et の`~eventを発火する$
      ◎ Otherwise, if the user agent is able to determine that image request's image is corrupted in some fatal way such that the image dimensions cannot be obtained, and image request is pending request, abort the image request for the current request and the pending request, upgrade the pending request to the current request, set current request's state to broken, fire an event named error at the img element, fire an event named loadend at the img element. ◎ Otherwise, if the user agent is able to determine that image request's image is corrupted in some fatal way such that the image dimensions cannot be obtained, and image request is current request, abort the image request for image request, fire an event named error at the img element, fire an event named loadend at the img element.

   上の`~task$, および 後続の各`画像~fetch~task$は、次を走らせ~MUST：

   1. ~IF［ %画像~要請 ~EQ %img の`現在の要請$ ］ ⇒ 画像の呈示を更新する（例えば，画像が~progressive~JPEGの場合、各~packetは その画像の解像度を向上させ得る）

   ◎ That task, and each subsequent task, that is queued by the networking task source while the image is being fetched, if image request is the current request, must update the presentation of the image appropriately (e.g., if the image is a progressive JPEG, each packet can improve the resolution of the image).

   加えて、資源を~fetchし終えたときの最後の`画像~fetch~task$は、次の下位手続きを走らせ~MUST： ◎ Furthermore, the last task that is queued by the networking task source once the resource has been fetched must additionally run these steps:

   1. ~IF［ %画像~要請 ~EQ %img の`処理待ち要請$ ］： ◎ If image request is the pending request,＼

      1. %img の`現在の要請$による`画像~要請を中止する$ ◎ abort the image request for the current request,＼
      2. %img の`処理待ち要請を現在の要請に昇格する$ ◎ upgrade the pending request to the current request and＼
      3. %img の呈示を適切に更新する ◎ update the img element's presentation appropriately.
   2. %画像~要請 の`状態$ ~SET `完全に可用$st ◎ Set image request to the completely available state.
   3. %文書 の`可用な画像~list$に，画像を追加する — この画像は ⇒ ~key %~key で識別され, `上層~caching無視-~flag$ は ~ON にされるとする ◎ Add the image to the list of available images using the key key, with the ignore higher-layer caching flag set.

   4. ~IF［ %画像~要請 内の資源 は`~CORS同一生成元$である ］：

      1. %img に向けて名前 `load$et の`進捗~eventを発火する$
      2. %img に向けて名前 `loadend$et の`進捗~eventを発火する$

      ~ELSE：

      1. %img に向けて 名前 `load$et の`~eventを発火する$
      2. %img に向けて 名前 `loadend$et の`~eventを発火する$
      ◎ Fire a progress event or event named load at the img element, depending on the resource in image request. ◎ Fire a progress event or event named loadend at the img element, depending on the resource in image request.

   その他（ 画像~dataは~supportされる~file形式でない ）： ◎ Otherwise ◎ The image data is not in a supported file format; the user agent must＼

   1. %画像~要請 の`状態$ ~SET `壊en$st ◎ set image request's state to broken,＼
   2. %img の`現在の要請$による`画像~要請を中止する$ ◎ abort the image request for the current request＼
   3. %img の`処理待ち要請$による`画像~要請を中止する$ ◎ and the pending request,＼
   4. ~IF［ %画像~要請 ~EQ %img の`処理待ち要請$ ］ ⇒ %img の`処理待ち要請を現在の要請に昇格する$ ◎ upgrade the pending request to the current request if image request is the pending request, and then＼

   5. 次を走らす`~taskを~queueする$：

      1. %img に向けて，名前 `error$et の`~eventを発火する$
      2. %img に向けて，名前 `loadend$et の`~eventを発火する$
      ◎ queue a task to first fire an event named error at the img element and then fire an event named loadend at the img element.

~UAが，ある要素 %img に対し上の~algoを走らせている間は、 %img は`接続されて$いなくとも， %img の`~node文書$から %img への強い参照-が~MUST。 ◎ While a user agent is running the above algorithm for an element x, there must be a strong reference from the element's node document to the element x, even if that element is not connected.

`画像~要請$ %画像~要請 による `画像~要請を中止する@ ときは、次の手続きを走らす： ◎ To abort the image request for an image request image request means to run the following steps:

1. %画像~要請 の`画像~data$ ~SET ε ◎ Forget image request's image data, if any.
2. %画像~要請 による`~fetch$~algoの~instanceがあれば、それを中止した上で，その~algoにより生成された処理待ち~taskすべてを破棄する ◎ Abort any instance of the fetching algorithm for image request, discarding any pending tasks generated by that algorithm.

`img$e 要素の `処理待ち要請を現在の要請に昇格する@ ときは、次の手続きを走らす： ◎ To upgrade the pending request to the current request for an img element means to run the following steps:

1. %img の`現在の要請$ ~SET %img の`処理待ち要請$ ◎ Let the img element's current request be the pending request.
2. %img の`処理待ち要請$ ~SET ε ◎ Let the img element's pending request be null.

`進捗~eventまたは~eventを発火する@ ときは… ◎ To fire a progress event or event named type at an element e, depending on resource r, means to fire a progress event named type at e if r is CORS-same-origin, and otherwise fire an event named type at e.

【 この手続きは， 1 箇所からしか参照されていないので、その内容は， その箇所 に直に記すことにする。 】

4.8.4.3.6. 画像~sourceの選定-法

`img$e 要素 %img の `画像~sourceを選定する@ ときは、次を走らす — これは ( `~URL$を与える文字列, `密度~値$ ) の組を返す： ◎ When asked to select an image source for a given img element el, user agents must do the following:

1. %img の`~source集合を更新する$

   【 その結果、 %img の`~source集合$内のすべての~entryの`記述子$iSは，`画素~密度~記述子$に正規化されることに注意。 】

   ◎ Update the source set for el.
2. ~IF［ %img の`~source集合$は空である ］ ⇒ ~RET ( ε, ε ) ◎ If el's source set is empty, return null as the URL and undefined as the pixel density.
3. %~source集合 ~LET 空~集合 ◎ Otherwise, take el's source set and let it be source set.
4. %img の`~source集合$ 内の~EACH( ~entry %b ) に対し，順に ⇒ ~IF［ %b の`記述子$iSの`密度~値$は %~source集合 内のどの~entryのそれとも異なる ］ ⇒ %b を %~source集合 に追加する ◎ If an entry b in source set has the same associated pixel density descriptor as an earlier entry a in source set, then remove entry b. Repeat this step until none of the entries in source set have the same associated pixel density descriptor as an earlier entry.
5. %被選定~source ~LET ~UAに特有の方式で， %~source集合 から 1 個の `画像~source$を選んだ結果 ◎ In a user agent-specific manner, choose one image source from source set. Let this be selected source.
6. ~RET ( %被選定~source の`~URL文字列$iS, %被選定~source の`記述子$iSの`密度~値$ ) ◎ Return selected source and its associated pixel density.

4.8.4.3.7. ~source集合の更新-法

`img$e 要素 %img の `~source集合を更新する@ ときは、次を走らせ~MUST： ◎ When asked to update the source set for a given img element el, user agents must do the following:

1. %img の`~source集合$ ~SET 空の`~source集合$ ◎ Set el's source set to an empty source set. ◎ ↓↓If el has a parent node and that is a picture element, let elements be an array containing el's parent node's child elements, retaining relative order. Otherwise, let elements be array containing only el.
2. %~fallback横幅 ~LET ε ◎ ↓

3. ~IF［ %img は `width$a 属性を有する ］ ◎ If el has a width attribute, and＼

   1. %横幅 ~LET `寸法~値として構文解析する$( %img の `width$a 属性の値 ) ◎ parsing that attribute's value using the rules for parsing dimension values＼
   2. ~IF［ %横幅 ~NEQ ~error ］~AND［ %横幅 の種別 ~NEQ 百分率 ］ ⇒ %~fallback横幅 ~SET %横幅 ◎ doesn't generate an error or a percentage value, then let width be the returned integer value. Otherwise, let width be null.
4. %要素~list ~LET［ %img の親~node は `picture$e 要素であるならば %img に先行する同胞の `source$e 要素からなる同順の~list ／ ~ELSE_ 空~list ］ ◎ ↑↓
5. %要素~list に %img を付加する ◎ ↑↓

6. %要素~list 内の ~EACH ( %子 ) に対し： ◎ Iterate through elements, doing the following for each item child:

   1. %~source集合 ~LET ［ %子 は`~srcset属性$を有するならば次の結果 ／ ~ELSE_ 空の`~source集合$ ］ ⇒ %子 の`~srcset属性を構文解析する$ ◎ ↓

   2. ~IF［ %子 ~EQ %img ］： ◎ If child is el:

      1. ~IF［ 次の両者とも満たされる ］…：

         • %子 は `src$a 属性を有していて，その値 ~NEQ 空~文字列
         • %~source集合 内のどの`画像~source$の`記述子$iSも，［ ε , または［ `画素~密度~記述子$であって，その`密度~値$ ~NEQ 1 ］］：

         …ならば ⇒ %~source集合 に 次のようにされた新たな`画像~source$を付加する ⇒＃ `~URL文字列$iS ~SET %子 の`src$a 属性の値, `記述子$iS ~SET ε ◎ • If child has a srcset attribute, parse child's srcset attribute and let the returned source set be source set. Otherwise, let source set be an empty source set. • Parse child's sizes attribute with the fallback width width, and let source set's source size be the returned value. • If child has a src attribute whose value is not the empty string and source set does not contain an image source with a pixel density descriptor value of 1, and no image source with a width descriptor, append child's src attribute value to source set.

      2. ~BREAK ◎ • Normalize the source densities of source set. • Let el's source set be source set. • Return. If child is not a source element, continue to the next child. Otherwise, child is a source element.

   3. ~IF［ 次のいずれかが満たされる ］…：

      • %~source集合 は空である
      • ［ %子 は `media$aS 属性を有する ］~AND［ その値は`環境に合致して$いない ］
      • ［ %子 は `type$aS 属性を有する ］~AND［ その値は 未知の／未~supportの`~MIME型$である ］

      …ならば ⇒ ~CONTINUE

      ◎ • If child does not have a srcset attribute, continue to the next child. • Parse child's srcset attribute and let the returned source set be source set. • If source set has zero image sources, continue to the next child. • If child has a media attribute, and its value does not match the environment, continue to the next child. • Parse child's sizes attribute with the fallback width width, 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.
   4. ~BREAK ◎ ↓
7. %~source集合 の`~source~size$ ~LET %子 の`~sizes属性を構文解析する$( %~fallback横幅 ) ◎ ↑
8. %~source集合 の`~source密度を正規化する$ ◎ Normalize the source densities of source set.
9. %img の`~source集合$ ~SET %~source集合 ◎ Let el's source set be source set. ◎ Return.

注記： 各 `img$e 要素は、`画像~source$を選定するときに［ 自身, および 自身に先行する同胞 `source$e 要素たち ］を独立と見なし、他の（妥当でない）要素 — ［ 同じ `picture$e 要素~内の他の `img$e 要素 ／ 自身に後続する同胞の `source$e 要素 ］は無視する。 ◎ Each img element independently considers its previous sibling source elements plus the img element itself for selecting an image source, ignoring any other (invalid) elements, including other img elements in the same picture element, or source elements that are following siblings of the relevant img element.

4.8.4.3.8. ~srcset属性の構文解析-法

%要素 の `~srcset属性を構文解析する@ ときは、次を走らす： ◎ When asked to parse a srcset attribute from an element, parse the value of the element's srcset attribute as follows:

1. %入力 ~LET %要素 の`~srcset属性$の値 ◎ Let input be the value passed to this algorithm.
2. %位置 ~LET %入力 の中の最初の文字を指している`位置~変数$ ◎ Let position be a pointer into input, initially pointing at the start of the string.
3. %候補~list ~LET 空の`~source集合$ ◎ Let candidates be an initially empty source set.

4. ~WHILE 無条件： ◎ Splitting loop:＼

   1. %入力 内の %位置 から { `~ASCII空白$, `002C^U `,^smb } からなる`符号位置~並びを収集する$ ◎ Collect a sequence of code points that are ASCII whitespace or U+002C COMMA characters from input given position.＼
   2. ~IF［ 前~段にて 1 個~以上の文字 `002C^U `,^smb が収集された ］ ⇒ `構文解析-~error$ ◎ If any U+002C COMMA characters were collected, that is a parse error.
   3. ~IF［ %位置↗ ~EQ ε ］ ⇒ ~RET %候補~list ◎ If position is past the end of input, return candidates.
   4. %記述子 ~LET ε ◎ ↓
   5. %~url ~LET %入力 内の %位置 から `~ASCII空白$以外の`符号位置~並びを収集する$ ◎ Collect a sequence of code points that are not ASCII whitespace from input given position, and let that be url. ◎ ↓↓Let descriptors be a new empty list.

   6. ~IF［ %~url の最後の文字 ~EQ `002C^U `,^smb ］： ◎ If url ends with U+002C (,), then:

      1. %~url の末尾から連続する文字 `002C^U `,^smb をすべて除去する ◎ Remove all trailing U+002C COMMA characters from url.＼
      2. ~IF［ 前~段で 2 個~以上の文字が除去された ］ ⇒ `構文解析-~error$ ◎ If this removed more than one character, that is a parse error.

   7. ~ELSE：

      1. %記述子 ~LET ［ 下の “記述子を~token化する” 下位手続きを走らせた結果 ］を，その下の “記述子 構文解析器” にかけた結果 【この訳では、原文の~algoを，これらの手続きに分割して記述している。】
      2. ~IF［ %記述子 ~EQ `~error^i ］ ⇒ ~CONTINUE
      ◎ Otherwise: ◎ ↓↓

   8. %候補~list に 次のようにされた新たな`画像~source$を付加する ⇒＃ `~URL文字列$iS ~SET %~url, `記述子$iS ~SET %記述子 ◎ ↓↓

上の`~srcset属性を構文解析する$手続きに利用される，記述子を~token化する下位手続きは、次を走らす： ◎ Descriptor tokenizer:＼

注記： 将来の追加と互換にするため、この~algoは，複数の記述子と丸括弧を伴う記述子を~supportする。 ◎ In order to be compatible with future additions, this algorithm supports multiple descriptors and descriptors with parens.

【 原文による~algoは，（おそらく拡張を視野に）文字~単位で細かく処理しているが、この訳では，流れを追いやすくなる形に等価に再構成している。 】

上の`~srcset属性を構文解析する$手続きに利用される，記述子 構文解析器は、所与の %記述子~list に対し，次を走らす： ◎ Descriptor parser:＼

1. %~error ~LET `no^i ◎ Let error be no.

2. ( %横幅, %縦幅, %密度 ) ~LET ( ε, ε, ε )

   【 %縦幅 （原文での名前は “future-compat-h” ）は，現時点では用を為さないが、将来の追加と互換にするため，予め処理に組み込まれている。 】

   ◎ Let width be absent. ◎ Let density be absent. ◎ Let future-compat-h be absent.

3. %記述子~list 内の ~EACH ( %記述子~token ) に対し： ◎ For each descriptor in descriptors, run the appropriate set of steps from the following list:

   1. %種別 ~LET %記述子~token の最後の文字 ◎ ↓
   2. %数 ~LET %記述子~token から最後の文字を除去した結果 ◎ ↓

   3. ~IF［ %種別 ~EQ `0077^U `w^smb ］~AND［ %数 は`妥当な非負~整数$である ］： ◎ If the descriptor consists of a valid non-negative integer followed by a U+0077 LATIN SMALL LETTER W character

      1. ~IF［ ~UAは `sizes$a 属性を~supportしない ］ ⇒ %~error ~SET `yes^i ◎ If the user agent does not support the sizes attribute, let error be yes.

         注記： 適合~UAは `sizes$a 属性を~supportすることになる。 しかしながら，実施においては、~UAは概して，特色機能を漸増的に実装して出荷する。 ◎ A conforming user agent will support the sizes attribute. However, user agents typically implement and ship features in an incremental manner in practice.

      2. ~IF［ %横幅 ~NEQ ε ］~OR［ %密度 ~NEQ ε ］ ⇒ %~error ~SET `yes^i ◎ If width and density are not both absent, then let error be yes.
      3. %数 ~SET `非負~整数として構文解析する$( %数 ) ◎ Apply the rules for parsing non-negative integers to the descriptor.＼
      4. ~IF［ %数 ~EQ 0 ］ ⇒ %~error ~SET `yes^i ◎ If the result is zero, let error be yes.＼
      5. ~ELSE ⇒ %横幅 ~SET %数 ◎ Otherwise, let width be the result.

   4. ~ELIF［ %種別 ~EQ `0078^U `x^smb ］~AND［ %数 は`妥当な浮動小数点数$である ］： ◎ If the descriptor consists of a valid floating-point number followed by a U+0078 LATIN SMALL LETTER X character

      1. ~IF［ %横幅 ~NEQ ε ］~OR［ %密度 ~NEQ ε ］~OR［ %縦幅 ~NEQ ε ］ ⇒ %~error ~SET `yes^i ◎ If width, density and future-compat-h are not all absent, then let error be yes.
      2. %数 ~SET `浮動小数点数として構文解析する$( %数 ) ◎ Apply the rules for parsing floating-point number values to the descriptor.＼
      3. ~IF［ %数 ~LT 0 ］ ⇒ %~error ~SET `yes^i ◎ If the result is less than zero, let error be yes.＼

      4. ~ELSE ⇒ %密度 ~SET %数 ◎ Otherwise, let density be the result.

         注記： %密度 ~EQ 0 の場合、［ `内在的~横幅$ ／ `内在的~縦幅$ ］は無限になる。 ~UAには、画像を描画できる大きさを制限することが期待される — そうすることは、`~hardware制限$の条項により許容される。 ◎ If density is zero, the intrinsic dimensions will be infinite. User agents are expected to have limits in how big images can be rendered, which is allowed by the hardware limitations clause.

   5. ~ELIF［ %種別 ~EQ `0068^U `h^smb ］~AND［ %数 は`妥当な非負~整数$である ］： ◎ If the descriptor consists of a valid non-negative integer followed by a U+0068 LATIN SMALL LETTER H character

      1. `構文解析-~error$ ◎ This is a parse error.
      2. ~IF［ %縦幅 ~NEQ ε ］~OR［ %密度 ~NEQ ε ］ ⇒ %~error ~SET `yes^i ◎ If future-compat-h and density are not both absent, then let error be yes.
      3. %数 ~SET `非負~整数として構文解析する$( %数 ) ◎ Apply the rules for parsing non-negative integers to the descriptor.＼
      4. ~IF［ %数 ~EQ 0 ］ ⇒ %~error ~SET `yes^i ◎ If the result is zero, let error be yes.＼
      5. ~ELSE ⇒ %縦幅 ~SET %数 ◎ Otherwise, let future-compat-h be the result.
   6. ~ELSE ⇒ %~error ~SET `yes^i ◎ Anything else ◎ Let error be yes.
4. ~IF［ %縦幅 ~NEQ ε ］~AND［ %横幅 ~EQ ε ］ ⇒ %~error ~SET `yes^i ◎ If future-compat-h is not absent and width is absent, let error be yes.

5. ~IF［ %~error ~EQ `no^i ］：

   1. ~IF［ %横幅 ~NEQ ε ］ ⇒ ~RET `横幅~値$に %横幅 を伴う`横幅~記述子$
   2. ~IF［ %密度 ~NEQ ε ］ ⇒ ~RET `密度~値$に %密度 を伴う`画素~密度~記述子$
   3. ~RET ε
   ◎ If error is still no, then append a new image source to candidates whose URL is url, associated with a width width if not absent and a pixel density density if not absent.＼
6. `構文解析-~error$ ◎ Otherwise, there is a parse error.
7. ~RET `~error^i ◎ Return to the step labeled splitting loop.

4.8.4.3.9. ~sizes属性の構文解析-法

%要素 の `~sizes属性を構文解析する@ ときは、所与の ( %~fallback横幅 ) に対し，次を走らす： ◎ When asked to parse a sizes attribute from an element, with a fallback width width,＼

1. %未解析~sizes~list ~LET `~comma区切りの成分~値~listとして構文解析する$( ［ %要素 は`~sizes属性$を有するならば その値 ／ ~ELSE_ 空~文字列 ］ ) `CSSSYNTAX$r ◎ 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. [CSSSYNTAX]

2. %未解析~sizes~list 内の~EACH( %未解析~size ) に対し： ◎ For each unparsed size in unparsed sizes list:

   1. %未解析~size の~~終端から連続する `whitespace-token$t すべてを除去する ◎ Remove all consecutive <whitespace-token>s from the end of unparsed size.＼
   2. ~IF［ %未解析~size は空である ］ ⇒＃ `構文解析-~error$； ~CONTINUE ◎ If unparsed size is now empty, that is a parse error; continue to the next iteration of this algorithm.
   3. %~size ~LET %未解析~size 内の最後の`成分~値$ ◎ If the last component value in unparsed size is a valid non-negative <source-size-value>, let size be its value and＼
   4. %未解析~size から最後の`成分~値$を除去する ◎ remove the component value from unparsed size.＼
   5. ~IF［ %~size は `source-size-value$t に合致しない ］~OR［ %~size は `~math関数$以外の~CSS関数を含んでいる ］~OR［ %~size は負~数を表す ］ ⇒＃ `構文解析-~error$； ~CONTINUE ◎ Any CSS function other than the math functions is invalid. Otherwise, there is a parse error; continue to the next iteration of this algorithm.
   6. %未解析~size の終端から連続する `whitespace-token$t すべてを除去する ◎ Remove all consecutive <whitespace-token>s from the end of unparsed size.＼
   7. ~IF［ %未解析~size は空である ］ ⇒ ~IF［ %未解析~size は %未解析~sizes~list 内の最後の~itemでない ］ ⇒ `構文解析-~error$ ◎ 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.

   8. ~ELIF［ %未解析~size は、全体として，次のいずれかを満たす `MQ$r ］ ⇒ ~CONTINUE：

      • `media-condition$t に合致しない
      • `media-condition$t として評価した結果は偽になる
      ◎ 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 to the next iteration of this algorithm. [MQ]
   9. ~RET %~size ◎ Return size and exit this algorithm.
3. ~IF［ %~fallback横幅 ~NEQ ε ］ ⇒ ~RET ［ 単位 `px$css による %~fallback横幅 ］として与えられる `length$t 値 ◎ If the above algorithm exhausts unparsed sizes list without returning a size value, follow these steps: ◎ If width is not null, return a <length> with the value width and the unit 'px'.
4. ~RET `100vw^v 【すなわち，表示域の横幅】 ◎ Return 100vw.

注記： `妥当な~source~size~list$は、 `source-size-list$t 内の最後の~entryとして `source-size-value$t のみを包含する（ `media-condition$t は付帯しない）が、この構文解析-~algoは，技術的には そのようなものを~list内のどこでも許容し、最初に現れ次第，即時に~sizeとして受容することになる。 これは、将来の拡張を可能化するため, および 末尾の~commaなどの単純な作者~errorに抗して保護するためである。 ◎ While a valid source size list only contains a bare <source-size-value> (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, 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.

4.8.4.3.10. ~source密度の正規化-法

`~source集合$を正規化することで、それに含まれる どの`画像~source$の`記述子$iSも，`画素~密度~記述子$にされる。 ◎ An image source can have a pixel density descriptor, a width descriptor, or no descriptor at all accompanying its URL. Normalizing a source set gives every image source a pixel density descriptor.

`~source集合$ %~source集合 の `~source密度を正規化する@ ときは、次を走らす： ◎ When asked to normalize the source densities of a source set source set, the user agent must do the following:

1. %~source~size ~LET %~source集合 の`~source~size$ ◎ Let source size be source set's source size.

2. %~source集合 内の~EACH ( `画像~source$ %S ) に対し：

   1. %密度 ~LET 1

   2. %S の`記述子$iS に応じて：

      `画素~密度~記述子$

      ~CONTINUE

      `横幅~記述子$

      %密度 ~SET ( %S の`記述子$iSの`横幅~値$ ÷ `~source~size$ )

      注記： `~source~size$ ~EQ 0 の場合の密度は無限大になり、 ( `内在的~横幅$, `内在的~縦幅$ ) は ( 0, 0 ) になる。

   3. %S の`記述子$iS ~SET `密度~値$に %密度 を伴う`画素~密度~記述子$
   ◎ For each image source in source set: • If the image source has a pixel density descriptor, continue to the next image source. • Otherwise, if the image source has a width descriptor, replace the width descriptor with a pixel density descriptor with a value of the width descriptor value divided by the source size and a unit of x. • If the source size is zero, the density would be infinity, which results in the intrinsic dimensions being zero by zero. • Otherwise, give the image source a pixel density descriptor of 1x.

4.8.4.3.11. 環境~変化に対する反応-法

~UAはいつでも、環境における変化に反応するため，次の~algoを走らせて`img$e 要素 %img の画像を更新してよい。 （~UAには、この~algoを常時~走らすことは要求されない — 例えば、利用者が当の頁を見ていなくて，その間に環境が何度か変化する事例においては、~UAは，利用者が頁に戻って来るまで どの画像を利用するか決定するのを待機したいと求めるかもしれない。） ◎ 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.)

注記： ~UAには、特に，［ 利用者が`表示域$の~sizeを変更したとき（例：~windowを~resizeしたときや，頁~zoomを変更したとき） ／ `img$e 要素が`文書の中へ挿入された$とき ］には、［ `密度補正済み$の内在的~sizeが新たな`表示域$に合致する, かつ `~art-direction$が孕まれるときは正しい画像が選ばれる ］ように，この~algoを走らすことが奨励される。 ◎ 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 an img element is inserted into a document, so that the density-corrected intrinsic width and height match the new viewport, and so that the correct image is chosen when art direction is involved.

1. 次の手続きを`同期区間$として，この~algoの`安定~状態を待受ける$： ◎ Await a stable state. The synchronous section consists of all the remaining steps of this algorithm until the algorithm says the synchronous section has ended. (Steps in synchronous sections are marked with ⌛.)

   1. %文書 ~LET %img の`~node文書$ ◎ ↓
   2. ~IF［ %img は`~srcsetまたは~pictureを利用して$いない ］~OR［ %文書 は`作動中$docでない ］~OR［ %img の画像~dataの資源~型 ~EQ `multipart/x-mixed-replace$mt ］~OR［ %img の`処理待ち要請$ ~NEQ ε ］ ⇒ ~RET ◎ ⌛ If the img element does not use srcset or picture, its node document is not the active document, has image data whose resource type is multipart/x-mixed-replace, or the pending request is not null, then return.
   3. ( %被選定~source, %被選定~画素~密度 ) ~LET %img の`画像~sourceを選定する$ ◎ ⌛ Let selected source and selected pixel density be the URL and pixel density that results from selecting an image source, respectively.
   4. ~IF［ %被選定~source ~EQ ε ］ ⇒ ~RET ◎ ⌛ If selected source is null, then return.
   5. ~IF［ %被選定~source ~EQ %img の`最後に選定された~source$ ］~AND［ %被選定~画素~密度 ~EQ %img の`現在の画素~密度$ ］ ⇒ ~RET ◎ ⌛ If selected source and selected pixel density are the same as the element's last selected source and current pixel density, then return.
   6. ( %~URL~record, %~URL文字列 ) ~LET %被選定~source を %文書 に`相対的に構文解析-$した ( `結果の~URL~record$, `結果の~URL文字列$ ) ◎ ⌛ Parse selected source, relative to the element's node document, and let urlString be the resulting URL string.＼
   7. ~IF［ %~URL文字列 ~EQ ~error ］ ⇒ ~RET ◎ If that is not successful, then return.
   8. %~CORS属性~状態 ~LET %img の `crossorigin$a 内容~属性の状態 ◎ ⌛ Let corsAttributeState be the state of the element's crossorigin content attribute.
   9. %生成元 ~LET ［ %~CORS属性~状態 ~EQ `~NoCORS$st ならば ε ／ ~ELSE_ %文書 の`生成元$ ］ ◎ ⌛ Let origin be the origin of the img element's node document.
   10. %~client ~LET %文書 の `Window$I ~objの`環境~設定群~obj$ ◎ ⌛ Let client be the img element's node document's Window object's environment settings object.
   11. %~key ~LET 組 ( %~URL文字列, %~CORS属性~状態, %生成元 ) ◎ ⌛ Let key be a tuple consisting of urlString, corsAttributeState, and, if corsAttributeState is not No CORS, origin.
   12. %画像~要請 ~LET 新たな`画像~要請$ ◎ ⌛ Let image request be a new image request＼
   13. %画像~要請 の`現在の~URL$ ~SET %~URL文字列 ◎ whose current URL is urlString
   14. %img の`処理待ち要請$ ~LET %画像~要請 ◎ ⌛ Let the element's pending request be image request.

   `同期区間$はここで終端する — 以降の手続きは、同期区間を走らせ終えてから，`並列的$に走らすことになる。 ◎ End the synchronous section, continuing the remaining steps in parallel.

2. ~IF［ `可用な画像~list$内に %~key に対応する~entryはある ］ ⇒ %画像~要請 の`画像~data$ ~SET その~entryの`画像~data$ ◎ If the list of available images contains an entry for key, then set image request's image data to that of the entry. Continue to the next step.

3. ~ELSE： ◎ Otherwise:

   1. %要請 ~LET `~CORSになり得る要請を作成する$( %~URL~record, `image^l , %~CORS属性~状態 ) ◎ Let request be the result of creating a potential-CORS request given urlString, "image", and corsAttributeState.
   2. %要請 の ⇒＃ `~client$rq ~SET %~client, `起動元$rq ~SET `imageset^l, `同期~flag$ ~SET ~ON, `~referrer施策$rq ~SET %img の `referrerpolicy$a 属性の現在の状態 ◎ Set request's client to client, initiator to "imageset", and set request's synchronous flag. ◎ Set request's referrer policy to the current state of the element's referrerpolicy attribute.
   3. %応答 ~LET %要請 を用いて`~fetch$した結果 ◎ Let response be the result of fetching request.

   4. ~IF［ 次のいずれかが満たされる ］…： ◎ ↓

      • %応答 の`非安全~応答$は`~network~error$である ◎ If response's unsafe response is a network error or＼
      • `画像~sniff時の規則$を適用して決定される画像の形式は未~supportである ◎ if the image format is unsupported (as determined by applying the image sniffing rules, again as mentioned earlier), or＼
      • ~UAは %画像~要請 の画像は，何らかの致命的な仕方で画像の寸法を得れないまでに壊れていると決定できる ◎ if the user agent is able to determine that image request's image is corrupted in some fatal way such that the image dimensions cannot be obtained, or＼
      • 画像~資源の型 ~EQ `multipart/x-mixed-replace$mt ◎ if the resource type is multipart/x-mixed-replace,＼

      …ならば：

      1. %img の`処理待ち要請$ ~SET ε
      2. ~RET

      ◎ then let pending request be null and abort these steps.
   5. ~ELSE（ %応答 の`非安全~応答$は %画像~要請 の`画像~data$を表現する） ⇒ %応答 は［ `~CORS同一生成元$, `~CORS非同一生成元$ ］のいずれかになり、それに応じて，画像の`生成元$に影響する（例： `canvas$e にて利用されるとき）。 ◎ Otherwise, response's unsafe response is image request's image data. It can be either CORS-same-origin or CORS-cross-origin; this affects the origin of the image itself (e.g., when used on a canvas).

4. 次の下位手続きを走らす`~taskを~queueする$： ◎ Queue a task to run these steps:

   1. ~IF［ %img はこの~algoを開始した時点から`関連する変異$を経た ］：

      1. %img の`処理待ち要請$ ~LET ε
      2. ~RET
      ◎ If the img element has experienced relevant mutations since this algorithm started, then let pending request be null and abort these steps.
   2. %img の ( `最後に選定された~source$, `現在の画素~密度$ ) ~SET ( %被選定~source, %被選定~画素~密度 ) ◎ Let the img element's last selected source be selected source and the img element's current pixel density be selected pixel density.
   3. %画像~要請 の`状態$ ~SET `完全に可用$st ◎ Set the image request's state to completely available.
   4. %文書 の`可用な画像~list$に，画像を追加する — この画像は ⇒ ~key %~key で識別され, `上層~caching無視-~flag$ は ~ON にされるとする ◎ Add the image to the list of available images using the key key, with the ignore higher-layer caching flag set.
   5. %img の`処理待ち要請を現在の要請に昇格する$ ◎ Upgrade the pending request to the current request.
   6. %img の呈示を適切に更新する ◎ Update the img element's presentation appropriately.
   7. %img に向けて，名前 `load$et の`~eventを発火する$ ◎ Fire an event named load at the img element.

4.8.4.4.1. 一般的な指針

他が指定されている所を除き、 `alt$a 属性は指定され~MUST。 また，その値は、空でない, かつ 当の画像の適切な代用で~MUST。 `alt$a 属性に特有の要件は、後続の各 節に述べるように，画像が何を表現するよう意図されているかに依存する。 ◎ Except where otherwise specified, the alt attribute must be specified and its value must not be empty; the value must be an appropriate replacement for the image. The specific requirements for the alt attribute depend on what the image is intended to represent, as described in the following sections.

代替~textを書くときに考慮する，最も一般的な規則は、［ すべての画像が，それぞれの `alt$a 属性が与える~textに置換されても、頁の意味は変化しない ］ようにすることである。 ◎ The most general rule to consider when writing alternative text is the following: the intent is that replacing every image with the text of its alt attribute not change the meaning of the page.

なので，代替~textは、一般に［ 画像が無かったとするとき，書くことになるもの ］を考えることで書ける。 ◎ So, in general, alternative text can be written by considering what one would have written had one not been able to include the image.

この帰結として、次が挙げられる： ◎ A corollary to this is that＼

• `alt$a 属性の値は、［ 画像の［ ~caption ／ ~title ／ ~legend ］にも見なせるような~text ］は，決して包含しないべきである。 この属性に想定されているのは、［ 利用者が画像の代わりとしても利用できるような，代用~text ］を包含することであり，画像を補足することは~~意図されていない。 補足的な情報には `title$a 属性を利用できる。 ◎ the alt attribute's value should never contain text that could be considered the image's caption, title, or legend. It is supposed to contain replacement text that could be used by users instead of the image; it is not meant to supplement the image. The title attribute can be used for supplemental information.
• `alt$a 属性の値は，画像に~~付帯する注釈文に供されている情報を繰返すべきでない。 ◎ Another corollary is that the alt attribute's value should not repeat information that is already provided in the prose next to the image.

代替~textを~~考える仕方として、画像を包含している頁を，電話越しの誰かに — 画像が在ることには触れずに — どう伝えるか~~考えることが挙げられる。 概して、画像の代わりに言う何かが，代替~textを書くときの良い~~出発点になる。 ◎ One way to think of alternative text is to think about how you would read the page containing the image to someone over the phone, without mentioning that there is an image present. Whatever you say instead of the image is typically a good start for writing the alternative text.

4.8.4.4.2 〜 4.8.4.4.15

【 これらの節（様々な事例ごとの具体例）は、未訳。 （ 他サイトによる訳 ） 】