HTML — 画像, 他

【この訳に特有な表記規約】

◎表記記号

`px@css は、 `~CSS~pixel単位＠~CSSVAL#px$の略記である。

4.8.1. `picture^e 要素

`分類$
`~flow内容$ ／ `句ng内容$ ／ `埋込d内容$ ／ `可触~内容$ ◎ Flow content. ◎ Phrasing content. ◎ Embedded content. ◎ Palpable content.
`この要素を利用できる文脈$
`埋込d内容$が期待される所。 ◎ Where embedded content is expected.
`内容~model$

順に，次に挙げる要素からなる：

  1. 0 個~以上の `source$e 要素
  2. 1 個の `img$e 要素

加えて、 これらの要素の前後には， 任意個数の`~scriptを~supportする要素$があってよい。

◎ Zero or more source elements, followed by one img element, optionally intermixed with script-supporting elements.
`text/html における~tag省略$
両~tagとも省略不可。 ◎ Neither tag is omissible.
`内容~属性$
`大域~属性$ ◎ Global attributes
`~accessibilityの考慮点$
`picture$AA ◎ For authors. For implementers.
`~DOM~interface$
[Exposed=Window]
interface `HTMLPictureElement@I : `HTMLElement$I {
  [`HTMLConstructor$] constructor();
};

`picture$e 要素は、 その子である `img$e 要素に複数の~sourceを供する容器である。 それは、 作者が［［ ~screen画素~密度, `表示域$の~size, 画像~形式, その他の要因 ］に基づいて どの画像~資源を利用するか ］について宣言的に［ ~UAを制御する／~UAに~hintを与える ］ことを可能にする。 それは、 その子たちを`表現-$する。 ◎ The picture element is a container which provides multiple sources to its contained img element to allow authors to declaratively control or give hints to the user agent about which image resource to use, based on the screen pixel density, viewport size, image format, and other factors. It represents its children.

注記： `picture$e 要素は、 似た見かけの［ `video$e ／ `audio$e ］要素とは いくぶん異なる。 それらも `source$e 要素を包含するが、 `source$e 要素の `src$aS 属性は、 要素が `picture$e 要素の中に入子にされたときは意味はなく， 資源~選定~algoも異なる。 また、 `picture$e 要素~自身は何も表示しない — それは、 その子である `img$e 要素に［ 複数の`~URL$から選ぶことを可能化する文脈 ］を供するだけである。 ◎ The picture element is somewhat different from the similar-looking video and audio elements. While all of them contain source elements, the source element's src attribute has no meaning when the element is nested within a picture element, and the resource selection algorithm is different. Also, the picture element itself does not display anything; it merely provides a context for its contained img element that enables it to choose from multiple URLs.

4.8.2. `source^e 要素

`分類$
なし。 ◎ None.
`この要素を利用できる文脈$
`picture$e 要素の子としては、 `img$e 要素よりも前。 ◎ As a child of a picture element, before the img element.
`~media要素$の子としては、 どの［ `~flow内容$ ／ `track$e 要素 ］よりも前。 ◎ As a child of a media element, before any flow content or track elements.
`内容~model$
`なし$ ◎ Nothing.
`text/html における~tag省略$
`終了~tag$はない。 ◎ No end tag.
`内容~属性$
`大域~属性$ ◎ Global attributes
`type$aS — 埋込d資源の型 ◎ type — Type of embedded resource
`media$aS
`media$aS — 適用-可能な~media ◎ media — Applicable media
`src$aS （ `audio$e ／ `video$e 内） — 資源の~address ◎ src (in audio or video) — Address of the resource
`srcset$aS （ `picture$e 内） — 種々の状況 （例：高~解像度~display, 狭い~monitor, 等々） に応じて利用する一連の画像 ◎ srcset (in picture) — Images to use in different situations, e.g., high-resolution displays, small monitors, etc.
`sizes$aS （ `picture$e 内） — 種々の~page~layout用の画像~size ◎ sizes (in picture) — Image sizes for different page layouts
`width$a （ `picture$e 内） — 横~寸法 ◎ width (in picture) — Horizontal dimension
`height$a （ `picture$e 内） — 縦~寸法 ◎ height (in picture) — Vertical dimension
`~accessibilityの考慮点$
`source$AA ◎ For authors. For implementers.
`~DOM~interface$
[Exposed=Window]
interface `HTMLSourceElement@I : `HTMLElement$I {
  [`HTMLConstructor$] constructor();

  [`CEReactions$] attribute USVString `src$mS;
  [`CEReactions$] attribute DOMString `type$mS;
  [`CEReactions$] attribute USVString `srcset$mS;
  [`CEReactions$] attribute DOMString `sizes$mS;
  [`CEReactions$] attribute DOMString `media$mS;
  [`CEReactions$] attribute unsigned long `width$m;
  [`CEReactions$] attribute unsigned long `height$m;
};

`source$e 要素は、 作者が，［ `img$e 要素／ `~media要素$用の複数の代替な`~media資源$ ］用に［ 複数の代替からなる`~source集合$ ］を指定できるようにする。 この要素は、 自身のみでは何も`表現-$しない。 ◎ The source element allows authors to specify multiple alternative source sets for img elements or multiple alternative media resources for media elements. It does not represent anything on its own.

`source$e 要素には `type@aS 属性を指定してもヨイ。 指定する値は、 `妥当な~MIME型~文字列$でなければナラナイ。 ◎ The type attribute may be present. If present, the value must be a valid MIME type string.

`source$e 要素には `media@aS 属性を指定してもヨイ。 その場合の値は、 `妥当な媒体~query~list$を包含していなければナラナイ。 ~UAは、 値が`環境に合致して$いない場合には，［ 当の `source$e を飛ばして，次~以降の `source$e 要素を選定する ］ことになる。 ◎ The media attribute may also be present. If present, the value must contain a valid media query list. The user agent will skip to the next source element if the value does not match the environment.

注記： `media$aS 属性は、 `~media要素$用には，`資源~選定~algo$の間に一回だけ評価される。 対照的に，`picture$e 要素を利用しているときは、 ~UAは，各`環境における変化に反応する$ことになる。 ◎ The media attribute is only evaluated once during the resource selection algorithm for media elements. In contrast, when using the picture element, the user agent will react to changes in the environment.

`source$e 要素 %source の親が `picture$e 要素である場合、 以下に挙げる要件も課される — 以下における “当の `img$e 要素” は、 `picture$e 要素の最後の子として要求されるそれを指す： ◎ The remainder of the requirements depend on whether the parent is a picture element or a media element: ◎ The source element's parent is a picture element

【 親が`~media要素$である場合の要件, および `~media要素$に関係する他の内容は、 `別~page＠~HEmedia#the-source-element$にて。 】

`source$e 用の`~HTML要素~挿入-時の手続き$は、 所与の ( %挿入される~node ) に対し： ◎ The source HTML element insertion steps, given insertedNode, are:

  1. %親 ~LET %挿入される~node の親
  2. ~IF［ %親 は`~media要素$である ］ ⇒ 【この段の内容は、`別~page＠~HEmedia#the-source-element$にて】 ◎ If insertedNode's parent is a media element that has no src attribute and whose networkState has the value NETWORK_EMPTY, then invoke that media element's resource selection algorithm.
  3. ~IF［ %親 は `picture$e 要素である ］ ⇒ ~IF［ %挿入される~node に後続する同胞【！next sibling】として `img$e 要素が在る ］ ⇒ 該当する最初の `img$e 要素には`関連な変異$が生じたものとみなす 【該当する `img^e が複数個ある場合、不適合になる。】 ◎ If insertedNode's next sibling is an img element and its parent is a picture element, then, count this as a relevant mutation for the img element.

`source$e 用の`~HTML要素~除去-時の手続き$は、 所与の ( %除去される~node, %旧-親 ) に対し： ◎ The source HTML element removing steps, given removedNode and oldParent, are:

  1. ~IF［ %旧-親 は `picture$e 要素である ］ ⇒ ~IF［ %除去される~node に後続する同胞【！next sibling】として `img$e 要素が在った ］ ⇒ 該当する最初の `img$e 要素には`関連な変異$が生じたものとみなす 【該当する `img^e が複数個ある場合、不適合になる。】 ◎ If removedNode's next sibling was an img element and oldParent is a picture element, then, count this as a relevant mutation for the img element.

`type@mS ~IDL属性は、 `type$aS 内容~属性を`反映する$モノトスル。

`srcset@mS ~IDL属性は、 `srcset$aS 内容~属性を`反映する$モノトスル。

`sizes@mS ~IDL属性は、 `sizes$aS 内容~属性を`反映する$モノトスル。

`media@mS ~IDL属性は、 `media$aS 内容~属性を`反映する$モノトスル。

◎ The IDL attributes src, type, srcset, sizes and media must reflect the respective content attributes of the same name.

4.8.3. `img^e 要素

`分類$
`~flow内容$／ `句ng内容$／ `埋込d内容$／ `~formに所有され得る要素$／ `可触~内容$／ （要素は `usemap$a 属性を有する場合に限り）`対話的~内容$ ◎ Flow content. ◎ Phrasing content. ◎ Embedded content. ◎ Form-associated element. ◎ If the element has a usemap attribute: Interactive content. ◎ Palpable content.
`この要素を利用できる文脈$
`埋込d内容$が期待される所 ◎ Where embedded content is expected.
`picture$e 要素の子としては、 すべての `source$e 要素よりも後。 ◎ As a child of a picture element, after all source elements.
`内容~model$
`なし$ ◎ Nothing.
`text/html における~tag省略$
`終了~tag$はない ◎ No end tag.
`内容~属性$
`大域~属性$ ◎ Global attributes
`alt$a — 画像が可用でないときに利用するための代用~text ◎ alt — Replacement text for use when images are not available
`src$a — 画像~資源の~address ◎ src — Address of the resource
`srcset$a — 種々の状況 （例：高~解像度~display, 狭い~monitor, 等々） に応じて利用する一連の画像 ◎ srcset — Images to use in different situations, e.g., high-resolution displays, small monitors, etc.
`sizes$a — 種々の~page~layout用の画像~size ◎ sizes — Image sizes for different page layouts
`crossorigin$a — 要素が非同一-生成元~要請をどう取扱うか ◎ crossorigin — How the element handles crossorigin requests
`usemap$a — 利用する`画像~map$の名前 ◎ usemap — Name of image map to use
`ismap$a — この画像は~server側~画像~mapかどうか ◎ ismap — Whether the image is a server-side image map
`width$a — 横~寸法 ◎ width — Horizontal dimension
`height$a — 縦~寸法 ◎ height — Vertical dimension
`referrerpolicy$a — この要素により起動される`~fetch$用の`~referrer施策$ ◎ referrerpolicy — Referrer policy for fetches initiated by the element
`decoding$a — この画像を呈示~用に処理するときに利用する，復号~用の~hint ◎ decoding — Decoding hint to use when processing this image for presentation
`loading$a — 読込ngの先送り可否を決定するときに利用される。 ◎ loading — Used when determining loading deferral
`fetchpriority$a — 要素により起動される`~fetch$用の`優先度$rqを設定する。 ◎ fetchpriority — Sets the priority for fetches initiated by the element
`~accessibilityの考慮点$
要素は空でない `alt$a 属性を有する場合 ⇒ `img$AA ◎ If the element has a non-empty alt attribute: for authors; for implementers.
他の場合 ⇒ `img-empty-alt$AA ◎ Otherwise: for authors; for implementers.
`~DOM~interface$
[Exposed=Window,
 `LegacyFactoryFunction$=`Image$m(optional unsigned long width, optional unsigned long height)]
interface `HTMLImageElement@I : `HTMLElement$I {
  [`HTMLConstructor$] constructor();

  [`CEReactions$] attribute DOMString `alt$m;
  [`CEReactions$] attribute USVString `src$m;
  [`CEReactions$] attribute USVString `srcset$m;
  [`CEReactions$] attribute DOMString `sizes$m;
  [`CEReactions$] attribute DOMString? `crossOrigin$m;
  [`CEReactions$] attribute DOMString `useMap$m;
  [`CEReactions$] attribute boolean `isMap$m;
  [`CEReactions$] attribute unsigned long `width$m;
  [`CEReactions$] attribute unsigned long `height$m;
  readonly attribute unsigned long `naturalWidth$m;
  readonly attribute unsigned long `naturalHeight$m;
  readonly attribute boolean `complete$m;
  readonly attribute USVString `currentSrc$m;
  [`CEReactions$] attribute DOMString `referrerPolicy$m;
  [`CEReactions$] attribute DOMString `decoding$m;
  [`CEReactions$] attribute DOMString `loading$m;
  [`CEReactions$] attribute DOMString `fetchPriority$m;

  `Promise$<undefined> `decode$m();

  // `HTMLImageElement$obsMb
};

`img$e 要素は、 画像を表現する。 ◎ An img element represents an image.

`img$e 要素は、 `寸法~属性~source@ を有する — それは、 初期~時には要素~自身に設定される。 【次の段落にて述べられる，ある `source^e 要素に設定され得る。】 ◎ An img element has a dimension attribute source, initially set to the element itself.

この画像は、 要素の `src@a, `srcset@a 属性, および［ 要素の親が `picture$e 要素である場合における 要素に先行する同胞である各 `source$e 要素の `srcset$aS 属性 ］により与えられる，埋込d内容になる。 加えて、 要素の `alt@a 属性の値は，［ 当の画像を処理できない, または 画像の読込ngが不能化されている ］ときのための等価な内容を供する （すなわち， `img$e 要素の`~fallback内容$になる）。 ◎ The image given by the src and srcset attributes, and any previous sibling source elements' srcset attributes if the parent is a picture element, is the embedded content; the value of the alt attribute provides equivalent content for those who cannot process images or who have image loading disabled (i.e. it is the img element's fallback content).

`alt$a 属性の値に課される要件は、 `§ 画像~用の代替として動作する~textを供するときの要件$にて述べる。 ◎ The requirements on the alt attribute's value are described in a separate section.

要素は、 次を満たしていなければナラナイ ⇒ ［ `src$a 属性を有する ］~AND［ その値は`前後~空白~可の妥当かつ空でない~URL$を包含する ］~AND［ その~URLは［ 対話的でも多pageでもなく, ~scriptも伴わない画像~資源 ］を参照している ］ ◎終 — 画像は、 ~animate化されていてもよい。 ◎ The src attribute must be present, and must contain a valid non-empty URL potentially surrounded by spaces referencing a non-interactive, optionally animated, image resource that is neither paged nor scripted.

注記： 上の要件は、 次に挙げるもの等は，画像として与えれることを含意する：

  • 静的な~bitmap （例：~PNG, ~GIF, ~JPEG）
  • 単-~pageな~vector文書 （例：単-~pageな~PDF, ~XML~fileのうち~SVG`文書~要素$を伴うもの）
  • ~animate化された~bitmap （例：~APNG, ~animate化~GIF)
  • ~animate化された~vector~graphic （例：~XML~fileのうち， ~SVG`文書~要素$を伴い, 宣言的な~SMIL~animationを利用するもの）
◎ The requirements above imply that images can be static bitmaps (e.g. PNGs, GIFs, JPEGs), single-page vector documents (single-page PDFs, XML files with an SVG document element), animated bitmaps (APNGs, animated GIFs), animated vector graphics (XML files with an SVG document element that use declarative SMIL animation), and so forth.＼

一方で、 次に挙げるもの等は，予め除外される：

  • ~scriptを伴う~SVG~file†
  • 複-~page~PDF~file
  • 対話的~MNG~file
  • ~HTML文書
  • 素な~text文書
◎ However, these definitions preclude SVG files with script, multipage PDF files, interactive MNG files, HTML documents, plain text documents, and the like.＼

`PNG$r `GIF$r `JPEG$r `PDF$r `XML$r `APNG$r `SVG$r `MNG$r

【† ~scriptを伴う場合でも、 実際には，それを不能化した上で呈示する~UAが多いと思われるが （そのような処理ができない~UAも視野に入れた要件？）。 】

要素は `srcset$a 属性を指定してもヨイ — それは、 `~srcset属性$になる。 ◎ The srcset attribute may also be present, and is a srcset attribute.

`srcset$a 属性と（その値に`横幅~記述子$は利用されていない場合の） `src$a 属性は、 `~source集合$に`画像~source$を供与する （どの `source$e 要素も選定されなかった場合に限り）。 ◎ The srcset attribute and the src attribute (if width descriptors are not used) contribute the image sources to the source set (if no source element was selected).

要素は `srcset$a 属性を有していて， その値を成すいずれかの`画像~候補~文字列$に`横幅~記述子$が利用された場合、 要素は `sizes$a 属性も有していなければナラナイ。 ◎ If the srcset attribute is present and has any image candidate strings using a width descriptor, the sizes attribute must also be present.＼

要素には `srcset$a 属性は`指定されてない^em場合、 要素の `loading$a 属性の状態 ~EQ `Lazy$st ならば， 値 `auto^l （`~ASCII大小無視$）を伴う `sizes$a 属性を指定してもヨイ。 ◎ If the srcset attribute is not specified, and the loading attribute is in the Lazy state, the sizes attribute may be specified with the value "auto" (ASCII case-insensitive).＼

`sizes@a 属性は`~sizes属性$である — それは、 `~source集合$に`~source~size$を供与する （どの `source$e 要素も選定されなかった場合に限り）。 ◎ The sizes attribute is a sizes attribute, which contributes the source size to the source set (if no source element was selected).

`img$e 要素が `自動-~sizeを許容して@ いるとは、 ~AND↓ を満たすことをいう： ◎ An img element allows auto-sizes if:

`crossorigin@a 属性は`~CORS設定群~属性$である。 その目的は、 第三者-主体~siteからの画像に対し， `canvas$e から利用される非同一-生成元~accessを許容することである。 ◎ 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.

`referrerpolicy@a 属性は、 `~referrer施策~属性$である。 その目的は、 画像の`~fetch$時に利用される`~referrer施策$を設定することである。 `REFERRERPOLICY$r ◎ The referrerpolicy attribute is a referrer policy attribute. Its purpose is to set the referrer policy used when fetching the image. [REFERRERPOLICY]

`decoding@a 属性は、 【`列挙d属性$であり，】 この画像を`復号-$するときに選好される~methodを指示する。 この属性に指定する値は、 `画像~復号~hint$でなければナラナイ。 この属性の［ `欠落~値~用の既定の状態$／`妥当でない値~用の既定の状態$ ］は、 `自動$st とする。 ◎ The decoding attribute indicates the preferred method to decode this image. The attribute, if present, must be an image decoding hint. This attribute's missing value default and invalid value default are both the auto state.

`fetchpriority@a 属性は、 `~fetch優先度~属性$である。 その目的は、 画像の`~fetch$時に利用される`優先度$rqを設定することである。 ◎ The fetchpriority attribute is a fetch priority attribute. Its purpose is to set the priority used when fetching the image.

`loading@a 属性は、 `~lazy読込ng属性$である。 その目的は、 表示域の外側にある画像を読込むときの施策を指示することにある。 ◎ The loading attribute is a lazy loading attribute. Its purpose is to indicate the policy for loading images that are outside the viewport.

`img$e 要素の %img の `loading$a 属性の状態が `Eager$st に変化したときは、 次の手続きを走らすモノトスル： ◎ When the loading attribute's state is changed to the Eager state, the user agent must run these steps:

  1. %再開~手続き ~LET %img の`~lazy読込n再開~手続き$ ◎ Let resumptionSteps be the img element's lazy load resumption steps.
  2. ~IF［ %再開~手続き ~EQ ~NULL ］ ⇒ ~RET ◎ If resumptionSteps is null, then return.
  3. %img の`~lazy読込n再開~手続き$ ~SET ~NULL ◎ Set the img's lazy load resumption steps to null.
  4. %再開~手続き() ◎ Invoke resumptionSteps.
`img-0^xCode

上の例において、 各~画像は，次に従って読込まれる： ◎ In the example above, the images load as follows:

`1.jpeg^c
`2.jpeg^c
`4.jpeg^c
画像は~eager（早急）に読込まれ，~windowの~load~eventを遅延する。 ◎ The images load eagerly and delay the window's load event.
`3.jpeg^c
画像は、 表示域に入ったことに因り~layoutが既知になったとき，読込まれる。 しかしながら，~windowの~load~eventは遅延しない。 ◎ The image loads when layout is known, due to being in the viewport, however it does not delay the window's load event.
`5.jpeg^c
画像は表示域の中に~scrollされたときに限り読込まれ、 ~windowの~load~eventは遅延しない。 ◎ The image loads only once scrolled into the viewport, and does not delay the window's load event.

注記： 画像を読込んだ後に~page~layoutが周りにずれるのを防止するため、 開発者には~lazy（後回し）に読込まれる画像に対しては［ `width$a, `height$a ］属性を介して， `選好d縦横比$を指定する†ことが奨励される — ~CSSにより画像の［ `width^p ／ `height^p ］~propが【例えば `100%^v ／ `auto^v などに】設定されていても。 ◎ Developers are encouraged to specify a preferred aspect ratio via width and height attributes on lazy loaded images, even if CSS sets the image's width and height properties, to prevent the page layout from shifting around after the image loads.

【† これは、 ~UA~stylesheetを介して `aspect-ratio$p ~propを設定することになると見込まれる （`参照＠~HTMLissue/5290$） 】

`img$e 用の`~HTML要素~挿入-時の手続き$は、 所与の ( %挿入される~node ) に対し： ◎ The img HTML element insertion steps, given insertedNode, are:

  1. ~IF［ %挿入される~node の親は `picture$e 要素である ］ ⇒ %挿入される~node には`関連な変異$が生じたものとみなす ◎ If insertedNode's parent is a picture element, then, count this as a relevant mutation for insertedNode.

`img$e 用の`~HTML要素~除去-時の手続き$は、 所与の ( %除去される~node, %旧-親 ) に対し： ◎ The img HTML element removing steps, given removedNode and oldParent, are:

  1. ~IF［ %旧-親 は`picture$e 要素である ］ ⇒ %除去される~node には`関連な変異$が生じたものとみなす ◎ If oldParent is a picture element, then, count this as a relevant mutation for removedNode.

`img$e 要素は、 ~layout用の~toolとして利用してはナラナイ。 特に， 透明な画像を表示するために利用するべきではない — そのような画像が［ 意味を伝達する／ 文書に有用なものを追加する ］ことは稀にしかないので。 ◎ The img element must not be used as a layout tool. In particular, img elements should not be used to display transparent images, as such images rarely convey meaning and rarely add anything useful to the document.

`img$e 要素 %img が表現するものは、 その［ `src$a, `alt$a ］属性に依存する — 以下 %alt は， %img が `alt$a 属性を［ 有するならばその値 ／ 有さないならば ε ］とする：

◎ What an img element represents depends on the src attribute and the alt attribute.
%img は `src$a 属性を有する場合：

［ %img の`画像は可用$である ］かつ［ ~UAは、 その画像を表示するよう環境設定されている ］ならば、 %img は，その画像~dataを`表現-$する。

加えて、 %alt に応じて：

◎ ↓
空~文字列 ◎ If the src attribute is set and the alt attribute is set to the empty string
画像は、［ 文書~内の他の内容に対する装飾的または補足的な何か ］であり，冗長な情報である。 ◎ The image is either decorative or supplemental to the rest of the content, redundant with some other information in the document.
%img が画像~dataを表現しない場合、 それは何も`表現-$しないので，具現化から完全に省略されてもヨイ。 ~UAは、［ 画像は在るが，具現化からは省略された旨 ］を利用者に通知してもヨイ。 ◎ If the image is available and the user agent is configured to display that image, then the element represents the element's image data. ◎ Otherwise, the element represents nothing, and may be omitted completely from the rendering. User agents may provide the user with a notification that an image is present but has been omitted from the rendering.
空でない文字列 ◎ If the src attribute is set and the alt attribute is set to a value that isn't empty
画像は内容に欠かせない。 %alt は、 画像~用の［ 等価な, または代用 ］~textを与える。 ◎ The image is a key part of the content; the alt attribute gives a textual equivalent or replacement for the image. ◎ If the image is available and the user agent is configured to display that image, then the element represents the element's image data.
%img が画像~dataを表現しない場合、 %img は %alt で与えられる~textを`表現-$する。 ~UAは、［ 画像は在るが，具現化からは省略された旨 ］を利用者に通知してもヨイ。 ◎ Otherwise, the element represents the text given by the alt attribute. User agents may provide the user with a notification that an image is present but has been omitted from the rendering.
ε ◎ If the src attribute is set and the alt attribute is not
画像は内容に欠かせないかもしれない。 画像に等価な~textは、 可用でない。 ◎ The image might be a key part of the content, and there is no textual equivalent of the image available.
注記： 適合~文書において `alt$a 属性が無いことは、［ 画像は内容に欠かせないが，その生成-時には画像~用の代用~textは可用でなかった ］ことを指示する。 ◎ In a conforming document, the absence of the alt attribute indicates that the image is a key part of the content but that a textual replacement for the image was not available when the image was generated.

%img が画像~dataを表現しない場合： ◎ If the image is available and the user agent is configured to display that image, then the element represents the element's image data.

  • `src$a 属性の値が空~文字列ならば、 %img は何も`表現-$しない。 ◎ If the image has a src attribute whose value is the empty string, then the element represents nothing.

  • 他の場合、 ~UAは，［ 画像はあるが，具現化されていない ］ことを［ 何らかの類の指示子 ］で表示するべきである。 加えて，［ 利用者から要請された, または そのように環境設定されている ］, あるいは［ ~naviに呼応して文脈上の情報を供することが要求される ］場合、 次に従って導出される結果が ε でないならば， それを画像~用の~caption情報として供してもヨイ： ◎ Otherwise, the user agent should display some sort of indicator that there is an image that is not being rendered, and may, if requested by the user, or if so configured, or when required to provide contextual information in response to navigation, provide caption information for the image, derived as follows:

    1. ~IF［ %img は `title$a 属性を有する ］~AND［ その値 ~NEQ 空~文字列 ］ ⇒ ~RET その属性の値 ◎ If the image has a title attribute whose value is not the empty string, then return the value of that attribute.

    2. ~IF［ ~AND↓ を満たす要素 %F, %C が在る ］…

      • %F は `figure$e 要素である
      • %img は %F の子孫である
      • %C は %F の子である `figcaption$e 要素のうち最初のものである
      • %F の子孫は［ %C とその子孫, `要素間~空白$, %img, 非`~flow内容$ ］のみからなる
      • %img は %C の子孫ではない†

      …ならば ⇒ ~RET %C の内容

      【† この条件は訳者による補完。 原文の言い回しが微妙なので はっきりしないが、 さもなければ， 該当する `figure^e 要素（`~flow内容$でもある）が複数あり得ることになり， 多義的になることに加え、 %img 自身が自身の~caption情報の一部を成す循環が生じ得るので。 】

      ◎ If the image is a descendant of a figure element that has a child figcaption element, and, ignoring the figcaption element and its descendants, the figure element has no flow content descendants other than inter-element whitespace and the img element, then return the contents of the first such figcaption element.
    3. ~RET ε （~caption情報は無い。） ◎ Return nothing. (There is no caption information.)
%img は `src$a 属性を有さない場合：
%alt が空でない文字列ならば、 %img は その文字列による~textを`表現-$する。 他の場合、 %img は何も`表現-$しない。 ◎ If the src attribute is not set and either the alt attribute is set to the empty string or the alt attribute is not set at all ◎ The element represents nothing. ◎ Otherwise ◎ The element represents the text given by the alt attribute.

`alt$a 属性は、 助言的~情報を表現するものではない。 ~UAは、 `alt$a 属性の内容を `title$a 属性の内容と同じ仕方では呈示しないモノトスル。 ◎ The alt attribute does not represent advisory information. User agents must not present the contents of the alt attribute in the same way as content of the title attribute.

~UAは，常に、 画像を［ 表示させる／させない ］の選択肢を利用者に供してもヨイ。 ~UAは、 利用者が画像を見れないときには — 視覚障碍 ／ ~graphic能力のない~text端末を利用しているなど — 利用者が用立て易くするような経験則を適用してもヨイ。 そのような経験則には、 一例として，画像の中に見出された~textの光学文字認識（ OCR ）も含まれ得る。 ◎ User agents may always provide the user with the option to display any image, or to prevent any image from being displayed. User agents may also apply heuristics to help the user make use of the image when the user is unable to see it, e.g. due to a visual disability or because they are using a text terminal with no graphics capabilities. Such heuristics could include, for instance, optical character recognition (OCR) of text found within the image.

~UAには，［ `alt$a 属性が欠落な事例を修復する ］ことが奨励されるが、 作者は，そのような挙動に依拠してはナラナイ。 詳細は、 `§ 画像~用の代替として動作する~textを供するときの要件$に述べる。 ◎ While user agents are encouraged to repair cases of missing alt attributes, authors must not rely on such behavior. Requirements for providing text to act as an alternative for images are described in detail below.

`img$e 要素の`内容^emは、 あっても，具現化の目的においては無視される。 ◎ The contents of img elements, if any, are ignored for the purposes of rendering.

`img$e 要素が `usemap$a 属性を有する場合、 画像には`画像~map$が結付けられることを指示し得る。 ◎ The usemap attribute, if present, can indicate that the image has an associated image map.

`img$e 要素が［ `ismap@a 属性を有する ］~AND［ 先祖に `href$a 属性を有する `a$e 要素がある ］場合、 ~server側~画像~mapへの~accessを供することを指示する。 これは、 その `a$e 要素~上の~eventがどう取扱われるかにも影響する。 ◎ The ismap attribute, when used on an element that is a descendant of an a element with an href attribute, indicates by its presence that the element provides access to a server-side image map. This affects how events are handled on the corresponding a element.

`ismap$a 属性は`真偽-属性$である。 この属性は、 要素の先祖に［ `href$a 属性を有する `a$e 要素 ］が無い場合には，指定してはナラナイ。 ◎ The ismap attribute is a boolean attribute. The attribute must not be specified on an element that does not have an ancestor a element with an href attribute.

注記： 同じ `picture$e 要素~内に［［ `usemap$a ／ `ismap$a ］属性を有する `img$e 要素 ］と［ `media$aS 属性を有する `source$e 要素 ］が併用された場合、 結果の挙動は，困惑させるものになる。 ◎ The usemap and ismap attributes can result in confusing behavior when used together with source elements with the media attribute specified in a picture element.

`img$e 要素は、 `寸法~属性$を~supportする。 ◎ The img element supports dimension attributes.

`alt@m ~IDL属性は、 `alt$a 内容~属性を`反映する$モノトスル。

`src@m ~IDL属性は、 `src$a 内容~属性を`反映する$モノトスル。

`srcset@m ~IDL属性は、 `srcset$a 内容~属性を`反映する$モノトスル。

`sizes@m ~IDL属性は、 `sizes$a 内容~属性を`反映する$モノトスル。

◎ The alt, src, srcset and sizes IDL attributes must reflect the respective content attributes of the same name.

`crossOrigin@m ~IDL属性は、 `既知な値のみに制限され$る下で， `crossorigin$a 内容~属性を`反映する$モノトスル。 ◎ The crossOrigin IDL attribute must reflect the crossorigin content attribute, limited to only known values.

`useMap@m ~IDL属性は、 `usemap$a 内容~属性を`反映する$モノトスル。 ◎ The useMap IDL attribute must reflect the usemap content attribute.

`isMap@m ~IDL属性は、 `ismap$a 内容~属性を`反映する$モノトスル。 ◎ The isMap IDL attribute must reflect the ismap content attribute.

`referrerPolicy@m ~IDL属性は、 `既知な値のみに制限され$る下で， `referrerpolicy$a 内容~属性を`反映する$モノトスル。 ◎ The referrerPolicy IDL attribute must reflect the referrerpolicy content attribute, limited to only known values.

`decoding@m ~IDL属性は、 `既知な値のみに制限され$る下で， `decoding$a 内容~属性を`反映する$モノトスル。 ◎ The decoding IDL attribute must reflect the decoding content attribute, limited to only known values.

`loading@m ~IDL属性は、 `既知な値のみに制限され$る下で， `loading$a 内容~属性を`反映する$モノトスル。 ◎ The loading IDL attribute must reflect the loading content attribute, limited to only known values.

`fetchPriority@m ~IDL属性は、 `既知な値のみに制限され$る下で， `fetchpriority$a 内容~属性を`反映する$モノトスル。 ◎ The fetchPriority IDL attribute must reflect the fetchpriority content attribute, limited to only known values.

%image.`width$m [ = %value ]
%image.`height$m [ = %value ]
これらの属性は、［ この画像の実際に描画される寸法が既知ならば それ ／ ~ELSE_ 0 ］を返す。 ◎ These attributes return the actual rendered dimensions of the image, or 0 if the dimensions are not known.
設定して，対応する内容~属性を変更できる。 ◎ They can be set, to change the corresponding content attributes.
%image.`naturalWidth$m
%image.`naturalHeight$m
これらの属性は、この画像の［ `生来な横幅$／`生来な縦幅$ ］は既知ならば それ ／ ~ELSE_ 0 ］を返す ◎ These attributes return the natural dimensions of the image, or 0 if the dimensions are not known.
%image.`complete$m
この画像は［ 完全に~downloadされた, または 指定されていないならば ~T ／ ~ELSE_ ~F ］を返す。 ◎ Returns true if the image has been completely downloaded or if no image is specified; otherwise, returns false.
%image.`currentSrc$m
この画像の`絶対~URL$を返す。 ◎ Returns the image's absolute URL.
%image.`decode()$m
この~methodは、 ~UAに画像を`並列的$に`復号-$させ，［ 復号が完了した時点で充足されることになる~promise ］を返す。 ◎ This method causes the user agent to decode the image in parallel, returning a promise that fulfills when decoding is complete.
画像を復号できなかった場合、 ~promiseは `EncodingError$E 例外で却下されることになる。 ◎ The promise will be rejected with an "EncodingError" DOMException if the image cannot be decoded.
%image = new `Image( [ width [, height ] ] )$m
新たな `img$e 要素を返す — ［ %width ／ %height ］が与えられていれば、 それを要素の［ `width$a ／ `height$a ］属性に設定した上で。 ◎ Returns a new img element, with the width and height attributes set to the values passed in the relevant arguments, if applicable.

［ `width@m ／ `height@m ］取得子~手続きは：

  1. %~size ~LET ［ 画像は`具現化されて$いるならば描画された画像の~size ／ ~ELSE_ `画像は可用$であるならば画像の`密度~補正-済み生来な~size$／ ~ELSE_ ( 0, 0 ) ］
  2. ~RET %~size を成す［ `width^m 用には横幅 ／ `height^m 用には縦幅 ］を成す `px$css 数 `CSS$r
◎ 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;＼ 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 is not being rendered;＼ or else 0, if the image is not available or does not have density-corrected natural width and height. [CSS]

［ `width$m ／ `height$m ］設定子は、［ `width$a ／ `height$a ］内容~属性を`反映して$いるかのように動作するモノトスル。 ◎ On setting, they must act as if they reflected the respective content attributes of the same name.

［ `naturalWidth@m ／ `naturalHeight@m ］取得子~手続きは：

  1. %~size ~LET ［ `画像は可用$であるならば画像の`密度~補正-済み生来な~size$／ ~ELSE_ ( 0, 0 ) ］
  2. ~RET %~size を成す［ `naturalWidth^m 用には横幅／ `naturalHeight^m 用には縦幅 ］を成す `px$css 数
◎ The IDL attributes naturalWidth and naturalHeight must return 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, or else 0. [CSS]

注記： 画像の`密度~補正-済み生来な~size$は［ 画像の~metadata内に指定された方位を織り込む ］ので、［ `naturalWidth$m, `naturalHeight$m ］は［ 画像を正しく方位するために必要な回転 ］を適用した後の寸法を反映する — `image-orientation$p ~propの値に関わらず。 ◎ Since the density-corrected natural width and height of an image take into account any orientation specified in its metadata, naturalWidth and naturalHeight reflect the dimensions after applying any rotation needed to correctly orient the image, regardless of the value of the 'image-orientation' property.

`complete@m 取得子~手続きは ⇒ ~RET ~IS ~OR↓：

  • ［ コレは `srcset$a 属性を有していない ］~AND［ コレは `src$a 属性を［ 有していないか，有していて その値 ~EQ 空~文字列 ］］
  • ［ コレの`現在の要請$の`状態$ ~IN { `完全に可用$st, `壊en$st } ］~AND［ コレの`処理待ち要請$ ~EQ ~NULL ］
◎ The complete getter steps are: • If any of the following are true: •• both the src attribute and the srcset attribute are omitted; •• the srcset attribute is omitted and the src attribute's value is the empty string; •• the img element's current request's state is completely available and its pending request is null; or •• the img element's current request's state is broken and its pending request is null, • then return true. • Return false.
`currentSrc@m 取得子~手続きは ⇒ ~RET コレの`現在の要請$の`現在の~URL$ ◎ The currentSrc IDL attribute must return the img element's current request's current URL.

`decode()@m ~method~手続きは： ◎ The decode() method, when invoked, must perform the following steps:

  1. %~promise ~LET 新たな~promise ◎ Let promise be a new promise.

  2. `小taskを~queueする$( 次の手続き ) ◎ Queue a microtask to perform the following steps:

    注記： これが行われるのは、 `画像~dataを更新する$手続きが小task内も占めるからである。 したがって、 次のような~codeに対し： ◎ This is done because updating the image data takes place in a microtask as well. Thus, to make code such as 

    img.src = "stars.jpg";
img.decode();

    `stars.jpg^c を適正に復号するためには、 処理を小task 1 個分だけ遅延する必要がある。 ◎ properly decode stars.jpg, we need to delay any processing by one microtask.

    手続きは： ◎ ↑

    1. ~IF［ コレの`~node文書$は`全部的に作動中$でない ］~OR［ コレの`現在の要請$の`状態$ ~EQ `壊en$st ］ ⇒ `EncodingError$E 例外で %~promise を却下する ◎ If any of the following are true: • this's node document is not fully active; or • this's current request's state is broken, then reject promise with an "EncodingError" DOMException.

    2. ~ELSE ⇒ `並列的$に、 次のいずれかが生じるまで待機した上で，対応する動作を遂行する： ◎ Otherwise, in parallel, wait for one of the following cases to occur, and perform the corresponding actions:

      コレの`~node文書$は `全部的に作動中$でなくなった ◎ This img element's node document stops being fully active
      コレの`現在の要請$は 変化したか変異された ◎ This img element's current request changes or is mutated
      コレの`現在の要請$の`状態$ ~EQ `壊en$stになった ◎ This img element's current request's state becomes broken
      `EncodingError$E 例外で %~promise を却下する ◎ Reject promise with an "EncodingError" DOMException.
      コレの`現在の要請$の`状態$は`完全に可用$stになった ◎ This img element's current request's state becomes completely available

      画像を`復号-$する — その結果に応じて： ◎ Decode the image.

      この画像に対する復号を遂行する必要はない（例えば，画像は~vector~graphicである）：
      復号は成功裡に完了した：
      ~undefined で %~promise を解決する
      復号に失敗した（例えば，画像~dataは妥当でないことに因り）：
      `EncodingError$E 例外で %~promise を却下する
      ◎ If decoding does not need to be performed for this image (for example because it is a vector graphic), resolve promise with undefined. ◎ If decoding fails (for example due to invalid image data), reject promise with an "EncodingError" DOMException. ◎ If the decoding process completes successfully, resolve promise with undefined.

      ~UAは、［ 復号された~media~dataが，すぐ可用な~~状態であり続ける ］ことを確保するべきである — 少なくとも［ `~event~loop$における次回の`描画を更新する$ 段が成功裡に終端する ］までは。 これは、 ~API契約の重要な部分を成し，アリな限り破られるべきでない。 （これに違反するのは、 概して，［ ~memoryが少なく復号された画像~dataを抹消する要がある状況 ］か［ 復号された形で~~一時に保つには画像が大き過ぎるとき ］に限られるであろう。） ◎ User agents should ensure that the decoded media data stays readily available until at least the end of the next successful update the rendering step in the event loop. This is an important part of the API contract, and should not be broken if at all possible. (Typically, this would only be violated in low-memory situations that require evicting decoded image data, or when the image is too large to keep in decoded form for this period of time.)

      注記： ~animate化~画像が`完全に可用$stになるのは、 そのすべての~frameが読込まれた後に限られる。 したがって， 実装が その時点より前に最初の~frameを復号できるとしても、 上の手続きではそうすることなく， すべての~frameが可用になるまで待機する。 ◎ Animated images will become completely available only after all their frames are loaded. Thus, even though an implementation could decode the first frame before that point, the above steps will not do so, instead waiting until all frames are available.

  3. ~RET %~promise ◎ Return promise.

`decode$m ~methodを使わずに， `img$e 要素を読込んでから表示する処理nは、 次の様になるであろう： ◎ Without the decode() method, the process of loading an img element and then displaying it might look like the following: 

const %img = new Image();
%img.src = "nebula.jpg";
%img.onload = () => {
    document.body.appendChild(%img);
};
%img.onerror = () => {
    document.body.appendChild(new Text("nebula を読込めませんでした：("));
};

しかしながら，これでは、 何~frameか目につくほどに落とされ得る — 画像を~DOMの中に挿入した後に生じる塗りには， ~main~threadにおける同期的な復号を要するので。 ◎ However, this can cause notable dropped frames, as the paint that occurs after inserting the image into the DOM causes a synchronous decode on the main thread.

`decode$m ~methodを利用すれば、 これを次の様に書き直せる： ◎ This can instead be rewritten using the decode() method: 

const %img = new Image();
%img.src = "nebula.jpg";
%img.decode().then(() => {
    document.body.appendChild(%img);
}).catch(() => {
    document.body.appendChild(new Text("nebula を読込めませんでした： ("));
});

この形であれば、［ 画像が~DOMに挿入される（したがって塗られる）のは、 それを`並列的$に復号して復号が完了した後に限られる ］ので，~frameが落とされるのを避けれる。 ◎ This latter form avoids the dropped frames of the original, by allowing the user agent to decode the image in parallel, and only inserting it into the DOM (and thus causing it to be painted) once the decoding process is complete.

`decode()$m ~methodは、［ 復号された画像~dataが 1 ~frame以内に可用になる ］ことを確保しようと試みるので， `requestAnimationFrame()$m ~APIと組合せることもできる。 このことは、［ すべての~DOM改変が，`~animation~frame~callback~map$に一括して~batchされる ］ことを確保するような［ ~coding-style／~framework ］と併用できることを意味する： ◎ Because the decode() method attempts to ensure that the decoded image data is available for at least one frame, it can be combined with the requestAnimationFrame() API. This means it can be used with coding styles or frameworks that ensure that all DOM modifications are batched together as animation frame callbacks: 

const %container = document.querySelector("#container");

const { %containerWidth, %containerHeight } = computeDesiredSize();
requestAnimationFrame(() => {
 %container.style.width = %containerWidth;
 %container.style.height = %containerHeight;
});

// ...

const %img = new Image();
%img.src = "supernova.jpg";
%img.decode().then(() => {
    requestAnimationFrame(() => %container.appendChild(%img));
});

`Image(width, height)@m は、 `HTMLImageElement$I ~objを作成する旧来の~factory関数である （ `createElement()$m などの~DOMによる~factory~methodに加えて供されている）。 その~method~手続きは： ◎ A legacy factory function is provided for creating HTMLImageElement objects (in addition to the factory methods from DOM such as createElement()): Image(width, height).＼ When invoked, the legacy factory function must perform the following steps:

  1. %文書 ~LET `現在の大域~obj$に`結付けられた文書$ ◎ Let document be the current global object's associated Document.
  2. %img ~LET `要素を作成する$( %文書, `img^l, `~HTML名前空間$ ) ◎ Let img be the result of creating an element given document, img, and the HTML namespace.
  3. ~IF［ %width ~NEQ ε ］ ⇒ %img の`属性~値を設定する$( `width^l, %width ) ◎ If width is given, then set an attribute value for img using "width" and width.
  4. ~IF［ %height ~NEQ ε ］ ⇒ %img の`属性~値を設定する$( `height^l, %height ) ◎ If height is given, then set an attribute value for img using "height" and height.
  5. ~RET %img ◎ Return img.

同じ画像であっても、 それに適切な代替~textは，文脈に依存して異なり得る。 ◎ A single image can have different appropriate alternative text depending on the context.

以下の各~事例には，どれも同じ画像が利用されているが、 それでも `alt$a ~textは，事例ごとに異なる。 画像は、 スイス ジュネーヴ州 `カルージュ自治体の紋章＠https://upload.wikimedia.org/wikipedia/commons/f/fc/Carouge-coat_of_arms.svg$である。 ◎ In each of the following cases, the same image is used, yet the alt text is different each time. The image is the coat of arms of the Carouge municipality in the canton Geneva in Switzerland.

次の画像は、 補足~iconとして利用されている： ◎ Here it is used as a supplementary icon:

`img-1^xCode

次の画像は、 町を表現している~iconとして利用されている： ◎ Here it is used as an icon representing the town:

`img-2^xCode

次の画像は、 町についての~textの一部として利用されている： ◎ Here it is used as part of a text on the town:

`img-3^xCode

次の画像は、 同様の~textを~supportする仕方として利用されている — 画像の代替は、 代わりに記述として与えられている： ◎ Here it is used as a way to support a similar text where the description is given as well as, instead of as an alternative to, the image:

`img-4^xCode

次の画像は、 物語の一部として利用されている： ◎ Here it is used as part of a story:

`img-5^xCode

次の画像は、［ 公表~時点では、 何らかの種類の紋章であることしか既知でない ］ため，代用~textは供せない — `title$a 属性~内には 画像~用の概略的~captionしか供せていない： ◎ Here it is not known at the time of publication what the image will be, only that it will be a coat of arms of some kind, and thus no replacement text can be provided, and instead only a brief caption for the image is provided, in the title attribute:

`img-6^xCode

この事例でも、 作者は，本当の代用~textを供する仕方を見出すのが理想だが。 例えば、 当の利用者にそれも供するよう依頼するなど。 代用~textが供されていないと、 画像を視れない人達にとって，文書の利用が困難になる — 例： 盲目な利用者 ／ 接続の帯域幅がごく狭い／ 従量課金 ／ ~textのみの~web~browserを利用するよう強いられている， など。 ◎ Ideally, the author would find a way to provide real replacement text even in this case, e.g. by asking the previous user. Not providing replacement text makes the document more difficult to use for people who are unable to view images, e.g. blind users, or users or very low-bandwidth connections or who pay by the byte, or users who are forced to use a text-only web browser.

絵図は同じでも、 適切に代替する~textは，文脈に応じて異なる例： ◎ Here are some more examples showing the same picture used in different contexts, with different appropriate alternate texts each time.

`img-7^xCode `img-8^xCode `img-9^xCode `img-10^xCode

4.8.4. 画像

4.8.4.1. 序論
◎非規範的

~HTML内に画像~資源を 1 個だけ画像を埋込むときは、 `img$e 要素と その `src$a 属性を利用する。 ◎ To embed an image in HTML, when there is only a single image resource, use the img element and its src attribute.

`intro-1^xCode

しかしながら、 作者が［ 複数の画像~資源を利用して，~UAが それらから選ぶ ］ようにしたいと望む状況もあるかもしれない： ◎ However, there are a number of situations for which the author might wish to use multiple image resources that the user agent can choose from:

  • 環境~特性は、 利用者ごとに異なるかもしれない： ◎ Different users might have different environmental characteristics:

    • ~screenの物理的~sizeは、 利用者ごとに異なるかもしれない。 ◎ The users' physical screen size might be different from one another.

      ~screenの対角線は、 携帯~電話では 4 ~inchである一方， ~laptopでは 14 ~inchかもしれない。 ◎ A mobile phone's screen might be 4 inches diagonally, while a laptop's screen might be 14 inches diagonally.

      `intro-svg-1^dgm

      注記： これが関連するのは、 画像の描画d~sizeが`表示域$の~sizeに依存する場合に限られる。 ◎ This is only relevant when an image's rendered size depends on the viewport size.

    • ~screen画素~密度は、 利用者ごとに異なるかもしれない。 ◎ The users' screen pixel density might be different from one another.

      携帯~電話の~screenの~inchあたりの物理的~画素~数は、 他に比して 3 倍になるかもしれない — ~screenの物理的~sizeに関わらず。 ◎ A mobile phone's screen might have three times as many physical pixels per inch compared to another mobile phone's screen, regardless of their physical screen size.

      `intro-svg-2^dgm

    • ~zoom~levelは、 利用者ごとに異なったり, 同じ利用者でも時間~越しに変化するかもしれない。 ◎ The users' zoom level might be different from one another, or might change for a single user over time.

      利用者は、 より詳細な見かけを取得できるようにするため， 特定0の画像を~zoomして大きくするかもしれない。 ◎ A user might zoom in to a particular image to be able to get a more detailed look.

      ~zoom~levelと（前項の）~screen画素~密度の両者とも、 1 `px$css あたりの~screenの物理的~画素~数に影響し得る。 この比は、 通例的に `機器画素比@ と呼ばれている。 ◎ The zoom level and the screen pixel density (the previous point) can both affect the number of physical screen pixels per CSS pixel. This ratio is usually referred to as device-pixel-ratio.

    • ~screen方位は、 利用者ごとに異なったり, 同じ利用者でも時間~越しに変化するかもしれない。 ◎ The users' screen orientation might be different from one another, or might change for a single user over time.

      ~tabletは、 ~screenが 縦置き（ `portrait^en ）または横置き（ `landscape^en ） になるよう，直立に保持されたり，真横に倒されることもある。 ◎ A tablet can be held upright or rotated 90 degrees, so that the screen is either "portrait" or "landscape".

      `intro-svg-3^dgm

    • ~networkの［ 速度 ／ 待時間 ／ 帯域幅~cost ］は、 利用者ごとに異なったり, 同じ利用者でも時間~越しに変化するかもしれない。 ◎ The users' network speed, network latency and bandwidth cost might be different from one another, or might change for a single user over time.

      利用者の接続は、 仕事場では［ 高速, 短い待時間, 定額制 ］, 家では［ 低速, 短い待時間, 定額制 ］, 他所では［ 可変速, 長い待時間, 従量制 ］かもしれない。 ◎ A user might be on a fast, low-latency and constant-cost connection while at work, on a slow, low-latency and constant-cost connection while at home, and on a variable-speed, high-latency and variable-cost connection anywhere else.

  • 作者は、 同じ画像~内容を — 通例的には `表示域$の横幅に依存して — 異なる描画d~sizeで示したいと求めるかもしれない。 これは、 通例的に `表示域に基づく選定@ と呼ばれている。 ◎ Authors might want to show the same image content but with different rendered size depending on, usually, the width of the viewport. This is usually referred to as viewport-based selection.

    ~web~pageには、 `表示域$の上端に［ その横幅の全体にわたる~banner ］が常にあるかもしれない。 この事例では、 画像の描画d~sizeは， ~screenの物理的~sizeに依存する （~browser~windowは最大~化されているとする）。 ◎ A web page might have a banner at the top that always spans the entire viewport width. In this case, the rendered size of the image depends on the physical size of the screen (assuming a maximised browser window).

    `intro-svg-4^dgm

    別の~web~pageは、 画像を何本かの~columnに並べていて， その本数は、~screenの物理的~sizeが［ 小なら 1 本, 中なら 2 本, 大ならば 3 本 ］あり、 画像の描画d~sizeは， 各~事例ごとに`表示域$を埋め尽くすため変わるかもしれない。 この事例では、 画像の描画d~sizeは — ~screenが小さかろうが — ~layoutは~column 1 本のときの方が， 2 本のときに比して`大きくなる^emこともある。 ◎ Another web page might have images in columns, with a single column for screens with a small physical size, two columns for screens with medium physical size, and three columns for screens with big physical size, with the images varying in rendered size in each case to fill up the viewport. In this case, the rendered size of an image might be bigger in the one-column layout compared to the two-column layout, despite the screen being smaller.

    `intro-svg-5^dgm

  • 作者は、 画像の描画d~sizeに依存して，異なる画像~内容を示したいと求めるかもしれない。 これは、 通例的に `~art-direction@ （ `art direction^en ）と呼ばれている。 ◎ Authors might want to show different image content depending on the rendered size of the image. This is usually referred to as art direction.

    作者は、［ ~web~pageが物理的~sizeが広い~screenで視られているとき （~browser~windowは最大~化されているとする） ］は［ 画像の重要部分の周囲に さほど関連しない部分を含めたい ］と望む一方で，［ 同じ~web~pageが狭い~screenで視られているとき ］は［ 画像の重要部分だけ示したい ］と望むかもしれない。 ◎ When a web page is viewed on a screen with a large physical size (assuming a maximised browser window), the author might wish to include some less relevant parts surrounding the critical part of the image. When the same web page is viewed on a screen with a small physical size, the author might wish to show only the critical part of the image.

    `intro-svg-6^dgm

  • 作者は、 同じ画像~内容を［ ~UAが~supportする画像~形式に依存して，異なる画像~形式で示したい ］と求めるかもしれない。 これは、 通例的に `画像~形式に基づく選定@ と呼ばれている。 ◎ Authors might want to show the same image content but using different image formats, depending on which image formats the user agent supports. This is usually referred to as image format-based selection.

    ~web~pageには、［ ~JPEG, ~WebP, ~JPEG-XR ］などの各種 画像~形式による画像があるかもしれない — 後の 2 つの方が、 ~JPEGに比して圧縮~能が良い。 ~supportされる画像~形式は、 ~UAごとに異なり， 形式によってはより良い圧縮~比を提供するので、 作者は，~UAが より良い形式を［ ~supportするときは それ ／ ~supportしないときは ~fallbackとして~JPEG ］を供するよう~serveしたいであろう。 ◎ A web page might have some images in the JPEG, WebP and JPEG XR image formats, with the latter two having better compression abilities compared to JPEG. Since different user agents can support different image formats, with some formats offering better compression ratios, the author would like to serve the better formats to user agents that support them, while providing JPEG fallback for user agents that don't.

上に挙げた各 状況は、 互いに排他的ではない。 例えば、［ `機器画素比$ごとに異なる資源を`~art-direction$用に異なる資源も伴うよう組合せる ］ことは，理にかなう。 ◎ The above situations are not mutually exclusive. For example, it is reasonable to combine different resources for different device-pixel-ratio with different resources for art direction.

これらの問題を~scriptingを利用して解くこともアリだが、 そうすると他の問題も導入される： ◎ While it is possible to solve these problems using scripting, doing so introduces some other problems:

  • ~UAには、 ~web~pageの読込ngが早く完了するよう，［ ~scriptが走る機会cを得る前に， ~HTML~markup内に指定された画像を先取的に~downloadする ］ものもある。 ~scriptが~downloadする画像を変更した場合、 ~UAは 2 回の~downloadを別々に開始することになり， ~pageの読込ng処理能が悪化しかねない。 ◎ Some user agents aggressively download images specified in the HTML markup, before scripts have had a chance to run, so that web pages complete loading sooner. If a script changes which image to download, the user agent will potentially start two separate downloads, which can instead cause worse page loading performance.
  • 作者が［ ~HTML~markup内に画像を指定するのを避けて， ~scriptから 1 回だけ~downloadする ］ことにした場合、 上述の二重~download問題は避けれるが， ~scriptingを不能化した利用者に対しては［ 画像は まったく~downloadされず， 画像を先取的に~downloadする最適化も不能化される ］ことになる。 ◎ If the author avoids specifying any image in the HTML markup and instead instantiates a single download from script, that avoids the double download problem above but then no image will be downloaded at all for users with scripting disabled and the aggressive image downloading optimization will also be disabled.

このことを念頭に，この仕様は、［ 上の問題に宣言的な方式で取組む特能 ］をいくつか導入する。 ◎ With this in mind, this specification introduces a number of features to address the above problems in a declarative manner.

画像の描画d~sizeは固定されているときの`機器画素比$に基づく選定： ◎ Device-pixel-ratio-based selection when the rendered size of the image is fixed

`img$e 要素~上の `src$a, `srcset$a 属性に `x^v 記述子を利用すれば、 ~sizeだけ異なる複数の画像を供せる （小さい方の画像は 大きい方の画像を縮小したもの）。 ◎ The src and srcset attributes on the img element can be used, using the x descriptor, to provide multiple images that only vary in their size (the smaller image is a scaled-down version of the bigger image).

注記： `x^v 記述子は、 画像の描画d~sizeが`表示域$の横幅に依存するとき（`表示域に基づく選定$）は適切でないが， `~art-direction$と併用できる。 ◎ The x descriptor is not appropriate when the rendered size of the image depends on the viewport width (viewport-based selection), but can be used together with art direction.

`intro-2^xCode

~UAは、 所与の資源のどれかを，利用者の［ ~screenの画素~密度, ~zoom~level, 場合によっては利用者の~network条件などの他の要因 ］に依存して選べる。 ◎ The user agent can choose any of the given resources depending on the user's screen's pixel density, zoom level, and possibly other factors such as the user's network conditions.

`srcset$a 属性を解さない旧~UAとの後方-互換性のため、 `img$e 要素の `src$a 属性~内にも 1 個の~URLが指定されている。 これにより、 旧~UAにて表示されるときでも有用になる （その解像度は、たぶん利用者の好みより低くなるであろうが）。 `src$a 属性は、 新しい~UAに対しても，資源~選定に関与する — その値に記述子 `1x^v を伴わせたものが `srcset$a にも指定されていたかのように。 ◎ For backwards compatibility with older user agents that don't yet understand the srcset attribute, one of the URLs is specified in the img element's src attribute. This will result in something useful (though perhaps lower-resolution than the user would like) being displayed even in older user agents. For new user agents, the src attribute participates in the resource selection, as if it was specified in srcset with a 1x descriptor.

［ `width$a, `height$a ］属性~内には、 画像の描画d~sizeが与えられている — それは、［ 画像を~downloadする前に，それ用の空間を割振る ］ことを~UAに許容する。 ◎ The image's rendered size is given in the width and height attributes, which allows the user agent to allocate space for the image before it is downloaded.

`表示域に基づく選定$ ◎ Viewport-based selection
`srcset$a, `sizes$a 属性と `w^v 記述子を利用すれば、 ~sizeだけ異なる複数の画像を供せる （小さい方の画像は 大きい方の画像を縮小したもの）。 ◎ The srcset and sizes attributes can be used, using the w descriptor, to provide multiple images that only vary in their size (the smaller image is a scaled-down version of the bigger image).

この例では、 ~banner画像は，`表示域$の横幅~全体を占める （適切な~CSSを利用して）。 ◎ In this example, a banner image takes up the entire viewport width (using appropriate CSS).

`intro-3^xCode

~UAは、 指定された `w^v 記述子と `sizes$a 属性~内に指定された描画d~sizeから， 各~画像の実効画素~密度を計算することになる。 次に~UAは、 所与の資源のどれかを，利用者の［ ~screenの画素~密度, ~zoom~level, 場合によっては利用者の~network条件などの他の要因 ］に依存して選べる。 ◎ The user agent will calculate the effective pixel density of each image from the specified w descriptors and the specified rendered size in the sizes attribute. It can then choose any of the given resources depending on the user's screen's pixel density, zoom level, and possibly other factors such as the user's network conditions.

利用者の~screen幅が 320 `px$css の場合、 これは `wolf-400.jpg 1.25x, wolf-800.jpg 2.5x, wolf-1600.jpg 5x^v を指定することに等価になる。 他方，~screen幅が 1200 `px$css の場合、 これは `wolf-400.jpg 0.33x, wolf-800.jpg 0.67x, wolf-1600.jpg 1.33x^v を指定することに等価になる。 `w^v 記述子と `sizes$a 属性を利用することにより、 利用者の機器の大きさに関わらず， ~UAは~downloadする正しい画像~sourceを選べる。 ◎ If the user's screen is 320 CSS pixels wide, this is equivalent to specifying wolf-400.jpg 1.25x, wolf-800.jpg 2.5x, wolf-1600.jpg 5x. On the other hand, if the user's screen is 1200 CSS pixels wide, this is equivalent to specifying wolf-400.jpg 0.33x, wolf-800.jpg 0.67x, wolf-1600.jpg 1.33x. By using the w descriptors and the sizes attribute, the user agent can choose the correct image source to download regardless of how large the user's device is.

後方-互換性を得るため、 ~URLのうち 1 つが `img$e 要素の`src$a 属性~内に指定される。 新しい~UAにおいては、 `srcset$a 属性が `w^v 記述子を利用しているときは， `src$a 属性は無視される。 ◎ For backwards compatibility, one of the URLs is specified in the img element's src attribute. In new user agents, the src attribute is ignored when the srcset attribute uses w descriptors.

この例の~web~pageの~layoutは、 `表示域$の横幅に依存して 3 種に分かれる。 一連の画像は、 ~layout幅が［ 狭いときは 1 本, 中程度のときは 2 本, 広いときは 3 本 ］の~columnに並べられ （各~画像の横幅は、順に，およそ 100%, 50%, 33% ）、 それに加え~page~marginがある。 これらの~layoutは、 `表示域$の幅 `30em^v, `50em^v を境目に分かたれる。 ◎ In this example, the web page has three layouts depending on the width of the viewport. The narrow layout has one column of images (the width of each image is about 100%), the middle layout has two columns of images (the width of each image is about 50%), and the widest layout has three columns of images, and some page margin (the width of each image is about 33%). It breaks between these layouts when the viewport is 30em wide and 50em wide, respectively.

`intro-4^xCode

`sizes$a 属性は、 ~layoutの境目を［ `30em^v, `50em^v ］の所に設定しておき、 これらの境目で分けられる順に，画像~sizeは［ `100vw^v, `50vw^v, `calc(33vw - 100px)^v ］になるよう宣言する。 これらの~sizeを［ ~CSSで指定する実際の画像~横幅 ］に正確に合致させることは、 必要yでない。 ◎ The sizes attribute sets up the layout breakpoints at 30em and 50em, and declares the image sizes between these breakpoints to be 100vw, 50vw, or calc(33vw - 100px). These sizes do not necessarily have to match up exactly with the actual image width as specified in the CSS.

~UAは、［ `media-condition$t （丸括弧の中）が真に評価される最初の~item ］を利用して，あるいは［ すべてが偽に評価された場合は，最後の~item （ `calc(33vw - 100px)^v ） ］を利用して， `sizes$a 属性から横幅を選ぶことになる。 ◎ The user agent will pick a width from the sizes attribute, using the first item with a <media-condition> (the part in parentheses) that evaluates to true, or using the last item (calc(33vw - 100px)) if they all evaluate to false.

例えば，`表示域$の横幅 %横幅 が `29em^v の場合、 `(max-width: 30em)^v は 真に評価され， `100vw^v が利用されるので、 画像~sizeは，資源~選定の目的においては `29em^v になる。 %横幅 が `32em^v であった場合、 `(max-width: 30em)^v は偽に評価されるが, `(max-width: 50em)^v は真に評価され， `50vw^v が利用されるので、 画像~sizeは， 資源~選定の目的においては `16em^v になる（ %横幅 の半分）。 ~layoutが異なることにより、 `表示域$が少しだけ幅広になったときの方が，小さな画像になることに注意。 ◎ For example, if the viewport width is 29em, then (max-width: 30em) evaluates to true and 100vw is used, so the image size, for the purpose of resource selection, is 29em. If the viewport width is instead 32em, then (max-width: 30em) evaluates to false, but (max-width: 50em) evaluates to true and 50vw is used, so the image size, for the purpose of resource selection, is 16em (half the viewport width). Notice that the slightly wider viewport results in a smaller image because of the different layout.

それから，~UAは、 実効~画素~密度を計算して，前の例と同様に適切な資源を選べれるようになる。 ◎ The user agent can then calculate the effective pixel density and choose an appropriate resource similarly to the previous example.

この例は、 前の例と同じだが，当の画像は後回し（ `Lazy$st ）に読込まれる。 この事例では、 `sizes$a 属性に~keyword `~auto0$v を利用できる — ~UAは、 `~source~size$用に `width$a 属性（または~CSSにて指定された横幅）を利用することになる。 ◎ 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, and the user agent will use the width attribute (or the width specified in CSS) for the source size.

`intro-5^xCode

~keyword `~auto0$v を~supportしない旧来の~UAとの後方-互換性を良くしたいと欲する場合、 ~fallback~sizeを指定できる。 ◎ For better backwards-compatibility with legacy user agents that don't support the auto keyword, fallback sizes can be specified if desired.

`intro-6^xCode
`~art-direction$に基づく選定 ◎ Art direction-based selection
［ `picture$e 要素, `source$e 要素 ］を `media$aS 属性と併用すれば、 画像~内容が変わるような複数の画像を供せる （一例として，小さい方の画像は 大きい方の画像を切り抜いたもの）。 ◎ The picture element and the source element, together with the media attribute, can be used to provide multiple images that vary the image content (for instance the smaller image might be a cropped version of the bigger image).
`intro-7^xCode

~UAは、［ `picture$e 要素~内の `source$e 要素 ］のうち［ その `media$aS 属性~内の媒体~queryが環境に合致するもの ］のうち最初のものを選んだ上で，［ その `srcset$aS 属性から適切な~URLを選ぶ ］ことになる。 ◎ The user agent will choose the first source element for which the media query in the media attribute matches, and then choose an appropriate URL from its srcset attribute.

画像の描画d~sizeは、 どの資源が選ばれたかに依存して変わる。 ~CSSを利用すれば、 ~UAが画像を~downloadする前に利用できる寸法を指定できる。 ◎ The rendered size of the image varies depending on which resource is chosen. To specify dimensions that the user agent can use before having downloaded the image, CSS can be used. 

img { width: 300px; height: 300px }
@media (min-width: 32em) { img { width: 500px; height:300px } }
@media (min-width: 45em) { img { width: 700px; height:400px } }

次の例では、 `~art-direction$と`機器画素比$に基づく選定を組合せる。 `表示域$の半分を占める~bannerは、 ~screen幅が［ 広いとき, 狭いとき ］の 2 種で供される。 ◎ This example combines art direction- and device-pixel-ratio-based selection. A banner that takes half the viewport is provided in two versions, one for wide screens and one for narrow screens.

`intro-8^xCode
`画像~形式に基づく選定$ ◎ Image format-based selection
`source$e 要素に `type$aS 属性を利用すれば、 異なる形式による複数の画像を供せる。 ◎ The type attribute on the source element can be used to provide multiple images in different formats.
`intro-9^xCode

この例では、 ~UAは，［ 自身が~supportする~MIME型を伴う `type$aS 属性を有する ］ような最初の~sourceを選ぶことになる。 ~UAが~WebP画像を~supportするなら 1 個目の `source$e 要素が選ばれ， そうでないが ~JPEG-XR画像を~supportするなら 2 個目の `source$e 要素が選ばれ， 両~形式とも~supportしなければ `img$e 要素が選ばれることになる。 ◎ In this example, the user agent will choose the first source that has a type attribute with a supported MIME type. If the user agent supports WebP images, the first source element will be chosen. If not, but the user agent does support JPEG XR images, the second source element will be chosen. If neither of those formats are supported, the img element will be chosen.

4.8.4.1.1. 順応的な画像
◎非規範的

~CSSと媒体~queryを利用すれば、［ 利用者の環境に動的に順応する ］ような［ ~graphicな~page~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 より幅広）［ 300×150 の画像 `a-rectangle.png^v ］が利用され， ~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:

`intro-10^xCode

注記： `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を利用して寸法を供すれば、 ~pageを読込んでいる間に~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:

`intro-11^xCode

代替として， `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:

`intro-12^xCode

`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:

`intro-13^xCode

しかしながら，旧来の携帯~機~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.

`intro-14^xCode

この場合の `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:

`intro-15^xCode

上では，最大~寸法（`表示域$のそれ）を与えるため、 画像に意図される `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.

`intro-16^xCode
4.8.4.2. `source^e, `img^e, `link^e 要素に共通な属性
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 属性, `link^e 要素の `imagesrcset$aL 属性 ］の総称を表す。 】

この属性に指定する値は、 次を満たさなければナラナイ：

  • `002C^U `,^smb で分離された 1 個~以上の`画像~候補~文字列$からなる。
  • 値を成す ある`画像~候補~文字列$が［ その~URLの後に記述子も`~ASCII空白$も包含しない ］ならば、 その次の`画像~候補~文字列$の最初の文字は`~ASCII空白$である。
◎ If present, its value must consist of one or more image candidate strings, each separated from the next by a U+002C COMMA character (,). If an image candidate string contains no descriptors and no ASCII whitespace after the URL, the following image candidate string, if there is one, must begin with one or more ASCII whitespace.

各 `画像~候補~文字列@ は、 挙げられる順に，次に挙げる成分からなる — この~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 でないものであって、［ 対話的でも多pageでもなく, ~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.

同じ要素の 複数の`画像~候補~文字列$においては：

  • 互いの`横幅~値$が同じになってはナラナイ。
  • 互いの`密度~値$が同じになってはナラナイ。
  • この要件の目的においては、 記述子を伴わない`画像~候補~文字列$は，記述子 `1x^v を伴う`画像~候補~文字列$と等価とする。
◎ There must not be an image candidate string for an element that has the same width descriptor value as another image candidate string's width descriptor value for the same element. ◎ There must not be an image candidate string for an element that has the same pixel density descriptor value as another image candidate string's pixel density descriptor value for the same element. For the purpose of this requirement, an image candidate string with no descriptors is equivalent to an image candidate string with a 1x descriptor.

要素~用の ある`画像~候補~文字列$に`横幅~記述子$を指定している場合、 他のすべての`画像~候補~文字列$にも`横幅~記述子$を指定しなければナラナイ。 ◎ 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で与えられる資源に`生来な横幅$がある場合には， それに合致させるモノトスル。 ◎ The specified width in an image candidate string's width descriptor must match the natural width in the resource given by the image candidate string's URL, if it has a natural width.

要素が`~sizes属性$を有する場合、 その要素~用の どの`画像~候補~文字列$にも`横幅~記述子$を指定しなければナラナイ。 ◎ If an element has a sizes 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 属性, `link^e 要素の `imagesizes$aL 属性 ］の総称を表す。 】

指定する値は、 `妥当な~source~size~list$でなければナラナイ。 ◎ 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
	| `~auto0$v
`source-size-value@t
	= `length$t
	| `~auto0$v

`source-size-value$t として与える `length$t は、 次を満たさなければナラナイ ⇒ ［ 負でない ］~AND［ `~math関数$以外の`~CSS関数$を利用していない ］ ◎ A <source-size-value> that is a <length> must not be negative, and must not use CSS functions other than the math functions.

~keyword `~auto0@v は、 `~sizes属性を構文解析する$ことにより算出される横幅を与える。 在る場合、 ~AND↓ が満たされなければナラナイ： ◎ The keyword auto is a width that is computed in parse a sizes attribute. If present,＼

  • `~auto0$v は `source-size-list$t 値 %~list を成す最初の~entryである ◎ it must be the first entry＼
  • `~ASCII小文字~化する$( %~list ) の結果は次を満たす ⇒ ［ `auto^l に等しい ］~OR［ `auto,^l で開始している ］ ◎ and the entire <source-size-list> value must either be the string "auto" (ASCII case-insensitive) or start with the string "auto," (ASCII case-insensitive).

注記： `~auto0$v は、 当の画像の読込ngを （［ `画像~dataを更新する$／ `環境における変化に反応する$ ］~algoで） 起動した `img$e 要素が［ `自動-~sizeを許容して$いて，`具現化されて$いる ］ならば，要素の`具象-~obj~size$を成す横幅になる。 他の場合、 `~auto0$v 値は無視され， その次の`~source~size$が（もし在れば）代わりに利用される。 ◎ If the img element that initiated the image loading (with the update the image data or react to environment changes algorithms) allows auto-sizes and is being rendered, then auto is the concrete object size width. Otherwise, the auto value is ignored and the next source size is used instead, if any.

`img$e 要素の `sizes$a 属性には、 当の要素が`自動-~sizeを許容して$いるならば， ~keyword `~auto0$v を指定してもヨイ — 他の場合、 指定してはナラナイ。

`source$e 要素の `sizes$aS 属性には、 当の要素に後続する同胞として［ `自動-~sizeを許容して$いる `img$e 要素が在る ］ならば， ~keyword `~auto0$v を指定してもヨイ — 他の場合、 指定してはナラナイ。

◎ 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. • 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 allows auto-sizes.

注記： 加えて、［［ `width$a, `height$a ］属性を利用して，あるいは~CSSで ］寸法を指定することが，強く奨励される。 寸法が指定されない下では、 当の画像は，寸法 300×150 で描画される見込みが高い — `sizes="auto"^c は、 `§ 具現化＠~HTMLrendering#img-contain-size$ においては `contain-intrinsic-size$p: `300px 150px^v; を含意するので。 ◎ In addition, it is strongly encouraged to specify dimensions using the width and height attributes or with CSS. Without specified dimensions, the image will likely render with 300x150 dimensions because sizes="auto" implies contain-intrinsic-size: 300px 150px in the Rendering section.

`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. 処理~model

各 `img$e 要素は、 次に挙げるものを持つ： ◎ An img element has a current request and a pending request.＼

  • `現在の要請@ ⇒ 初期~時には新たな`画像~要請$に設定される。 ◎ The current request is initially set to a new image request.＼
  • `処理待ち要請@ ⇒ ある`画像~要請$／ ~NULL — 初期~時は ~NULL とする。 ◎ The pending request is initially set to null.

各 `画像~要請@ は、 次に挙げるものを持つ： ◎ An image request has a state, current URL, and image data.

  • `状態@ ⇒ 次に挙げるいずれか — 初期~時は `不可用$st とする： ◎ An image request's state is one of the following:

    • `不可用@st ⇒ ~UAは 画像~dataをある程度は得しているかもしれないが， 画像の寸法を取得するまで十分に復号されていない。 ◎ Unavailable • The user agent hasn't obtained any image data, or has obtained some or all of the image data but hasn't yet decoded enough of the image to get the image dimensions.
    • `部分的に可用@st ⇒ ~UAは 画像~dataの一部を得していて，少なくとも画像の寸法は可用である。 ◎ Partially available • The user agent has obtained some of the image data and at least the image dimensions are available.
    • `完全に可用@st ⇒ ~UAは すべての画像~dataを得していて，少なくとも画像の寸法は可用である。 ◎ Completely available • The user agent has obtained all of the image data and at least the image dimensions are available.
    • `壊en@st ⇒ ~UAは，できる限りすべての画像~dataを得したが、 画像の寸法を取得するに十分に画像を復号できなかった （例： 画像は破損している ／ 形式は~supportされてない ／ まったく~dataを得せなかった）。 ◎ Broken • The user agent has obtained all of the image data that it can, but it cannot even decode the image enough to get the image dimensions (e.g. the image is corrupted, or the format is not supported, or no data could be obtained).
  • `現在の~URL@ ⇒ 初期~時は空~文字列とする。 ◎ An image request's current URL is initially the empty string.
  • `画像~data@ ⇒ 復号された画像~data。 初期~時は ε （なし）とする。 ◎ An image request's image data is the decoded image data.

`img$e 要素は、 次を満たすならば `画像は可用@ であるとされる ⇒ その`現在の要請$の`状態$ ~IN { `部分的に可用$st, `完全に可用$st } ◎ When an image request's state is either partially available or completely available, the image request is said to be available.

`img$e 要素は、 次を満たすならば `全部的に復号-可能@ であるとされる ⇒ ［ その`現在の要請$の`状態$ ~EQ `完全に可用$st ］~AND［ ~UAは その~media~dataを~errorなしに復号できる ］ ◎ When an img element's current request's state is completely available and the user agent can decode the media data without errors, then the img element is said to be fully decodable. ◎ ↑An image request's state is initially unavailable.

`img$e 要素は、 その`画像は可用$であるならば，次のような`塗り~source$を供する：

  • 横幅, 縦幅は、 画像の`密度~補正-済み生来な~size$ （横幅, 縦幅 それぞれに対し，もしあれば）
  • 外観は、 画像の生来な外観 【`内在的な外観＠~CSSIMAGE4#paint-sources$】
◎ When an img element's current request is available, the img element provides a paint source whose width is the image's density-corrected natural width (if any), whose height is the image's density-corrected natural height (if any), and whose appearance is the natural appearance of the image.

次を満たす `img$e 要素は、 `~srcsetまたは~pictureを利用して@ いるとされる ⇒ ［ `srcset$a 属性を有する ］~OR［ 親は `picture$e 要素である ］ ◎ An img element is said to use srcset or picture if it has a srcset attribute specified or if it has a parent that is a picture element.

各 `img$e 要素は、 次に挙げるものも持つ： ◎ ↓

  • `最後に選定された~source@ ⇒ 初期~時は ε （なし）とする。 ◎ Each img element has a last selected source, which must initially be null.
  • `現在の画素~密度@ ⇒ 初期~時は 1 とする。 ◎ Each image request has a current pixel density, which must initially be 1.
  • `選好される密度~補正-済み寸法@ ⇒ ~NULL または ( 横幅, 縦幅 ) からなる構造体。 初期~時は ~NULL とする。 ◎ Each image request has preferred density-corrected dimensions, which is either a struct consisting of a width and a height or is null. It must initially be null.

【 ［ `現在の画素~密度$／`選好される密度~補正-済み寸法$ ］は、 原文では各 `画像~要請$が持つものとして定義されているが， 実際には `img^e 要素の`現在の要請$のそれしか参照されていないので、 この訳では `img^e 要素が直に持つように単純~化している。 】

`img$e 要素 %img の `密度~補正-済み生来な~size@ を決定するときは： ◎ To determine the density-corrected natural width and height of an img element img:

  1. %寸法 ~LET %img の`選好される密度~補正-済み寸法$ ◎ Let dim be img's current request's preferred density-corrected dimensions.

    注記： `選好される密度~補正-済み寸法$は、 `画像を呈示~用に準備する$~algo内で 当の画像~内の~meta情報に基づいて設定される。 ◎ The preferred density-corrected dimensions are set in the prepare an image for presentation algorithm based on meta information in the image.

  2. ~IF［ %寸法 ~EQ ~NULL ］：

    1. %寸法 の横幅 ~SET %img の`生来な横幅$は［ 在るならば それ／ 無いならば 0† ］
    2. %寸法 の縦幅 ~SET %img の`生来な縦幅$は［ 在るならば それ／ 無いならば 0† ］

    【† 原文は、［ 生来な横幅／生来な縦幅 ］が無い場合の取扱いを述べていない。 一方で，`密度~補正-済み生来な~size$を参照している他所においては、 それが無い場合の取扱いを述べており，その場合は 0 と見なすものと指定されているので、 その取扱いをここに集約する。 】

    ◎ If dim is null, set dim to img's natural dimensions.
  3. %寸法 の横幅 ~SET %寸法 の横幅 ~DIV %img の`現在の画素~密度$ ◎ Set dim's width to dim's width divided by img's current request's current pixel density.
  4. %寸法 の縦幅 ~SET %寸法 の縦幅 ~DIV %img の`現在の画素~密度$ ◎ Set dim's height to dim's height divided by img's current request's current pixel density.
  5. ~RET %寸法 ◎ Return dim.

例えば、［ `現在の画素~密度$ ~EQ 3.125 ］の場合、 1 `in$css （ ~EQ 96 `px$css ）あたりの機器~画素~数は 300 （~EQ 96 ~MUL 3.125 ）になることを意味する。 したがって、 画像~dataの ( 横幅, 縦幅 ) が ( 300, 600 ) ならば， その`密度~補正-済み生来な~size$は ( 96 `px$css, 192 `px$css ) になる。 ◎ For example, if the current pixel density is 3.125, that means that there are 300 device pixels per CSS inch, and thus if the image data is 300x600, it has density-corrected natural width and height of 96 CSS pixels by 192 CSS pixels.

各［ `img$e ／ `link$e ］要素には、 `~source集合$が結付けられる。 ◎ All img and link elements are associated with a source set.

`~source集合@ は、［ 0 個~以上の`画像~source$たちが成す有順序~集合 ］, および `~source~size$からなる： ◎ A source set is an ordered set of zero or more image sources and a source size.

  • 各 `画像~source@ は、 次に挙げるものからなる：

    • `~URL文字列@iS ⇒ 画像~資源の`~URL$を与える文字列。

      【 原文では単に`~URL$と記されているが（それは構造体である）、 実際には文字列なので，この訳では このように言い換える。 】

    • `記述子@iS ⇒ 次に挙げるいずれか — 初期~時は ε とする ⇒＃ ε（なし）／ `横幅~記述子$／ `画素~密度~記述子$

      【 語 “記述子” は、 簡便に総称するために，この訳に導入した用語である。 】

    ◎ An image source is a URL, and optionally either a pixel density descriptor, or a width descriptor.
  • `~source~size@ は， `source-size-value$t で与えられる。 その単位が`表示域$に相対的であるときは，［ `img$e 要素の`~node文書$の`表示域$ ］に相対的に解釈するモノトスル。 他の単位は、 `Media Queries^cite `MQ$r に従って解釈するモノトスル。 ◎ A source size is a <source-size-value>. When a source size has a unit relative to the viewport, it must be interpreted relative to the img element's node document's viewport. Other units must be interpreted the same as in Media Queries. [MQ]

この節における各~algoにおける `構文解析-~error@ は、 入力と要件との間の 致命的でない不一致を指示する。 ~UAには、 何らかの方法で`構文解析-~error$を公開することが奨励される。 ◎ A parse error for algorithms in this section indicates a non-fatal mismatch between input and requirements. User agents are encouraged to expose parse errors somehow.

画像が成功裡に~fetchされたかどうか （例：その応答~状態sは`~ok状態s$であったかどうか） は、［ 画像の型 ／ 画像は妥当であるかどうか ］を決定するときには，無視するモノトスル。 ◎ Whether the image is fetched successfully or not (e.g. whether the response status was an ok status) must be ignored when determining the image's type and whether it is a valid image.

注記： これにより，~serverは、 画像を~error応答で返して，それらを表示させれるようになる。 ◎ This allows servers to return images with error responses, and have them displayed.

~UAは、 画像の型を決定するときは， `画像を特定的に~sniffするための規則$を適用するべきである — その `公式的な型^i 【 `the official type^en — “名目上” のような意？】 には［ 画像に`結付けられた~Content-Type~header$ で与えられる型 %型 ］を与える下で。 これらの規則を適用しない場合、 画像の型は %型 になるモノトスル。 ◎ The user agent should apply the image sniffing rules to determine the type of the image, with the image's associated Content-Type headers giving the official type. If these rules are not applied, then the type of the image must be the type given by the image's associated Content-Type headers.

~UAは、 `img$e 要素においては： ◎ ↓

  • 画像でない資源は~supportしないモノトスル （例：~XML~fileのうち，`文書~要素$は~HTML要素になるもの）。 ◎ User agents must not support non-image resources with the img element (e.g. XML files whose document element is an HTML element).＼
  • 画像~資源~内に埋込まれた実行-可能~codeは走らせないモノトスル （例： ~script）。 ◎ User agents must not run executable code (e.g. scripts) embedded in the image resource.＼
  • 資源が複-~pageである場合は、 その最初の~pageのみ表示するモノトスル （例：~PDF~file）。 ◎ User agents must only display the first page of a multipage resource (e.g. a PDF file).＼
  • 資源が対話的に動作するのを許容しないモノトスル。 ◎ User agents must not allow the resource to act in an interactive fashion, but＼
  • 資源における~animationは、 尊守するべきである。 ◎ should honour any animation in the resource.

この仕様は、どの画像~型が~supportされるかは指定しない。 ◎ This specification does not specify which image types are to be supported.

4.8.4.3.1. 画像をいつ得するか

既定では、 画像は即時に得される。 ~UAは、 代わりに必要時に画像を得する~optionを利用者に供してもヨイ （例えば、帯域幅が拘束された利用者は，それを利用するかもしれない）。 ~UAは、 所与の `img$e 要素 %img の画像を： ◎ By default, images are obtained immediately. User agents may provide users with the option to instead obtain them on-demand. (The on-demand option might be used by bandwidth-constrained users, for example.) ◎ ↓

  • 即時に得するときは、 次に従うモノトスル ⇒ %img が作成されたとき, および %img が`関連な変異$を経た各回ごと に，同期的に %img の`画像~dataを更新する$ — 特に言明されていれば、 `~animationを開始し直す^i も与える下で。 ◎ When obtaining images immediately, the user agent must synchronously update the image data of the img element, with the restart animation flag set if so stated, whenever that element is created or has experienced relevant mutations.

  • 必要時に得するときは、 次に従うモノトスル： ◎ When obtaining images on demand, the user agent must ＼

    • ［ %img の`現在の要請$の`状態$ ~EQ `不可用$st ］場合に限り、 %img の画像~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.＼
    • %img が`関連な変異$を経た時点で，［ %img の`現在の要請$の`状態$ ~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を開始し直す^i を~~渡すモノトスル ◎ 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 の `referrerpolicy$a 属性の状態が変化した。 ◎ The element's referrerpolicy attribute's state is changed.
  • ［ `img$e ／ `source$e ］用の［ `~HTML要素~挿入-時の手続き$／`~HTML要素~除去-時の手続き$ ］（順不同）により，`関連な変異$が生じたものとされた。 ◎ The img or source HTML element insertion steps or HTML element removing steps count the mutation as a relevant mutation.

  • ~AND↓ が満たされている下で…：

    • %img の親は `picture$e 要素である
    • %img に先行する同胞に `source$e 要素 %source が在る

    %source の［ 次に挙げる属性のうち，いずれか ］が［ 設定-／変更-／除去- ］された ⇒＃ `srcset$aS, `sizes$aS, `media$aS, `type$aS, `width$a, `height$a

    ◎ The element's parent is a picture element and a source element that is a previous sibling has its srcset, sizes, media, type, width or height attributes set, changed, or removed.
  • %img 用の`受入-時の手続き$が走った。 ◎ The element's adopting steps are run.

  • %img は`自動-~sizeを許容して$いる下で、 次に挙げるいずれかが生じた： ◎ If the element allows auto-sizes:＼

    • %img が`具現化されて$いるか否かが変化した ◎ the element starts or stops being rendered,＼
    • %img の`具象-~obj~size$を成す横幅が変化した ◎ or its concrete object size width changes.＼

    この場合、 `画像~dataを更新する$ときには， `場合によっては~eventを省略し得る^i を渡すモノトスル。 ◎ This must set the maybe omit events flag for the update the image data algorithm.

4.8.4.3.3. 可用な画像の~list

各 `文書$は `可用な画像~list@ を持つモノトスル。 この~list内の~entryになる各 画像は： ◎ Each Document object must have a list of available images. Each image in this list is＼

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

    • ~modeは `~CORS設定群~属性$がとり得る状態と同じ~~範囲の値をとる。
    • 3 個目の成分は、［ ~mode ~EQ `~CORSなし$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は無視するか@ も伴われる。 ◎ 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を変更しないモノトスル。 ◎ but must not change the keys of entries copied in this way when doing so,＼
  • その`上層~cachingは無視するか$は ~F にするモノトスル。 ◎ and must unset the ignore higher-layer caching flag for the copied entry.＼

~UAは，いつでも、 `可用な画像~list$内から画像を除去してヨイ（例：~memoryを節約する）。 ただし，除去する~entryの［ `上層~cachingは無視するか$ ~EQ ~F ］の場合は、 当の資源~用の上層~cachingの意味論に適切になるよう除去するモノトスル （例： ~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は無視するか$ ~EQ ~F ］の場合、 ~UAは，それを`可用な画像~list$から除去することになるが、 画像~dataは別々に保っておいて，［ ~serverが 状態s~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形 ］に変換する処理nである。 この処理nは、 内容を呈示するときに孕まれる他の処理nよりも低速にもなり得ることに注意。 したがって~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 the decoding attribute are the following image decoding hint keywords:

~keyword 状態 記述
`sync@v `同期c@st この画像を，他の内容との不可分な呈示~用に同期的に`復号-$する選好を指示する。 ◎ Indicates a preference to decode this image synchronously for atomic presentation with other content.
`async@v `非同期c@st 他の内容の呈示が遅延されるのを避けるため、 この画像を［ 他の内容との不可分な呈示 ］用に非同期的に`復号-$する選好を指示する。 ◎ Indicates a preference to decode this image asynchronously to avoid delaying presentation of other content.
`auto@v `自動@st 復号~modeの選好は無いことを指示する（既定）。 ◎ Indicates no preference in decoding mode (the default).

~UAは，画像を`復号-$するときは、［ `decoding$a 属性の状態にて指示された選好 ］を尊重するべきである。 指示された状態が `自動$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に呈示する処理nからは独立に，`復号-$を遂行する ］ので， `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の更新-法

注記： この~algoは、 `並列的$に走っている手続きからは~callできない。 ~UAは、［ `並列的$に走っている手続きから，この~algoを~callする必要がある場合 ］には，それを行う`~taskを~queueする$必要がある。 【！https://github.com/whatwg/html/pull/3752】 ◎ This algorithm cannot be called from steps running in parallel. If a user agent needs to call this algorithm from steps running in parallel, it needs to queue a task to do so.

`img$e 要素 %img の `画像~dataを更新する@ ときは、 所与の ⇒＃ %~animationを開始し直すか ~IN { `~animationを開始し直す^i, ε }（ 省略時は ε ）, %場合によっては~eventを省略し得るか ~IN { `場合によっては~eventを省略し得る^i, ε }（ 省略時は ε ） ◎終 に対し，次の手続きを走らすモノトスル： ◎ When the user agent is to update the image data of an img element, optionally with the restart animations flag set, optionally with the maybe omit events flag set, it must run the following steps:

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

    1. この~algoを`並列的$に走らすよう継続する ◎ Continue running this algorithm in parallel.
    2. %img の`~node文書$が`全部的に作動中$になるまで待機する ◎ Wait until the element's node document is fully active.
    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. `小taskを~queueする$( この~algoの以降を継続する手続き ) 【したがって，ここで ~RET するであろう。】 ◎ 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 ~NULL ◎ set pending request to null,＼
    5. ~RET ◎ and return.
  3. %以前の~URL【！previous URL】 ~LET `現在の要請$の`現在の~URL$ ◎ Let previous URL be the current request's current URL.
  4. ( %選定された~source, %選定された画素~密度 ) ~LET ( ε, ε ) ◎ Let selected source be null and selected pixel density be undefined.
  5. ~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.
  6. %img の`最後に選定された~source$ ~SET %選定された~source ◎ Set the element's last selected source to selected source.

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

    1. %文書 ~LET %img の`~node文書$ ◎ ↓
    2. %~URL~record ~LET `~URLを符号化法の下で相対的に構文解析する$( %選定された~source, %文書 ) 【！#encoding-parsing-and-serializing-a-url】 ◎ Let urlString be the result of encoding-parsing-and-serializing a URL given selected source, relative to the element's node document.
    3. ~IF［ %~URL~record ~EQ `失敗^i ］ ⇒ ~BREAK `(A)^i ◎ If urlString is failure, then abort this inner set of steps.

    4. %~key ~LET 次に挙げる成分からなる~key：

      1. `~URLを直列化する$( %~URL~record )
      2. %img の `crossorigin$a 内容~属性の状態
      3. %~CORS属性~状態 ~NEQ `~CORSなし$st ならば %文書 の`生成元$doc ／ ~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は無視するか$ ~SET ~T ◎ 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 ~NULL ◎ 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. `画像を呈示~用に準備する$( %img ) ◎ Prepare current request for presentation given img.
      7. 【！ 現在の要請の】 %img の`現在の画素~密度$ ~SET %選定された~画素~密度 ◎ Set current request's current pixel density to selected pixel density.

      8. `要素~taskを~queueする$( `~DOM操作~task~source$, %img, 次の手続き ) ◎ Queue an element task on the DOM manipulation task source given the img element and＼

        手続きは： ◎ following steps:

        1. ~IF［ %~animationを開始し直すか ~NEQ ε ］ ⇒ `~animationを開始し直す$( %img ) ◎ If restart animation is set, then restart the animation.
        2. %img の`現在の要請$の`現在の~URL$ ~SET %~URL文字列 ◎ Set current request's current URL to urlString.
        3. ~IF［ %場合によっては~eventを省略し得るか ~EQ ε ］~OR［ %以前の~URL ~NEQ %~URL文字列 ］ ⇒ `~eventを発火する$( %img, `load$et ) ◎ If maybe omit events is not set or previousURL is not equal to urlString, then fire an event named load at the img element.
      9. ~RET ◎ Abort the update the image data algorithm.
  8. `小taskを~queueする$( この~algoの以降を遂行する手続き ) 【したがって，ここで ~RET するであろう。】 （この~algoを呼出した`~task$を継続できるようにするため） ◎ Queue a microtask to perform the rest of this algorithm, allowing the task that invoked this algorithm to continue.

  9. ~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.

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

  12. ~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,＼
    4. %img の`処理待ち要請$ ~SET ~NULL ◎ and set pending request to null.

    5. `要素~taskを~queueする$( `~DOM操作~task~source$, %img, 次の手続き ) ◎ Queue an element task on the DOM manipulation task source given the img element and＼

      手続きは： ◎ the following steps:

      1. %現~要請 の`現在の~URL$ ~SET 空~文字列 ◎ Change the current request's current URL to the empty string.

      2. ~IF［ ~AND↓ ］… ◎ If all of the following are true:

        • ［ %img は `src$a 属性を有する ］~OR［ %img は`~srcsetまたは~pictureを利用して$いる ］ ◎ the element has a src attribute or it uses srcset or picture; and
        • ［ %場合によっては~eventを省略し得るか ~EQ ε ］~OR［ %以前の~URL ~NEQ 空~文字列 ］ ◎ maybe omit events is not set or previousURL is not the empty string

        …ならば ⇒ `~eventを発火する$( %img, `error$et ) ◎ then fire an event named error at the img element.

    6. ~RET ◎ Return.
  13. %文書 ~LET %img の`~node文書$ ◎ ↓
  14. %~URL~record ~LET `~URLを符号化法の下で相対的に構文解析する$( %選定された~source, %文書 ) 【！#encoding-parsing-and-serializing-a-url】 ◎ Let urlString be the result of encoding-parsing-and-serializing a URL given selected source, relative to the element's node document.

  15. ~IF［ %~URL~record ~EQ `失敗^i ］： ◎ If urlString is failure, 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 ~NULL ◎ Set pending request to null.

    5. `要素~taskを~queueする$( `~DOM操作~task~source$, %img, 次の手続き ) ◎ Queue an element task on the DOM manipulation task source given the img element and＼

      手続きは： ◎ the following steps:

      1. %現~要請 の`現在の~URL$ ~SET %選定された~source ◎ Change the current request's current URL to selected source.
      2. ~IF［ %場合によっては~eventを省略し得るか ~EQ ε ］~OR［ %以前の~URL ~NEQ %選定された~source ］ ⇒ `~eventを発火する$( %img, `error$et ) ◎ 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.
    6. ~RET ◎ Return.
  16. %~URL文字列 ~LET `~URLを直列化する$( %~URL~record ) ◎ ↑↑
  17. %処理待ち要請 ~LET %img の`処理待ち要請$ ◎ ↓
  18. ~IF［ %処理待ち要請 ~NEQ ~NULL ］~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.

  19. ~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を開始し直すか ~NEQ ε ］ ⇒ `要素~taskを~queueする$( `~DOM操作~task~source$, %img, 次の手続き )

      手続きは ⇒ `~animationを開始し直す$( %img )
      ◎ queue an element task on the DOM manipulation task source given the img element to restart the animation if restart animation is set,＼
    3. ~RET ◎ and return.
  20. `画像~要請を中止する$( %処理待ち要請 ) ◎ Abort the image request for the pending request.
  21. %画像~要請 ~LET 新たな`画像~要請$ ◎ Set image request to a new image request＼
  22. %画像~要請 の`現在の~URL$ ~SET %~URL文字列 ◎ whose current URL is urlString.
  23. ~IF［ %現~要請 の`状態$ ~IN { `不可用$st, `壊en$st } ］ ⇒ %img の`現在の要請$ ~SET %画像~要請 ◎ If current request's state is unavailable or broken, then set the current request to image request.＼
  24. ~ELSE ⇒ %img の`処理待ち要請$ ~SET %画像~要請 ◎ Otherwise, set the pending request to image request.
  25. %要請 ~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.
  26. %要請 の`~client$rq ~SET %文書 に`関連な設定群~obj$ ◎ Set request's client to the element's node document's relevant settings object.
  27. ~IF［ %img は`~srcsetまたは~pictureを利用して$いる ］ ⇒ %要請 の`起動元$rq ~SET `imageset^l ◎ If the element uses srcset or picture, set request's initiator to "imageset".
  28. %要請 の ⇒＃ `~referrer施策$rq ~SET %img の `referrerpolicy$a 属性の現在の状態, `優先度$rq ~SET %img の `fetchpriority$a 属性の現在の状態 ◎ Set request's referrer policy to the current state of the element's referrerpolicy attribute. ◎ Set request's priority to the current state of the element's fetchpriority attribute.
  29. %~load~eventを遅延するか ~LET ~IS［ %img の`~lazy読込ng属性$の状態 ~EQ `Eager$st ］~OR［ %img 用の`~scriptingは不能化されて$いる ］ ◎ Let delay load event be true if the img's lazy loading attribute is in the Eager state, or if scripting is disabled for the img, and false otherwise.

  30. ~IF［ `~lazyに読込むことになる$( %img ) ~EQ ~T ］： ◎ If the will lazy load element steps given the img return true, then:

    1. %img の`~lazy読込n再開~手続き$ ~SET この~algoの `画像を~fetchする^i 段~以降を走らす手続き ◎ Set the img's lazy load resumption steps to the rest of this algorithm starting with the step labeled fetch the image.
    2. `~lazyに読込んでいる要素の交差~観測を開始する$( %img ) ◎ Start intersection-observing a lazy loading element for the img element.
    3. ~RET ◎ Return.

  31. `画像を~fetchする^i： ◎ Fetch the image:＼

    1. %要請 を`~fetch$する ◎ Fetch request.＼
    2. ~RET — ただし，以降の手続きは、［ ~fetchした結果の`応答$ %応答 に対する`応答の処理n$i ］の一部として走らす ◎ Return from this algorithm, and run the remaining steps as part of the fetch's processResponse for the response response.
    • このようにして得した資源があれば、 それが %画像~要請 の`画像~data$になる。 それは、 `~CORS同一-生成元$にも`~CORS非同一-生成元$にもなり得る — どちらになるかに応じて，当の画像と他の~APIとのヤリトリに影響する （例： `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 image's interaction with other APIs (e.g., when used on a canvas).

    • ［ %~load~eventを遅延するか ~EQ ~T ］のときは ⇒ 画像の~fetchingは、 資源が~fetchされ，`~network用~task~source$から`~queueされ$た`~task$が走るまで （`下に定義される＠#img-load$）， %文書 の`~load~eventを遅延する$モノトスル ◎ When delay load event is true, 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は，そのような攻撃を遂げるために必要yでないが）。 ~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.

  32. 【~fetchingによる~dataが得られるに伴い，】 アリな限り早く、［ 以下に挙げる各項のうち，最初に適用-可能なもの ］に対応する段を走らす： ◎ As soon as possible, jump to the first applicable entry from the following list:

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

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

    最初の【！the next】`画像~fetch~task$は、 次の手続きを走らすモノトスル： ◎ 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 が満たされない場合の挙動が記されておらず、 満たされない場合，処理待ち要請が現在の要請に昇格する機会cが来なくなってしまうので。 】

      ◎ 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.

    【 %img の`現在の要請$用の】 各`画像~fetch~task$は，画像の呈示を更新するモノトスルが、 新たな本体部位が来る度に，~UAは次に従うモノトスル： ◎ 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,＼

    • ~IF［ ~UAは画像の寸法を決定できた ］：

      1. `画像を呈示~用に準備する$( %img )
      2. 以前の画像を置換する
      ◎ if the user agent is able to determine the image's width and height, it must prepare the img element's current request for presentation given the img element and replace the previous image.＼

    • ある本体部位が完全に復号された時点で，次の手続きを遂行する： ◎ Once one body part has been completely decoded, perform the following steps:

      1. %img の`現在の要請$の`状態$ ~SET `完全に可用$st ◎ Set the img element's current request's state to completely available.

      2. ~IF［ %場合によっては~eventを省略し得るか ~EQ ε ］~OR［ %以前の~URL ~NEQ %~URL文字列 ］ ⇒ `要素~taskを~queueする$( `~DOM操作~task~source$, %img, 次の手続き )

        手続きは ⇒ `~eventを発火する$( %img, `load$et )
        ◎ 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.
    資源の~MIME型と~dataは、 `下に述べるとおり＠#img-determine-type$，~supportする画像~形式に対応する： ◎ If the resource type and data corresponds to a supported image format, as described below

    最初の【！the next】`画像~fetch~task$は、 次の手続きを走らすモノトスル： ◎ 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, prepare image request for presentation given the img element 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
        4. `~eventを発火する$( %img, `error$et )
      3. ~ELIF［ %場合によっては~eventを省略し得るか ~EQ ε ］~OR［ %以前の~URL ~NEQ %~URL文字列 ］ ⇒ `~eventを発火する$( %img, `error$et )
      ◎ 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. ◎ 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. • If maybe omit events is not set or previousURL is not equal to urlString, then fire an event named error at the img element.

    各`画像~fetch~task$（最初のそれも含む）は、 次の手続きを走らすモノトスル：

    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$は， 次の手続きを走らすモノトスル： ◎ 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 ) ◎ prepare image request for presentation given the img element.
    2. %画像~要請 の`状態$ ~SET `完全に可用$st ◎ Set image request to the completely available state.
    3. %文書 の`可用な画像~list$に，画像を追加する — この画像は ⇒ ~key %~key で識別され, `上層~cachingは無視するか$は ~T にするとする ◎ Add the image to the list of available images using the key key, with the ignore higher-layer caching flag set.
    4. ~IF［ %場合によっては~eventを省略し得るか ~EQ ε ］~OR［ %以前の~URL ~NEQ %~URL文字列 ］ ⇒ `~eventを発火する$( %img, `load$et ) ◎ If maybe omit events is not set or previousURL is not equal to urlString, then fire an event named load at the img element.
    その他（ 画像~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. ~IF［ %場合によっては~eventを省略し得るか ~EQ ε ］~OR［ %以前の~URL ~NEQ %~URL文字列 ］ ⇒ `要素~taskを~queueする$( `~DOM操作~task~source$, %img, 次の手続き )

      手続きは ⇒ `~eventを発火する$( %img, `error$et )
      ◎ 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.

~UAが，ある要素 %img に対し上の~algoを走らせている間は、 %img は`接続されて$いなくとも， %img の`~node文書$から %img への強い参照があるモノトスル。 ◎ 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.

`画像~要請を中止する@ ときは、 所与の ( ［ `画像~要請$／~NULL ］ %画像~要請 ) に対し，次の手続きを走らす： ◎ To abort the image request for an image request or null image request means to run the following steps:

  1. ~IF［ %画像~要請 ~EQ ~NULL ］ ⇒ ~RET ◎ If image request is null, then return.
  2. %画像~要請 の`画像~data$ ~SET ε ◎ Forget image request's image data, if any.
  3. %画像~要請 による`~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. ~Assert： %img の`処理待ち要請$ ~NEQ ~NULL
  2. %img の`現在の要請$ ~SET %img の`処理待ち要請$ ◎ Let the img element's current request be the pending request.
  3. %img の`処理待ち要請$ ~SET ~NULL ◎ Let the img element's pending request be null.

【 最初の段は、 この訳による補完 （`現在の要請$は ~NULL をとり得ない）。 】

4.8.4.3.6. 画像を呈示~用に準備する

`画像を呈示~用に準備する@ ときは、 所与の ( 画像~要素 %img ) に対し： ◎ To prepare an image for presentation for an image request req given image element img:

  1. %要請 ~LET %img の`現在の要請$

    【 この段は、 この訳による追加 — 原文の~algoは，`画像~要請$も引数にとっているが、 実際に この~algoが適用される`画像~要請$は， %img の`現在の要請$に限られる。 】

  2. %~EXIF~tag~map ~LET %要請 の`画像~data$から — 関連な~codecにより定義されるとおりに — 得される~EXIF~tag群 `EXIF$r ◎ Let exifTagMap be the EXIF tags obtained from req's image data, as defined by the relevant codec. [EXIF]
  3. ( %物理-横幅, %物理-縦幅 ) ~LET %要請 の`画像~data$から — 関連な~codecにより定義されるとおりに — 得される ( 横幅, 縦幅 ) ◎ Let physicalWidth and physicalHeight be the width and height obtained from req's image data, as defined by the relevant codec.
  4. %寸法~X ~LET %~EXIF~tag~map の~tag `0xA002^c （ `PixelXDimension^i ）の値 ◎ Let dimX be the value of exifTagMap's tag 0xA002 (PixelXDimension).
  5. %寸法~Y ~LET %~EXIF~tag~map の~tag `0xA003^c （ `PixelYDimension^i ）の値 ◎ Let dimY be the value of exifTagMap's tag 0xA003 (PixelYDimension).
  6. %解像度~X ~LET %~EXIF~tag~map の~tag `0x011A^c （ `XResolution^i ）の値 ◎ Let resX be the value of exifTagMap's tag 0x011A (XResolution).
  7. %解像度~Y ~LET %~EXIF~tag~map の~tag `0x011B^c （ `YResolution^i ）の値 ◎ Let resY be the value of exifTagMap's tag 0x011B (YResolution).
  8. %解像度~単位 ~LET %~EXIF~tag~map の~tag `0x0128^c （ `ResolutionUnit^i ）の値 ◎ Let resUnit be the value of exifTagMap's tag 0x0128 (ResolutionUnit).

  9. ~IF［ ~NOT ~AND↓ ］…

    • %寸法~X は整数である
    • %寸法~Y は整数である
    • %寸法~X ~GT 0
    • %寸法~Y ~GT 0
    • %解像度~X は浮動小数点数である
    • %解像度~Y は浮動小数点数である
    • %解像度~X ~GT 0
    • %解像度~Y ~GT 0
    • %解像度~単位 ~EQ 2 （ `Inch^i ）
    • %物理-横幅 ~MUL 72 ~DIV %解像度~X ~EQ %寸法~X 【浮動小数点数の丸め誤差は、この比較に どう織り込まれる？】
    • %物理-縦幅 ~MUL 72 ~DIV %解像度~Y ~EQ %寸法~Y

    …ならば ⇒ ~RET

    ◎ If either dimX or dimY is not a positive integer, then return. ◎ If either resX or resY is not a positive floating-point number, then return. ◎ If resUnit is not equal to 2 (Inch), then return. ◎ Let widthFromDensity be the value of physicalWidth, multiplied by 72 and divided by resX. ◎ Let heightFromDensity be the value of physicalHeight, multiplied by 72 and divided by resY. ◎ If widthFromDensity is not equal to dimX or heightFromDensity is not equal to dimY, then return.

  10. ~IF［ %要請 の`画像~data$は`~CORS非同一-生成元$である ］：

    1. %img の ( `生来な横幅$, `生来な縦幅$ ) ~SET ( %寸法~X, %寸法~Y )
    2. 前~段の設定に則って， %img の画素~dataを拡縮する
    3. ~RET
    ◎ If req's image data is CORS-cross-origin, then set img's natural dimensions to dimX and dimY, scale img's pixel data accordingly, and return.
  11. %要請 の`選好される密度~補正-済み寸法$ ~SET ( %寸法~X, %寸法~Y ) ◎ Set req's preferred density-corrected dimensions to a struct with its width set to dimX and its height set to dimY.
  12. %img の呈示を適切に更新する ◎ Update req's img element's presentation appropriately.

注記： ~EXIF内の解像度は，~CSS `pt$css 【！points per inch】に等価なので、 72 が解像度から~sizeを算出するための基底になる。 ◎ Resolution in EXIF is equivalent to CSS points per inch, therefore 72 is the base for computing size from resolution.

画像がすでに呈示された後に~EXIFが到着する事例でどうなるかは、 まだ指定されていない。 `~CSS課題 #4929＠~CSSissue/4929$を見よ。 ◎ It is not yet specified what would be the case if EXIF arrives after the image is already presented. See issue #4929.

4.8.4.3.7. 画像~sourceの選定-法

`画像~sourceを選定する@ ときは、 所与の ( `img$e 要素 %要素 ) に対し： ◎ To select an image source given an img element el:

  1. `~source集合を更新する$( %要素 )

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

    ◎ Update the source set for el.
  2. ~IF［ %要素 の`~source集合$は空である ］ ⇒ ~RET ( ε, ε ) ◎ If el's source set is empty, return null as the URL and undefined as the pixel density.
  3. ~RET `~source集合から画像~sourceを選定する$( %要素 の`~source集合$ ) ◎ Return the result of selecting an image from el's source set.

`~source集合から画像~sourceを選定する@ ときは、 所与の ( `~source集合$ %~source集合 ) に対し， ( ~URLを与える文字列, `密度~値$ ) からなる~tupleを返す： ◎ To select an image source from a source set given a source set sourceSet:

  1. %~source群 ~LET 空な集合 ◎ ↓
  2. %~source集合 を成す ~EACH( ~entry %b ) に対し，順に ⇒ ~IF［ %b の`記述子$iSの`密度~値$は %~source群 を成す どの~entryのそれとも異なる ］ ⇒ %b を %~source群 に追加する ◎ If an entry b in sourceSet has the same associated pixel density descriptor as an earlier entry a in sourceSet, then remove entry b. Repeat this step until none of the entries in sourceSet have the same associated pixel density descriptor as an earlier entry.
  3. %選定された~source ~LET `実装定義$な方式で %~source群 から 1 個の `画像~source$を選んだ結果 ◎ In an implementation-defined manner, choose one image source from sourceSet. Let this be selectedSource.
  4. ~RET ( %選定された~source の`~URL文字列$iS, %選定された~source の`記述子$iSの`密度~値$ ) ◎ Return selectedSource and its associated pixel density.
4.8.4.3.8. 属性~群からの~source集合の作成-法

`~source集合を作成する@ ときは、 所与の ( 文字列 %既定の~source, 文字列 %~srcset, 文字列 %~sizes, ［ 要素／~NULL ］ %img ) に対し： ◎ When asked to create a source set given a string default source, a string srcset, a string sizes, and an element or null img:

  1. %~source集合 ~LET `~srcset属性を構文解析する$( %~srcset ) ◎ Let source set be an empty source set. ◎ If srcset is not an empty string, then set source set to the result of parsing srcset.
  2. %~source集合 の【！】`~source~size$ ~LET `~sizes属性を構文解析する$( %~sizes, %img ) ◎ Let source size be the result of parsing sizes with img.
  3. ~IF［ %既定の~source ~NEQ 空~文字列 ］~AND［ %~source集合 を成す どの`画像~source$も，その`記述子$iSは ε または［ `画素~密度~記述子$であって，その`密度~値$ ~NEQ 1 ］を満たす ］ ⇒ %~source集合 に %既定の~source を付加する ◎ If default source 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 default source to source set.
  4. `~source密度を正規化する$( %~source集合 ) ◎ Normalize the source densities of source set.
  5. ~RET %~source集合 ◎ Return source set.
4.8.4.3.9. ~source集合の更新-法

`~source集合を更新する@ ときは、 所与の ( %要素 ) に対し，次を走らすモノトスル： ◎ When asked to update the source set for a given img or link element el, user agents must do the following:

  1. ~Assert： %要素 は［ `img$e ／ `link$e ］要素である ◎ ↑
  2. %要素~群 ~LET « » ◎ ↓↓Set el's source set to an empty source set. ◎ Let elements be « el ». ↓↓
  3. %img ~LET ~NULL ◎ ↓

  4. ~IF［ %要素 は `img$e 要素である ］：

    1. ~IF［ %要素 の親は `picture$e 要素である ］ ⇒ %要素~群 ~SET %要素 に先行する同胞である `source$e 要素たちが成す同順の~list

      【 この訳では、 この段で %要素~群 をこれらの `source^e 要素に絞り込んでおくことにより， 原文の~algoを少し簡潔に組み替えている。 】

    2. %img ~SET %要素
    ◎ If el is an img element whose parent node is a picture element, then replace the contents of elements with el's parent node's child elements, retaining relative order. ◎ Let img be el if el is an img element, otherwise null.
  5. %要素~群 に %要素 を付加する ◎ ↑↑

  6. %要素~群 を成す ~EACH( %子 ) に対し： ◎ For each child in elements:

    1. ~IF［ %子 ~EQ %要素 ］： ◎ If child is el:

      1. %既定の~source ~LET 空~文字列 ◎ Let default source be the empty string.
      2. %~srcset ~LET 空~文字列 ◎ Let srcset be the empty string.
      3. %~sizes ~LET 空~文字列 ◎ Let sizes be the empty string.

      4. ~IF［ %要素 は `img$e 要素である ］：

        1. ~IF［ %要素 は `srcset$a 属性を有する ］ ⇒ %~srcset ~SET その属性の値
        2. ~IF［ %要素 は `sizes$a 属性を有する ］ ⇒ %~sizes ~SET その属性の値
        3. ~IF［ %要素 は `src$a 属性を有する ］ ⇒ %既定の~source ~SET その属性の値
        ◎ ↓

      5. ~ELSE（ %要素 は `link$e 要素である）：

        1. ~IF［ %要素 は `imagesrcset$aL 属性を有する ］ ⇒ %~srcset ~SET その属性の値
        2. ~IF［ %要素 は `imagesizes$aL 属性を有する ］ ⇒ %~sizes ~SET その属性の値
        3. ~IF［ %要素 は `href$aL 属性を有する ］ ⇒ %既定の~source ~SET その属性の値
        ◎ ↑ If el is an img element that has a srcset attribute, then set srcset to that attribute's value. ◎ Otherwise, if el is a link element that has an imagesrcset attribute, then set srcset to that attribute's value. ◎ ↑ If el is an img element that has a sizes attribute, then set sizes to that attribute's value. ◎ Otherwise, if el is a link element that has an imagesizes attribute, then set sizes to that attribute's value. ◎ ↑ If el is an img element that has a src attribute, then set default source to that attribute's value. ◎ Otherwise, if el is a link element that has an href attribute, then set default source to that attribute's value.
      6. %要素 の`~source集合$ ~SET `~source集合を作成する$( %既定の~source, %~srcset, %~sizes, %img ) ◎ Let el's source set be the result of creating a source set given default source, srcset, and sizes, and img.
      7. ~RET ◎ Return.

      注記： %要素 が `link^e 要素であるならば、 即時に この段に達して~~反復を終えることになる。 ◎ If el is a link element, then elements contains only el, so this step will be reached immediately and the rest of the algorithm will not run.

    2. ~Assert： %子 は `source$e 要素である ◎ If child is not a source element, then continue.
    3. ~IF［ %子 は `srcset$aS 属性を有さない ］ ⇒ ~CONTINUE ◎ If child does not have a srcset attribute, continue to the next child.
    4. %~source集合 ~LET `~srcset属性を構文解析する$( %子 の`srcset$aS 属性の値 ) ◎ Parse child's srcset attribute and let the returned source set be source set.

    5. ~IF［ ~OR↓ ］…

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

      …ならば ⇒ ~CONTINUE

      ◎ 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 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.
    6. %要素 の`寸法~属性~source$ ~SET ［ 次が満たされるならば %子 ／ ~ELSE_ %要素 ］ ⇒ %子 は［ `width$a, `height$a ］いずれかの属性を有する ◎ If child has width or height attributes, set el's dimension attribute source to child. Otherwise, set el's dimension attribute source to el.
    7. %~sizes ~LET ［ %子 は`~sizes属性$を有するならば その値 ／ ~ELSE_ 空~文字列 ］ ◎ ↑↑
    8. %~source集合 の`~source~size$ ~LET `~sizes属性を構文解析する$( %~sizes, %img ) ◎ ↑↑
    9. `~source密度を正規化する$( %~source集合 ) ◎ Normalize the source densities of source set.
    10. %要素 の`~source集合$ ~SET %~source集合 ◎ Let el's source set be source set.
    11. ~RET ◎ 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.10. ~srcset属性の構文解析-法

`~srcset属性を構文解析する@ ときは、 所与の ( 文字列 %入力 ) に対し，次を走らす： ◎ When asked to parse a srcset attribute from an element, parse the value of the element's srcset attribute as follows: • Let input be the value passed to this algorithm.

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

  3. ~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. %記述子~list ~LET %入力 内の %位置 から記述子を~token化する†
      2. %記述子 ~SET 記述子~群を構文解析する( %記述子~list )†
      3. ~IF［ %記述子 ~EQ `~error^i ］ ⇒ ~CONTINUE

      【† これらの手続きは、 以下に定義される。 この訳では、 原文の~algoを，これらの手続きに分割して記述している。 】

      ◎ Otherwise: ◎ ↓↓

    8. %画像~source ~LET 新たな`画像~source$ — その ⇒＃ `~URL文字列$iS ~SET %~URL, `記述子$iS ~SET %記述子 ◎ ↓↓

    9. %候補~list に %画像~source を付加する ◎ ↓↓

%入力 内の %位置 から記述子を~token化するときは、 次を走らす （これは、~call元の`位置~変数$も更新する）： ◎ Descriptor tokenizer:＼

  1. %記述子~list ~LET 新たな空な~list

  2. ~WHILE 無条件：

    1. %入力 内の %位置 から`~ASCII空白を読飛ばす$
    2. %記述子~token ~LET 空~文字列
    3. %記述子~token に次の結果を付加する ⇒ %入力 内の %位置 から，次に挙げるもの以外の`符号位置~並びを収集する$ ⇒＃ `~ASCII空白$, `002C^U `,^smb, `0028^U `(^smb

    4. ~IF［ %位置↗ ~EQ `0028^U `(^smb ］：

      1. %記述子~token に次の結果を付加する ⇒ %入力 内の %位置 から， `0029^U `)^smb 以外の`符号位置~並びを収集する$
      2. ~IF［ %位置↗ ~EQ `0029^U `)^smb ］ ⇒＃ %記述子~token に %位置↗ を付加する； %位置 ~INCBY 1
    5. ~IF［ %記述子~token ~NEQ 空~文字列 ］ ⇒ %記述子~list に %記述子~token を付加する
    6. ~IF［ %位置↗ は`~ASCII空白$でない ］ ⇒ ~BREAK
  3. ~RET %記述子~list
◎ Skip ASCII whitespace within input given position. ◎ ↑↓ ◎ Let current descriptor be the empty string. ◎ Let state be in descriptor. ◎ Let c be the character at position. Do the following depending on the value of state. For the purpose of this step, "EOF" is a special character representing that position is past the end of input. ◎ In descriptor • Do the following, depending on the value of c: •• ASCII whitespace ••• If current descriptor is not empty, append current descriptor to descriptors and let current descriptor be the empty string. Set state to after descriptor. •• U+002C COMMA (,) ••• Advance position to the next character in input. If current descriptor is not empty, append current descriptor to descriptors. Jump to the step labeled descriptor parser. •• U+0028 LEFT PARENTHESIS (() ••• Append c to current descriptor. Set state to in parens. •• EOF ••• If current descriptor is not empty, append current descriptor to descriptors. Jump to the step labeled descriptor parser. •• Anything else ••• Append c to current descriptor. ◎ In parens • Do the following, depending on the value of c: •• U+0029 RIGHT PARENTHESIS ()) ••• Append c to current descriptor. Set state to in descriptor. •• EOF ••• Append current descriptor to descriptors. Jump to the step labeled descriptor parser. •• Anything else ••• Append c to current descriptor. ◎ After descriptor • Do the following, depending on the value of c: •• ASCII whitespace ••• Stay in this state. •• EOF ••• Jump to the step labeled descriptor parser. •• Anything else ••• Set state to in descriptor. Set position to the previous character in input. ◎ Advance position to the next character in input. Repeat this step.

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

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

記述子~群を構文解析するときは、 記述子 構文解析器は、 所与の ( %記述子~list ) に対し，次を走らす： ◎ Descriptor parser:＼

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

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

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

    ◎ 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 0, 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 0, let error be yes.＼

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

        注記： ［ %密度 ~EQ 0 ］の場合、［ `生来な横幅$ ／ `生来な縦幅$ ］は無限になる。 ~UAには、 画像が描画され得る大きさを`制限することが期待される＠~INFRA#algorithm-limits$。 ◎ If density is 0, the natural dimensions will be infinite. User agents are expected to have limits in how big images can be rendered.

    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 0, 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.11. ~sizes属性の構文解析-法

`~sizes属性を構文解析する@ ときは、 所与の ( 文字列 %入力, ［ `img$e 要素／~NULL ］ %img ) に対し： ◎ When asked to parse a sizes attribute from an element element, with an img element or null img:

  1. %未解析~sizes~list ~LET `~commaで分離された成分~値~listとして構文解析する$( %入力 ) `CSSSYNTAX$r ◎ 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). [CSSSYNTAX]
  2. %~size ~LET ~NULL ◎ Let size be null.

  3. %未解析~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, then that is a parse error; continue.
    3. %~size ~SET %未解析~size を成す最後の`成分~値$ ◎ If the last component value in unparsed size＼ ↓ is a valid non-negative <source-size-value>,＼ then set size to its value and＼
    4. %未解析~size から最後の`成分~値$を除去する ◎ remove the component value from unparsed size.＼

    5. ~IF［ %~size は ~OR↓ を満たす ］…

      • `source-size-value$t に合致しない
      • `~math関数$以外の`~CSS関数$を含んでいる
      • 負な数を表す

      …ならば ⇒＃ `構文解析-~error$； ~CONTINUE

      ◎ Any CSS function other than the math functions is invalid.＼ Otherwise, there is a parse error; continue.

    6. ~IF［ ~AND↓ ］…

      • %~size ~EQ `~auto0$v
      • %img ~NEQ ~NULL
      • %img は`具現化されて$いる
      • %img は`自動-~sizeを許容して$いる

      …ならば ⇒ %~size ~SET %img の`具象-~obj~size$を成す横幅を成す `px$css 数

      ◎ If size is auto, and img is not null, and img is being rendered, and img allows auto-sizes, then set size to the concrete object size width of img, in CSS pixels.

      注記： 依然として %~size ~EQ `~auto0$v の場合、 %~size は無視されることになる。 ◎ If size is still auto, then it will be ignored.

    7. %未解析~size の終端から連続する `whitespace-token$t すべてを除去する ◎ Remove all consecutive <whitespace-token>s from the end of unparsed size.＼

    8. ~IF［ %未解析~size は空である ］： ◎ If unparsed size is now empty:

      1. ~IF［ %未解析~size は %未解析~sizes~list を成す最後の~itemでない ］ ⇒ `構文解析-~error$ ◎ If this was not the last item in unparsed sizes list, that is a parse error.
      2. ~IF［ %~size ~NEQ `~auto0$v ］ ⇒ ~RET %~size ◎ If size is not auto, then return size.＼
      3. ~CONTINUE ◎ Otherwise, continue.

    9. ~IF［ %未解析~size は ~OR↓ を満たす `MQ$r ］…

      • `media-condition$t に合致しない
      • `media-condition$t として`評価した結果＠~MQ5#evaluating$は偽になる

      …ならば ⇒ ~CONTINUE

      ◎ 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. [MQ]
    10. ~IF［ %~size ~NEQ `~auto0$v ］ ⇒ ~RET %~size ◎ If size is not auto, then return size.＼
    11. ~CONTINUE ◎ Otherwise, continue.
  4. ~RET `100vw^v 【すなわち，表示域の横幅】 ◎ Return 100vw.

注記： `source-size-list$t 内の最後の~entry以外の~entry — すなわち `source-size$t — として［ `media-condition$t を伴わない `length$t のみ ］を利用することは妥当でない。 しかしながら，この構文解析-~algoは、 そのようなものを `source-size-list$t 内のどこでも許容する — 最初に現れ次第，即時に~sizeとして受容することになる。 これは、［ 将来の拡張を可能化するため ］および［ 単純な作者~error（末尾の~commaなど）に抗して保護するため ］である。 `source-size$t 用の~keyword `~auto0$v は、 旧来の~UA用に［ それに後続する~entryによる~fallback ］を供するためとして，許容される。 ◎ It is invalid to use a bare <source-size-value> that is a <length> (without an accompanying <media-condition>) 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. A bare auto keyword is allowed to have other entries following it to provide a fallback for legacy user agents.

4.8.4.3.12. ~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の`横幅~値$ ~DIV `~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 0, then the density would be infinity, which results in the natural dimensions being 0 by 0. • Otherwise, give the image source a pixel density descriptor of 1x.
4.8.4.3.13. 環境~変化に対する反応-法

~UAはいつでも、 `環境における変化に反応する@ ため， 次の~algoを走らせて`img$e 要素 %img の画像を更新してヨイ。 （~UAには、 この~algoを常時~走らすことは`要求されない^em — 例えば［ 利用者が当の~pageを見ていなくて，その間に環境が何度か変化する事例 ］においては、 ~UAは［ 利用者が~pageに戻って来るまで，どの画像を利用するか決定するのを待機したい ］と求めるかもしれない。） ◎ 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したときや，~page~zoomを変更したとき） ／ `img$e 要素が`文書の中へ挿入された$とき ］には — この~algoを走らせて，［ `密度~補正-済み生来な~size$が新たな`表示域$に合致する ］かつ［ `~art-direction$が孕まれるときは、 正しい画像が選ばれる ］ようにすることが奨励される。 ◎ 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 natural 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［ %文書 は`全部的に作動中$でない ］~OR［ %img の画像~dataの資源~型 ~EQ `multipart/x-mixed-replace$mt ］~OR［ %img の`処理待ち要請$ ~NEQ ~NULL ］ ⇒ ~RET ◎ ⌛ If the img element does not use srcset or picture, its node document is not fully active, has image data whose resource type is multipart/x-mixed-replace, or the pending request is not null, then return.
    3. ( %選定された~source, %選定された画素~密度 ) ~LET `画像~sourceを選定する$( %img ) ◎ ⌛ 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 ~LET `~URLを符号化法の下で相対的に構文解析する$( %選定された~source, %文書 ) 【！#encoding-parsing-and-serializing-a-url】 ◎ ⌛ Let urlString be the result of encoding-parsing-and-serializing a URL given selected source, relative to the element's node document.
    7. ~IF［ %~URL~record ~EQ `失敗^i ］ ⇒ ~RET ◎ ⌛ If urlString is failure, then return.
    8. %~URL文字列 ~LET `~URLを直列化する$( %~URL~record ) ◎ ↑↑
    9. %~CORS属性~状態 ~LET %img の `crossorigin$a 内容~属性の状態 ◎ ⌛ Let corsAttributeState be the state of the element's crossorigin content attribute.
    10. %生成元 ~LET ［ %~CORS属性~状態 ~EQ `~CORSなし$st ならば ε ／ ~ELSE_ %文書 の`生成元$doc ］ ◎ ↓ ◎ ⌛ Let origin be the img element's node document's origin.
    11. %~client ~LET %文書 に`関連な設定群~obj$ ◎ ⌛ Let client be the img element's node document's relevant settings object.
    12. %~key ~LET ( %~URL文字列, %~CORS属性~状態, %生成元 ) からなる~tuple ◎ ⌛ Let key be a tuple consisting of urlString, corsAttributeState, and, if corsAttributeState is not No CORS, origin.
    13. %画像~要請 ~LET 新たな`画像~要請$ ◎ ⌛ Let image request be a new image request＼
    14. %画像~要請 の`現在の~URL$ ~SET %~URL文字列 ◎ whose current URL is urlString
    15. %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$rq ~SET ~T, `~referrer施策$rq ~SET %img の `referrerpolicy$a 属性の現在の状態, `優先度$rq ~SET %img の `fetchpriority$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. ◎ Set request's priority to the current state of the element's fetchpriority attribute.
    3. %応答 ~LET %要請 を用いて`~fetch$した結果 ◎ Let response be the result of fetching request.

    4. ~IF［ ~OR↓ ］… ◎ ↓

      • %応答 の`安全でない応答$は`~network~error$である ◎ If response's unsafe response is a network error or＼
      • `画像を特定的に~sniffするための規則$を`適用して決定される＠#img-determine-type$画像の形式は未~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,＼

      …ならば ⇒＃ %img の`処理待ち要請$ ~SET ~NULL； ~RET ◎ then let pending request be null and abort these steps.

    5. ~ELSE（ %応答 の`安全でない応答$は %画像~要請 の`画像~data$を表現する） ⇒ %応答 は`~CORS同一-生成元$にも`~CORS非同一-生成元$にもなり得る — どちらになるかに応じて，当の画像と他の~APIとのヤリトリに影響する（例： `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 image's interaction with other APIs (e.g., when used on a canvas).

  4. `要素~taskを~queueする$( `~DOM操作~task~source$, %img, 次の手続き ) ◎ Queue an element task on the DOM manipulation task source given the img element and＼

    手続きは： ◎ the following steps:

    1. ~IF［ %img はこの~algoを開始した時点から`関連な変異$を経た ］ ⇒＃ %img の`処理待ち要請$ ~LET ~NULL； ~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は無視するか$は ~T にするとする ◎ 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 ) ◎ Prepare image request for presentation given the img element.
    7. `~eventを発火する$( %img, `load$et ) ◎ Fire an event named load at the img element.
4.8.4.4. 画像~用の代替として動作する~textを供するときの要件

【 この節の内容は、 `別~page＠~HEimageAlt$にて。 】

4.8.12. `map^e 要素

`分類$
`~flow内容$／`句ng内容$／`可触~内容$ ◎ Flow content. ◎ Phrasing content. ◎ Palpable content.
`この要素を利用できる文脈$
`句ng内容$が期待される所。 ◎ Where phrasing content is expected.
`内容~model$
`透過的$ ◎ Transparent.
`text/html における~tag省略$
両~tagとも省略不可。 ◎ Neither tag is omissible.
`内容~属性$
`大域~属性$ ◎ Global attributes
`name$a — `usemap$a 属性から`参照-$するための， `画像~map$の名前 ◎ name — Name of image map to reference from the usemap attribute
`~accessibilityの考慮点$
`map$AA ◎ For authors. For implementers.
`~DOM~interface$
[Exposed=Window]
interface `HTMLMapElement@I : `HTMLElement$I {
  [`HTMLConstructor$] constructor();

  [`CEReactions$] attribute DOMString `name$m;
  [SameObject] readonly attribute `HTMLCollection$I `areas$m;
};

`map$e 要素は、 `img$e 要素, および 子孫の `area$e 要素との併用で，`画像~map$を定義する。 この要素は、 その子たちを`表現-$する。 ◎ The map element, in conjunction with an img element and any area element descendants, defines an image map. The element represents its children.

`name@a 属性は、 この~mapに名前を与えて，他から`参照-$できるようにする。 `map$e 要素は、 この属性を有していなければナラナイ。 この属性には、［ `~ASCII空白$を含む文字列／空~文字列 ］を指定してはナラナイ。 また、［ 同じ`~tree$内の別の `map$e 要素の `name$a 属性の値 ］と等しくなってはナラナイ。 `id$a 属性も指定された場合、 両~属性とも同じ値にしなければナラナイ。 ◎ The name attribute gives the map a name so that it can be referenced. The attribute must be present and must have a non-empty value with no ASCII whitespace. The value of the name attribute must not be equal to the value of the name attribute of another map element in the same tree. If the id attribute is also specified, both attributes must have the same value.

%map.`areas$m
この `map$e 内の `area$e 要素たちからなる `HTMLCollection$I を返す。 ◎ Returns an HTMLCollection of the area elements in the map.
`areas@m 取得子~手続きは ⇒ ~RET 次のようにされた `HTMLCollection$I ⇒＃ 根は コレ, ~filterは `area$e 要素のみに合致する ◎ The areas attribute must return an HTMLCollection rooted at the map element, whose filter matches only area elements.

`name@m ~IDL属性は、 `name$a 内容~属性を`反映する$モノトスル。 ◎ The IDL attribute name must reflect the content attribute of the same name.

画像~mapは、 保守し易くなるよう， ~page上の他の内容との併用により定義できる。 次の~page例には、 先頭に画像~mapがあり，末尾に対応する一連の~text~linkがある。 ◎ Image maps can be defined in conjunction with other content on the page, to ease maintenance. This example is of a page with an image map at the top of the page and a corresponding set of text links at the bottom.

`map-1^xCode

4.8.13. `area^e 要素

`分類$
`~flow内容$ ／ `句ng内容$ ◎ Flow content. ◎ Phrasing content.
`この要素を利用できる文脈$
`句ng内容$が期待される所 — ただし、 先祖に `map$e 要素がある場合に限る。 ◎ Where phrasing content is expected, but only if there is a map element ancestor.
`内容~model$
`なし$。 ◎ Nothing.
`text/html における~tag省略$
`終了~tag$はない。 ◎ No end tag.
`内容~属性$
`大域~属性$ ◎ Global attributes
`~alt0$a — 画像が可用でないときに利用される代用~text ◎ alt — Replacement text for use when images are not available
`coords$a — `画像~map$内に作成される図形の座標を与える ◎ coords — Coordinates for the shape to be created in an image map
`shape$a — `画像~map$内に作成される図形の種類を与える ◎ shape — The kind of shape to be created in an image map
`href$a — `~hyperlink$の~addressを与える ◎ href — Address of the hyperlink
`target$a — `~hyperlink$による`~navi$用の`~navigable$を与える。 ◎ target — Navigable for hyperlink navigation
`download$a — 資源へ~navigateする代わりに，それを~downloadするかどうか, および そうする場合の~filenameを与える ◎ download — Whether to download the resource instead of navigating to it, and its filename if so
`ping$a — ~pingする`~URL$を与える ◎ ping — URLs to ping
`rel$a — 当の`~hyperlink$を包含している文書における所在と行先~資源との関係性を与える ◎ rel — Relationship between the location in the document containing the hyperlink and the destination resource
`~referrerpolicy0$a — この要素により起動される`~fetch$用の`~referrer施策$ ◎ referrerpolicy — Referrer policy for fetches initiated by the element
`~accessibilityの考慮点$
要素は `href$a 属性を有する場合 ⇒ `area$AA ◎ If the element has an href attribute: for authors; for implementers.
他の場合 ⇒ `area-no-href$AA ◎ Otherwise: for authors; for implementers.
`~DOM~interface$
[Exposed=Window]
interface `HTMLAreaElement@I : `HTMLElement$I {
  [`HTMLConstructor$] constructor();

  [`CEReactions$] attribute DOMString `alt$mA;
  [`CEReactions$] attribute DOMString `coords$mA;
  [`CEReactions$] attribute DOMString `shape$mA;
  [`CEReactions$] attribute DOMString `target$mA;
  [`CEReactions$] attribute DOMString `download$mA;
  [`CEReactions$] attribute USVString `ping$mA;
  [`CEReactions$] attribute DOMString `rel$mA;
  [SameObject, PutForwards=`value$m] readonly attribute `DOMTokenList$I `relList$mA;
  [`CEReactions$] attribute DOMString `referrerPolicy$mA;

  // `HTMLAreaElement$obsMb
};
`HTMLAreaElement$I includes `HTMLHyperlinkElementUtils$I;

`area$e 要素は、 次のいずれかを`表現-$する ⇒＃ 何らかの~textを伴う~hyperlinkと それに対応する`画像~map$上の区画 ／ 無反応な区画 ◎ The area element represents either a hyperlink with some text and a corresponding area on an image map, or a dead area on an image map.

`area$e 要素に親~nodeがある場合、 その いずれかの先祖は `map$e 要素でなければナラナイ。 ◎ An area element with a parent node must have a map element ancestor.

`area$e 要素が `href$a 属性を有する場合、 要素は`~hyperlink$を表現する。 この事例では、 要素は `~alt0@a 属性も有していなければナラナイ。 それは、 当の~hyperlinkを成す~textを指定する。 この~textは： ◎ If the area element has an href attribute, then the area element represents a hyperlink. In this case, the alt attribute must be present. It specifies the text of the hyperlink. Its value＼

`area$e 要素が `href$a 属性を有さない場合：

  • 要素が表現する区画を選択できなくするモノトスル。
  • `~alt0$a 属性を省略しなければナラナイ。
◎ If the area element has no href attribute, then the area represented by the element cannot be selected, and the alt attribute must be omitted.

`href$a 属性を有するかどうかを問わず，［ `shape$a, `coords$a ］属性が当の区画を指定する。 ◎ In both cases, the shape and coords attributes specify the area.

`shape@a 属性は、 `列挙d属性$であり、 次に挙げる~keyword, とり得る状態, それらの対応付けが定義される： ◎ The shape attribute is an enumerated attribute with the following keywords and states:

~keyword 適合か 状態 概略的な記述
`circle@v `真円$st 当の区画は、［ `coords$a 属性の値を成す正確に 3 個の整数 ］を利用して~design化される真円になる。
`circ@v 否
`default@v `既定$st 当の区画は、 画像~全体になる （ `coords$a 属性は利用されない）。
`poly@v `多角形$st 当の区画は、［ `coords$a 属性の値を成す 6 個以上の整数 ］を利用して~design化される多角形になる。
`polygon@v 否
`rect@v `矩形$st 当の区画は、［ `coords$a 属性の値を成す正確に 4 個の整数 ］を利用して~design化される矩形になる。
`rectangle@v 否

【 略称 `circ^v は適合しない一方で、 略称［ `poly^v ／ `rect^v ］は適合することに注意。 】

◎ Keyword｜Conforming｜State｜Brief description circle｜｜Circle state｜Designates a circle, using exactly three integers in the coords attribute. circ｜No｜｜ default｜｜Default state｜This area is the whole image. (The coords attribute is not used.) poly｜｜Polygon state｜Designates a polygon, using at-least six integers in the coords attribute. polygon｜No｜｜ rect｜｜Rectangle state｜Designates a rectangle, using exactly four integers in the coords attribute. rectangle｜No｜｜

この属性の［ `欠落~値~用の既定の状態$／`妥当でない値~用の既定の状態$ ］は、 `矩形$st とする。 ◎ The attribute's missing value default and invalid value default are both the rectangle state.

`coords@a 属性に指定する値は、 `妥当な浮動小数点数~list$を包含しなければナラナイ。 この属性は、 `shape$a 属性が述べる図形の座標を与える。 この属性の処理については、 `画像~map$処理~modelの一部として述べられる。 加えて，この属性は、 `area$e 要素の `shape$a 属性の状態に応じて， 以下に挙げる要件を満たさなければナラナイ — 以下に述べる どの座標も，画像の左上隅から相対的に［ 1 個目の成分は右方, 2 個目の成分は下方 ］への距離を `px$css 数で表すとする： ◎ The coords attribute must, if specified, contain a valid list of floating-point numbers. This attribute gives the coordinates for the shape described by the shape attribute. The processing for this attribute is described as part of the image map processing model.

`真円@st
この状態の下では、 要素は `coords$a 属性を有していて， その値は次を満たさなければナラナイ ⇒ ［ 3 個の整数からなる ］~AND［ 3 個目の整数 ~GTE 0 ］ ◎ In the circle state, area elements must have a coords attribute present, with three integers, the last of which must be non-negative.＼
( 1，2 ) 個目の整数が成す座標は 真円の中心, 3 個目の整数は 真円の半径を表現するモノトスル。 ◎ The first integer must be the distance in CSS pixels from the left edge of the image to the center of the circle, the second integer must be the distance in CSS pixels from the top edge of the image to the center of the circle, and the third integer must be the radius of the circle, again in CSS pixels.
`既定@st
この状態の下では、 要素は `coords$a 属性を有してはナラナイ（区画は画像~全体になる）。 ◎ In the default state, area elements must not have a coords attribute. (The area is the whole image.)
`多角形@st
この状態の下では、 要素は `coords$a 属性を有していて， その値は次を満たさなければナラナイ ⇒ 6 個~以上かつ偶数~個の整数からなる ◎ In the polygon state, area elements must have a coords attribute with at least six integers, and the number of integers must be even.＼
各 正~整数 %i に対し、 ( %i ~MUL 2 ~MINUS 1, %i ~MUL 2 ) 個目の整数が成す座標は，多角形の %i 個目の頂点を表現するモノトスル。 ◎ Each pair of integers must represent a coordinate given as the distances from the left and the top of the image in CSS pixels respectively, and all the coordinates together must represent the points of the polygon, in order.
`矩形@st
この状態の下では、 要素は `coords$a 属性を有していて， その値は次を満たさなければナラナイ ⇒ ［ 4 個の整数 %x1, %y1, %x2, %y2 からなる ］~AND［ %x1 ~LT %x2 ］~AND［ %y1 ~LT %y2 ］ ◎ In the rectangle state, area elements must have a coords attribute with exactly four integers, the first of which must be less than the third, and the second of which must be less than the fourth.＼
座標［ ( %x1, %y1 ) は矩形の左上隅, ( %x2, %y2 ) は矩形の右下隅 ］を表現するモノトスル。 ◎ The four points must represent, respectively, the distance from the left edge of the image to the left side of the rectangle, the distance from the top edge to the top side, the distance from the left edge to the right side, and the distance from the top edge to the bottom side, all in CSS pixels.

~UAは、 `area$e 要素を利用して作成された［ `~hyperlinkを追う$／ `~hyperlinkを~downloadする$ ］ことを利用者に許容するときに，~linkをどう追うかは、［ `href$a, `target$a, `download$a, `ping$a ］属性により裁定される。 ~UAは、 利用者が~linkを追う前に， `rel$a 属性を利用して， ~target資源に見込まれる資質を利用者に指示してもヨイ。 ◎ When user agents allow users to follow hyperlinks or download hyperlinks created using the area element, the href, target, download, and ping attributes decide how the link is followed. The rel attribute may be used to indicate to the user the likely nature of the target resource before the user follows the link.

`area$e 要素が `href$a 属性を有さない場合、［ `target$a ／ `download$a ／ `ping$a ／ `rel$a ／ `~referrerpolicy0$a ］属性も有してはナラナイ。 ◎ The target, download, ping, rel, and referrerpolicy attributes must be omitted if the href attribute is not present.

`area$e 要素が `itemprop$a 属性を有する場合、 `href$a 属性も有していなければナラナイ。 ◎ If the itemprop attribute is specified on an area element, then the href attribute must also be specified.

`alt@mA ~IDL属性は、 `~alt0$a 内容~属性を`反映する$モノトスル。

`coords@mA ~IDL属性は、 `coords$a 内容~属性を`反映する$モノトスル。

`target@mA ~IDL属性は、 `target$a 内容~属性を`反映する$モノトスル。

`download@mA ~IDL属性は、 `download$a 内容~属性を`反映する$モノトスル。

`ping@mA ~IDL属性は、 `ping$a 内容~属性を`反映する$モノトスル。

`rel@mA ~IDL属性は、 `rel$a 内容~属性を`反映する$モノトスル。

◎ The IDL attributes alt, coords, target, download, ping, and rel, each must reflect the respective content attributes of the same name.

`shape@mA ~IDL属性は、 `shape$a 内容~属性を`反映する$モノトスル。 ◎ The IDL attribute shape must reflect the shape content attribute.

`relList@mA ~IDL属性は、 `rel$a 内容~属性を`反映する$モノトスル。 ◎ The IDL attribute relList must reflect the rel content attribute.

`referrerPolicy@mA ~IDL属性は、 `既知な値のみに制限され$る下で， `~referrerpolicy0$a 内容~属性を`反映する$モノトスル。 ◎ The IDL attribute referrerPolicy must reflect the referrerpolicy content attribute, limited to only known values.

4.8.14. 画像~map

4.8.14.1. 著作-法

`画像~map@ は、 画像~上の幾何的な区画に`~hyperlink$を結付けることを可能にする。 ◎ An image map allows geometric areas on an image to be associated with hyperlinks.

`img$e 要素による画像には、 当の要素~上に `usemap@a 属性を指定することにより， （ `map$e 要素による）画像~mapが結付けられてもヨイ。 `usemap$a 属性に指定する値は、 ある `map$e 要素を指す`妥当な~hash名~参照$でなければナラナイ。 ◎ An image, in the form of an img element, may be associated with an image map (in the form of a map element) by specifying a usemap attribute on the img element. The usemap attribute, if specified, must be a valid hash-name reference to a map element.

次のような見かけの画像を考える： ◎ Consider an image that looks as follows:

`sample-usemap^dgm
等間隔に並んだ， 4 個の縁取りのある図形： 栗色の穴あき四角形, 緑色の円, 紺色の三角形, 黄色の十文字星形 ◎ A line with four shapes in it, equally spaced: a red hollow box, a green circle, a blue triangle, and a yellow four-pointed star.

色付けられた区画だけ~click可能にさせたい場合、 次にようにして行える： ◎ If we wanted just the colored areas to be clickable, we could do it as follows:

`usemap-1^xCode
4.8.14.2. 処理~model

`img$e 要素 %要素 が `usemap$a 属性 %属性 を有する場合、 ~UAは，以下に従って処理するモノトスル： ◎ If an img element has a usemap attribute specified, user agents must process it as follows:

  1. %~map ~LET `map$e 要素を指す`~hash名~参照として構文解析する$( %属性 の値, %要素 ) ◎ Parse the attribute's value using the rules for parsing a hash-name reference to a map element, with the element as the context node. This will return either an element (the map) or null.
  2. ~IF［ %~map ~EQ ~NULL ］ ⇒ ~RET （以降，画像は画像~mapには結付けられない。） ◎ If that returned null, then return. The image is not associated with an image map after all.
  3. %area群 ~LET %~map の子孫である `area$e 要素たちが成す集合 ◎ Otherwise, the user agent must collect all the area elements that are descendants of the map. Let those be the areas.

対話的な~UAは、 上で得された %area群 を［ 次に挙げる 2 とおりの仕方いずれか ］に従って処理するモノトスル： ◎ Having obtained the list of area elements that form the image map (the areas), interactive user agents must process the list in one of two ways.

~UAは、 `img$e 要素が表現する~textを示すことを意図する場合： ◎ If the user agent intends to show the text that the img element represents, then it must use the following steps.

  1. この段における %~hyperlink条件 は、 所与の `area$e 要素が次を満たすことをいう ⇒ ［ `href$a 属性を有する ］~AND［ `~alt0$a 属性を有する ］

    %area群 から ~OR↓ を満たす `area$e 要素たちを除去する：

    • ~NOT %~hyperlink条件
    • ［ %~hyperlink条件 ］~AND［ `~alt0$a 属性の値 ~EQ 空~文字列 ］~AND［ %area群 内に次を満たす別の `area$e 要素 %A が在る ］ ⇒ ［ %~hyperlink条件 ］~AND［ %A の `~alt0$a 属性の値 ~NEQ 空~文字列 ］~AND［ %A の `href$a 属性の値 ~EQ 当の要素の `href$a 属性の値 ］
    ◎ Remove all the area elements in areas that have no href attribute. ◎ Remove all the area elements in areas that have no alt attribute,＼ or whose alt attribute's value is the empty string, if there is another area element in areas with the same value in the href attribute and with a non-empty alt attribute.
  2. 前~段の結果の %area群 を成す各 `area$e 要素は、 `~hyperlink$を表現する — それらの~hyperlinkはすべて、 `img$e の~textに結付けられる方式で利用者に可用にされるべきである。 ◎ Each remaining area element in areas represents a hyperlink. Those hyperlinks should all be made available to the user in a manner associated with the text of the img.
この文脈においては、~UAは，［ `area$e ／ `img$e ］要素のうち `alt^a 属性を［ 有さないか、 有していて，何らかの可視でない~text（空~文字列も含む）が指定されたもの ］を`実装定義$な流儀で［ 作者が供した相応しい~textの欠如を指示することが意図される ］よう表現してもヨイ。 ◎ In this context, user agents may represent area and img elements with no specified alt attributes, or whose alt attributes are the empty string or some other non-visible text, in an implementation-defined fashion intended to indicate the lack of suitable author-provided text.
~UAは、［ 画像を示す ］かつ［ 画像とヤリトリして~hyperlinkを選択することを利用者に許容する ］ことを意図する場合： ◎ If the user agent intends to show the image and allow interaction with the image to select hyperlinks,＼
画像は、［ %area群 内の各 `area$e 要素から取り出された図形たちが成す集合 ］に結付けられるモノトスル — %~map 内の図形たちは、［ `~tree順序$で最初に近いものほど利用者から見て手前 ］になるよう多層化するものとする。 ◎ then the image must be associated with a set of layered shapes, taken from the area elements in areas, in reverse tree order (so the last specified area element in the map is the bottom-most shape, and the first element in the map, in tree order, is the top-most shape).

%area群 内の各 `area$e 要素 %要素 に対しては、 当の画像に重ねる［ %要素 が表現する図形の層 ］を次に従って得するモノトスル： ◎ Each area element in areas must be processed as follows to obtain a shape to layer onto the image:

  1. %状態 ~LET %要素 の `shape$a 属性の状態 ◎ Find the state that the element's shape attribute represents.
  2. %座標s ~LET %要素 は `coords$a 属性を ⇒＃ 有するならば `浮動小数点数~listとして構文解析する$( 属性の値 ) ／ 有さないならば空な~list ◎ Use the rules for parsing a list of floating-point numbers to parse the element's coords attribute, if it is present, and let the result be the coords list. If the attribute is absent, let the coords list be the empty list.
  3. %必要個数 ~LET %状態 に応じて ⇒＃ `真円$st ならば 3 ／ `既定$st ならば 0 ／ `多角形$st ならば 6 ／ `矩形$st ならば 4 ◎ If the number of items in the coords list is less than the minimum number given for the area element's current state, as per the following table, then the shape is empty; return. ◎ State Minimum number of items Circle state 3 Default state 0 Polygon state 6 Rectangle state 4
  4. ~IF［ %座標s の`~size$ ~LT %必要個数 ］ ⇒ ~RET ε（図形は空） ◎ Check for excess items in the coords list as per the entry in the following list corresponding to the shape attribute's state: • Circle state •• Drop any items in the list beyond the third. • Default state •• Drop all items in the list. • Polygon state •• Drop the last item if there's an odd number of items. • Rectangle state •• Drop any items in the list beyond the fourth. ◎ If the shape attribute represents the rectangle state, and the first number in the list is numerically greater than the third number in the list, then swap those two numbers around. ◎ If the shape attribute represents the rectangle state, and the second number in the list is numerically greater than the fourth number in the list, then swap those two numbers around.
  5. ~IF［ %状態 ~EQ `真円$st ］~AND［ %座標s[ 2 ] ~EQ 0 ］ ⇒ ~RET ε（図形は空） ◎ If the shape attribute represents the circle state, and the third number in the list is less than or equal to zero, then the shape is empty; return.

  6. ~RET %状態 に応じて，次で与えられる図形 — 以下におけるどの座標も画像の左上隅を~~原点とし，座標や距離は `px$css 数を表すとする： ◎ Now, the shape represented by the element is the one described for the entry in the list below corresponding to the state of the shape attribute:

    `真円$st
    次で与えられる真円 ⇒＃ 中心は ( %座標s[ 0 ], %座標s[ 1 ] ) が成す座標, 半径は %座標s[ 2 ] ◎ Let x be the first number in coords, y be the second number, and r be the third number. ◎ The shape is a circle whose center is x CSS pixels from the left edge of the image and y CSS pixels from the top edge of the image, and whose radius is r CSS pixels.
    `既定$st
    画像の全体を正確に覆う矩形 ◎ The shape is a rectangle that exactly covers the entire image.
    `多角形$st

    次で与えられる多角形：

    • %n ~EQ ( %座標s の`~size$ ~DIV 2 ) 個の頂点からなる
    • 各 整数 %i ~IN { 0 〜 %n ~MINUS 1 } に対し， ( %座標s[ %i ~MUL 2 ], %座標s[ %i ~MUL 2 ~PLUS 1 ] ) が成す座標が ( %i ~PLUS 1 ) 個目の頂点を与える

    この図形の内域は、 ~even-odd規則 【`巻き数~規則＠~SVGpainting#WindingRule$】 を利用して確立されるとする `GRAPHICS$r

    ◎ Let xi be the (2i)th entry in coords, and yi be the (2i+1)th entry in coords (the first entry in coords being the one with index 0). ◎ Let the coordinates be (xi, yi), interpreted in CSS pixels measured from the top left of the image, for all integer values of i from 0 to (N/2)-1, where N is the number of items in coords. ◎ The shape is a polygon whose vertices are given by the coordinates, and whose interior is established using the even-odd rule. [GRAPHICS]
    `矩形$st
    次をいずれも覆う最~小な矩形 ⇒＃ ( %座標s[ 0 ], %座標s[ 1 ] ) が成す座標, ( %座標s[ 2 ], %座標s[ 3 ] ) が成す座標 ◎ Let x1 be the first number in coords, y1 be the second number, x2 be the third number, and y2 be the fourth number. ◎ The shape is a rectangle whose top-left corner is given by the coordinate (x1, y1) and whose bottom right corner is given by the coordinate (x2, y2), those coordinates being interpreted as CSS pixels from the top left corner of the image.

    【 この段の目的においては、 %座標s が不適合であっても （例： ~itemが余分にある，あるいは `矩形$st のときに［ %座標s[ 0 ] ~GT %座標s[ 2 ] ］である場合など）， 図形を成す。 】

    歴史的な理由から，各 座標は、 ~CSS［ `width$p ／ `height$p ］~prop†により伸張された後の，表示されている画像に相対的に解釈するモノトスル （†または，非~CSS~browserにおいては、画像~要素の［ `width^a ／ `height^a ］属性 — ~CSS~browserは，それらの属性を前述の~CSS~propに対応付ける）。 ◎ For historical reasons, the coordinates must be interpreted relative to the displayed image after any stretching caused by the CSS 'width' and 'height' properties (or, for non-CSS browsers, the image element's width and height attributes — CSS browsers map those attributes to the aforementioned CSS properties).

    注記： ［ ~browserによる~zoom特能 ］や［ ~CSSや~SVGを利用して適用された変形-（座標系変換） ］は、 これらの座標には影響しない。 ◎ Browser zoom features and transforms applied using CSS or SVG do not affect the coordinates.

［ 上の~algoにより多層化された図形たちが成す集合に結付けられた画像 ］との［ ~pointing装置によるヤリトリ ］による，関連な利用者~対話~eventは、 ~pointing装置が指示した地点を覆う図形が［ 在るならば それらのうち最も手前側の層にあるもの ／ 無いならば 画像~要素~自身 ］に向けて，最初に発火するモノトスル。 ~UAは、 `~hyperlink$を表現している個々の `area$e 要素が［ 選択される／作動化される ］ことを許容してもヨイ （例：~keyboardを利用して）。 ◎ Pointing device interaction with an image associated with a set of layered shapes per the above algorithm must result in the relevant user interaction events being first fired to the top-most shape covering the point that the pointing device indicated, if any, or to the image element itself, if there is no shape covering that point. User agents may also allow individual area elements representing hyperlinks to be selected and activated (e.g. using a keyboard).

注記： 同じ `map$e 要素（およびその `area$e 要素たち）には， 複数個の `img$e 要素が結付けられ得るので、 同じ `area$e 要素が文書の複数の`~focus可能な区画$に対応することもあり得る。 ◎ Because a map element (and its area elements) can be associated with multiple img elements, it is possible for an area element to correspond to multiple focusable areas of the document.

画像~mapは`~live$である — ~DOMが変異された場合、 ~UAは，上の画像~map用の~algoを再度~走らせたかのように動作するモノトスル。 ◎ Image maps are live; if the DOM is mutated, then the user agent must act as if it had rerun the algorithms for image maps.