HTML: The Living Standard

Edition for Web Developers — Last Updated 19 April 2024

1. 1. 4.8 埋め込みコンテンツ
      1. 4.8.1 picture要素
      2. 4.8.2 source要素
      3. 4.8.3 img要素

4.8 埋め込みコンテンツ

4.8.1 picture要素

カテゴリー：

フローコンテンツ。

フレージングコンテンツ。

エンベディッドコンテンツ。

パルパブルコンテンツ。

この要素を使用できるコンテキスト：

エンベディッドコンテンツが期待される場所。

コンテンツモデル：

0個以上のsource要素、その後に来る1つのimg要素、任意でスクリプトサポート要素と混合される。

text/htmlにおけるタグ省略：

どちらのタグも省略不可。

コンテンツ属性：

グローバル属性

アクセシビリティの考慮：

著者向け。

実装者向け。

DOMインターフェイス：

HTMLPictureElementを使用する。

picture要素は、スクリーンピクセル密度、ビューポートサイズ、画像フォーマット、およびその他の要素を元にした、著者に宣言的にコントロールを許可するために、または画像が使用するためのリソースに関するユーザーエージェントに対するヒントを与えるために、ソースの含まれたimg要素に複数のソースを提供するコンテナーである。この要素は、要素の子を表す。

picture要素は、videoおよびaudio要素によく似た異なる何かである。それら要素のすべてがsource要素を含む一方で、source要素のsrc属性は、要素がpicture要素内でネストされる場合に意味を持たず、リソース選択アルゴリズムは異なる。同様に、picture要素自身は何も表示しない。要素は複数のURLから選択する要素を有効にする要素の含まれるimg要素にコンテキストを単に提供する。

4.8.2 source要素

カテゴリー：

なし。

この要素を使用できるコンテキスト：

img要素の前の、picture要素の子として。

任意のフローコンテンツまたはtrack要素の前で、メディア要素の子として。

コンテンツモデル：

Nothing。

text/htmlにおけるタグ省略：

終了タグなし。

コンテンツ属性：

グローバル属性

type — 埋め込みリソースタイプ

media — 受け入れ可能なメディア

src（audioまたはvideo内） — リソースのアドレス

srcset（pictureにおける） — 異なる状況で使用するための画像。たとえば、高解像度ディスプレイ、小さなモニター、など。

sizes（pictureにおける） — 異なるページレイアウトの画像サイズ

width（pictureにおける） — 横の次元

height（pictureにおける） — 縦の次元

アクセシビリティの考慮：

著者向け。

実装者向け。

DOMインターフェイス：

HTMLSourceElementを使用する。

source要素は、著者にimg要素に対する複数の代替ソースセットまたはメディア要素に対する複数の代替メディアリソースの指定を許可する。この要素は、自分自身で何かを表すものではない。

type属性は存在してもよい。存在する場合、値は妥当なMIMEタイプ文字列でなければならない。

media属性は存在してもよい。存在する場合、値は妥当なメディアクエリーリストでなければならない。値が環境とマッチしない場合、ユーザーエージェントは次のsource要素にスキップする。

media属性は、メディア要素のリソース選択アルゴリズム中に一度だけ評価される。対照的に、picture要素を使用する場合、ユーザーエージェントは環境の変化に反応する。

要件の残りの部分は、親がpicture要素またはメディア要素であるかどうかによって異なる：

source要素の親がpicture要素である

srcset属性は存在しなければならず、かつsrcset属性である。

source要素が選択される場合、srcset属性はソースセットの画像ソースに寄与する。

srcset属性が幅記述子を用いる任意の画像候補文字列を持つ場合、sizes属性も存在してもよい。If, additionally, the following sibling img element does not allow auto-sizes, the sizes attribute must be present. The sizes attribute is a sizes attribute, which contributes the source size to the source set, if the source element is selected.

If the img element allows auto-sizes, then the sizes attribute can be omitted on previous sibling source elements. In such cases, it is equivalent to specifying auto.

source要素は、次元属性をサポートする。img要素は、レンダリングの節で定義されるように、レンダリングされる次元およびアスペクト比を決定するために、img要素自身の属性の代わりに、source要素のwidthおよびheight属性を使用することができる。

type属性が与えられた種類をサポートしない場合に、次のsource要素にスキップするのをユーザーエージェントに可能にするために、この属性はソースセットで画像の種類を与える。

type属性が指定されない場合、ユーザーエージェントがフェッチする後で画像フォーマットをサポートしないならば、ユーザーエージェントは異なるsource要素を選択しない。

source要素が次の兄弟source要素または指定されるsrcset属性をもつimg要素を持つ場合、この要素は少なくとも以下の1つを持たなければならない：

• 先頭および末尾のASCII空白を除去する後で、空文字列でなくかつASCII大文字・小文字不区別で文字列"all"に一致しないような値で指定されるmedia属性。

• 指定されるtype属性。

src属性は存在してはならない。

source要素の親がメディア要素である

src属性は、メディアリソースのURLを与える。値は、潜在的にスペースで囲まれた妥当な空でないURLでなければならない。この属性は存在しなければならない。

type属性は、この属性をフェッチする前に、このメディアリソースを再生できるかどうかをユーザーエージェントが判断するために、メディアリソースの型を示す。特定のMIMEタイプが定義するcodecsパラメーターは、リソースがエンコードされる方法を正確に指定する必要があるかもしれない。[RFC6381]

要素がvideoまたはaudio要素にすでに挿入されている場合、source要素のsrcまたはtype属性を動的に変更しても効果はない。再生している内容を変更するためには、使用可能なリソースの中から選択するcanPlayType()メソッドをおそらく利用して、直接メディア要素のsrc属性を単に使用する。一般に、文書が解析された後に手動でsource 要素を操作することは、不必要に複雑なアプローチとなる。

次のリストは、type属性でcodecs=MIMEパラメーターを使用する方法の例を示す。

H.264制約ベースラインプロファイルビデオ（メインおよび拡張ビデオ互換性のある）レベル3とMP4コンテナーでのLow-Complexity AACオーディオ

<source src='video.mp4' type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>

H.264拡張プロファイルビデオ（ベースライン対応）レベル3とMP4コンテナーでのLow-Complexity AACオーディオ

<source src='video.mp4' type='video/mp4; codecs="avc1.58A01E, mp4a.40.2"'>

H.264メインプロファイルビデオレベル3とMP4コンテナーのLow-Complexity AACオーディオ

<source src='video.mp4' type='video/mp4; codecs="avc1.4D401E, mp4a.40.2"'>

H.264 'High'プロフィールビデオ（メイン、ベースライン、または拡張プロファイルと互換性がない）レベル3とMP4コンテナーでのLow-Complexity AACオーディオ

<source src='video.mp4' type='video/mp4; codecs="avc1.64001E, mp4a.40.2"'>

MPEG-4ビジュアルのシンプルプロファイルレベル0ビデオとMP4コンテナーのLow-Complexity AACオーディオ

<source src='video.mp4' type='video/mp4; codecs="mp4v.20.8, mp4a.40.2"'>

MPEG-4アドバンストシンプルプロファイルレベル0ビデオとMP4コンテナーのLow-Complexity AACオーディオ

<source src='video.mp4' type='video/mp4; codecs="mp4v.20.240, mp4a.40.2"'>

MPEG-4映像シンプルプロファイルレベル0ビデオおよび3GPPコンテナー内AMRオーディオ

<source src='video.3gp' type='video/3gpp; codecs="mp4v.20.8, samr"'>

TheoraビデオとOggコンテナーでのVorbisオーディオ

<source src='video.ogv' type='video/ogg; codecs="theora, vorbis"'>

TheoraビデオとOggコンテナー内のSpeexオーディオ

<source src='video.ogv' type='video/ogg; codecs="theora, speex"'>

OggコンテナーでVorbisオーディオ単独

<source src='audio.ogg' type='audio/ogg; codecs=vorbis'>

Oggコンテナー内のSpeexオーディオ単独

<source src='audio.spx' type='audio/ogg; codecs=speex'>

Oggコンテナー内のFLACオーディオ単独

<source src='audio.oga' type='audio/ogg; codecs=flac'>

DiracビデオとOggコンテナーでのVorbisオーディオ

<source src='video.ogv' type='video/ogg; codecs="dirac, vorbis"'>

srcsetおよびsizes属性は存在してはならない。

<script>
 function fallback(video) {
   // replace <video> with its contents
   while (video.hasChildNodes()) {
     if (video.firstChild instanceof HTMLSourceElement)
       video.removeChild(video.firstChild);
     else
       video.parentNode.insertBefore(video.firstChild, video);
   }
   video.parentNode.removeChild(video);
 }
</script>
<video controls autoplay>
 <source src='video.mp4' type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
 <source src='video.ogv' type='video/ogg; codecs="theora, vorbis"'
         onerror="fallback(parentNode)">
 ...
</video>

4.8.3 img要素

カテゴリー：

フローコンテンツ。

フレージングコンテンツ。

エンベディッドコンテンツ。

フォームに関連付けられた要素。

要素がusemap属性をもつ場合：インタラクティブコンテンツ。

パルパブルコンテンツ。

この要素を使用できるコンテキスト：

エンベディッドコンテンツが期待される場所。

As a child of a picture element, after all source elements.

コンテンツモデル：

Nothing。

text/htmlにおけるタグ省略：

終了タグなし。

コンテンツ属性：

グローバル属性

alt — 画像が利用不可である場合に使用する代用テキスト

src — リソースのアドレス

srcset — 異なる状況で使用するための画像。たとえば、高解像度ディスプレイ、小さなモニター、など。

sizes — 異なるページレイアウトの画像サイズ

crossorigin — 要素が生成元をまたいだ要求を処理する方法

usemap — 使用するイメージマップの名前

ismap — 画像がサーバー側イメージマップであるかどうか

width — 横の次元

height — 縦の次元

referrerpolicy — 要素によって開始されたフェッチのためのリファラーポリシー

decoding — プレゼンテーションに対するにこの画像を処理する時に使用するデコーディングヒント

loading — 読み込み延期を決定するときに使用

fetchpriority — 要素によって開始されるフェッチの優先度を設定する

アクセシビリティの考慮：

要素が空でないalt属性を持つ場合：著者向け、実装者向け。

そうでなければ：著者向け、実装者向け。

DOMインターフェイス：

HTMLImageElementを使用する。

img要素は画像を表す。

img要素は、最初に要素自体に設定された次元属性ソースを持つ。

親がpicture要素である場合、srcおよびsrcset属性、および任意の兄source要素のsrcset属性によって与えられる画像は、エンベティッドコンテンツである。alt属性の値は、画像を処理することができないまたは読み込みが無効である画像に対して、等価なコンテンツを提供する。（すなわち、img要素のフォールバックコンテンツである）。

alt属性の値に関する要件は、個々の節で説明される。

src属性は存在しなければならず、画像リソースは潜在的にページ化もスクリプト化もされていない、任意でアニメーションである、非対話型を参照する潜在的にスペースで囲まれた妥当な空でないURLを含めなければならない。

上記の要件は、画像が静的ビットマップ（たとえばPNG、GIF、JPEG）、単一ページのベクター文書（単一ページのPDF、SVG文書要素を持つXMLファイル）、アニメーションビットマップ（APNG、アニメーションGIF）、アニメーションベクターグラフィックス（宣言型SMILアニメーションを使用するSVG文書要素を持つXMLファイル）などであることを意味する。しかし、これらの定義は、スクリプトを伴うSVGファイル、複数ページのPDFファイル、対話的なMNGファイル、HTML文書、プレーンテキスト文書などを排除する。[PNG] [GIF] [JPEG] [PDF] [XML] [APNG] [SVG] [MNG]

srcset属性も存在してもよく、かつsrcset属性である。

（幅記述子が使用されない場合）srcset属性およびsrc属性は、ソースセットに画像ソースに寄与する（どのsource要素も選択されなかった場合） 。

If the srcset attribute is present and has any image candidate strings using a width descriptor, the sizes attribute must also be present. 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). The sizes attribute is a sizes attribute, which contributes the source size to the source set (if no source element was selected).

An img element allows auto-sizes if:

• its loading attribute is in the Lazy state, and
• its sizes attribute's value is "auto" (ASCII case-insensitive), or starts with "auto," (ASCII case-insensitive).

crossorigin属性はCORS設定属性である。その目的は、生成元をまたいだアクセスにcanvasとともに使用できるサードパーティのサイトからの画像を許可することである。

referrerpolicy属性は、リファラーポリシー属性である。その目的は、画像をフェッチするときに使用されるリファラーポリシーを設定することにある。[REFERRERPOLICY]

decoding属性は、この画像をデコードするための好ましい方法を示す。この属性は、存在する場合、画像デコーディングヒントでなければならない。この属性の欠損値のデフォルトと不正値のデフォルトは両方ともauto状態である。

fetchpriorityは、フェッチ優先度属性である。Its purpose is to set the priority used when fetching the image.

loading属性は、遅延読み込み属性である。その目的は、ビューポート外にある画像を読み込むためのポリシーを示すことである。

When the loading attribute's state is changed to the Eager state, the user agent must run these steps:

1. Let resumptionSteps be the img element's lazy load resumption steps.

2. If resumptionSteps is null, then return.

3. Set the img's lazy load resumption steps to null.

4. Invoke resumptionSteps.

<img src="1.jpeg" alt="1">
<img src="2.jpeg" loading=eager alt="2">
<img src="3.jpeg" loading=lazy alt="3">
<div id=very-large></div> <!-- Everything after this div is below the viewport -->
<img src="4.jpeg" alt="4">
<img src="5.jpeg" loading=lazy alt="5">

The img HTML element insertion steps, given insertedNode, are:

1. If insertedNode's parent is a picture element, then, count this as a relevant mutation for insertedNode.

The img HTML element removing steps, given removedNode and oldParent, are:

1. If oldParent is a picture element, then, count this as a relevant mutation for removedNode.

img要素は、レイアウトツールとして使用してはならない。特に、画像はめったに意味および文書に有用なものを追加しないので、img要素は、透明な画像を表示するために使用すべきでない。

usemap属性が存在する場合、画像が関連付けられたイメージマップを示すことができる。

href属性を持つa要素の子孫である要素で使用される場合、ismap属性は、要素がサーバーサイドのイメージマップへのアクセスを提供することによって、その存在を示す。これは、イベントが対応するa要素でどのように処理されるかに影響する。

ismap属性は真偽属性である。属性は、href属性を持つ祖先a要素を持たない要素に指定してはならない。

usemapおよびismap属性は、picture要素で指定されるmedia属性をもつsource要素と一緒に使用される場合に混乱する振る舞いをもたらすかもしれない。

img要素は、次元属性をサポートする。

image.width [ = value ]

image.height [ = value ]

これらの属性は、実際のレンダリングされた画像の大きさ、または次元が未知である場合に0を返す。

対応するコンテンツ属性を変更するために、設定が可能である。

image.naturalWidth

image.naturalHeight

これらの属性は、画像の自然次元を返す、または次元が不明な場合は0を返す。

image.complete

画像が完全にダウンロードされている場合、または、何も画像が指定されない場合にtrueを返す。そうでなければ、falseを返す。

image.currentSrc

画像の絶対URLを返す。

image.decode()

この方法は、ユーザーエージェントに画像をパラレルにデコードさせ、デコードが完了したときに実行されるプロミスを返す。

画像がデコードできない場合、プロミスは"EncodingError" DOMExceptionで拒否される。

image = new Image([ width [, height ] ])

該当する場合、適切な引数で渡された値に設定されたwidthとheight属性を持つ、新しいimg要素を返す。

const img = new Image();
img.src = "nebula.jpg";
img.onload = () => {
    document.body.appendChild(img);
};
img.onerror = () => {
    document.body.appendChild(new Text("Could not load the nebula :("));
};

const img = new Image();
img.src = "nebula.jpg";
img.decode().then(() => {
    document.body.appendChild(img);
}).catch(() => {
    document.body.appendChild(new Text("Could not load the nebula :("));
});

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));
});

<p>I lived in <img src="carouge.svg" alt=""> Carouge.</p>

<p>Home town: <img src="carouge.svg" alt="Carouge"></p>

<p>Carouge has a coat of arms.</p>
<p><img src="carouge.svg" alt="The coat of arms depicts a lion, sitting in front of a tree."></p>
<p>It is used as decoration all over the town.</p>

<p>Carouge has a coat of arms.</p>
<p><img src="carouge.svg" alt=""></p>
<p>The coat of arms depicts a lion, sitting in front of a tree.
It is used as decoration all over the town.</p>

<p>She picked up the folder and a piece of paper fell out.</p>
<p><img src="carouge.svg" alt="Shaped like a shield, the paper had a
red background, a green tree, and a yellow lion with its tongue
hanging out and whose tail was shaped like an S."></p>
<p>She stared at the folder. S! The answer she had been looking for all
this time was simply the letter S! How had she not seen that before? It all
came together now. The phone call where Hector had referred to a lion's tail,
the time Maria had stuck her tongue out...</p>

<p>The last user to have uploaded a coat of arms uploaded this one:</p>
<p><img src="last-uploaded-coat-of-arms.cgi" title="User-uploaded coat of arms."></p>

<article>
 <h1>My cats</h1>
 <h2>Fluffy</h2>
 <p>Fluffy is my favorite.</p>
 <img src="fluffy.jpg" alt="She likes playing with a ball of yarn.">
 <p>She's just too cute.</p>
 <h2>Miles</h2>
 <p>My other cat, Miles just eats and sleeps.</p>
</article>

<article>
 <h1>Photography</h1>
 <h2>Shooting moving targets indoors</h2>
 <p>The trick here is to know how to anticipate; to know at what speed and
 what distance the subject will pass by.</p>
 <img src="fluffy.jpg" alt="A cat flying by, chasing a ball of yarn, can be
 photographed quite nicely using this technique.">
 <h2>Nature by night</h2>
 <p>To achieve this, you'll need either an extremely sensitive film, or
 immense flash lights.</p>
</article>

<article>
 <h1>About me</h1>
 <h2>My pets</h2>
 <p>I've got a cat named Fluffy and a dog named Miles.</p>
 <img src="fluffy.jpg" alt="Fluffy, my cat, tends to keep itself busy.">
 <p>My dog Miles and I like go on long walks together.</p>
 <h2>music</h2>
 <p>After our walks, having emptied my mind, I like listening to Bach.</p>
</article>

<article>
 <h1>Fluffy and the Yarn</h1>
 <p>Fluffy was a cat who liked to play with yarn. She also liked to jump.</p>
 <aside><img src="fluffy.jpg" alt="" title="Fluffy"></aside>
 <p>She would play in the morning, she would play in the evening.</p>
</article>