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

4.8 埋め込みコンテンツ

4.8.1 picture要素

Element/picture

Support in all current engines.

Firefox38+Safari9.1+Chrome38+
Opera25+Edge79+
Edge (Legacy)13+Internet ExplorerNo
Firefox Android38+Safari iOS9.3+Chrome Android38+WebView Android38+Samsung Internet3.0+Opera Android25+
caniuse.com table

HTMLPictureElement

Support in all current engines.

Firefox38+Safari9.1+Chrome38+
Opera25+Edge79+
Edge (Legacy)13+Internet ExplorerNo
Firefox Android38+Safari iOS9.3+Chrome Android38+WebView Android38+Samsung Internet3.0+Opera Android25+
カテゴリー
フローコンテンツ
フレージングコンテンツ
エンベディッドコンテンツ
この要素を使用できるコンテキスト
エンベディッドコンテンツが期待される場所。
コンテンツモデル
0個以上のsource要素、その後に来る1つのimg要素、任意でスクリプトサポート要素と混合される。
text/htmlにおけるタグ省略
どちらのタグも省略不可。
コンテンツ属性
グローバル属性
アクセシビリティの考慮
著者向け
実装者向け
DOMインターフェイス
[Exposed=Window]
interface HTMLPictureElement : HTMLElement {
  [HTMLConstructor] constructor();
};

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

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

4.8.2 source要素

Element/source

Support in all current engines.

Firefox3.5+SafariYesChromeYes
OperaYesEdgeYes
Edge (Legacy)12+Internet Explorer9+
Firefox Android4+Safari iOSYesChrome AndroidYesWebView AndroidYesSamsung InternetYesOpera Android?

HTMLSourceElement

Support in all current engines.

Firefox3.5+SafariYesChromeYes
OperaYesEdgeYes
Edge (Legacy)12+Internet Explorer9+
Firefox Android4+Safari iOSYesChrome AndroidYesWebView AndroidYesSamsung InternetYesOpera AndroidYes
カテゴリー
なし。
この要素を使用できるコンテキスト
img要素の前の、picture要素の子として。
任意のフローコンテンツまたはtrack要素の前で、メディア要素の子として。
コンテンツモデル
Nothing
text/htmlにおけるタグ省略
終了タグなし。
コンテンツ属性
グローバル属性
src — リソースのアドレス
type — 埋め込みリソースタイプ
srcset — Images to use in different situations, e.g., high-resolution displays, small monitors, etc.
sizes — 異なるページレイアウトの画像サイズ
media — 受け入れ可能なメディア
アクセシビリティの考慮
著者向け
実装者向け
DOMインターフェイス
[Exposed=Window]
interface HTMLSourceElement : HTMLElement {
  [HTMLConstructor] constructor();

  [CEReactions] attribute USVString src;
  [CEReactions] attribute DOMString type;
  [CEReactions] attribute USVString srcset;
  [CEReactions] attribute DOMString sizes;
  [CEReactions] attribute DOMString media;
};

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

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

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

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

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

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

srcset属性が幅記述子を用いる任意の画像候補文字列を持つ場合、sizes属性も存在しなければならず、かつsizes属性である。source要素が選択される場合、sizes属性はソースセットソースサイズに寄与する。

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

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

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

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

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

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

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

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

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

次のリストは、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"'>

srcsetsizesおよびmedia属性は存在してはならない。

If a source element is inserted as a child of a media element that has no src attribute and whose networkState has the value NETWORK_EMPTY, the user agent must invoke the media element's resource selection algorithm.

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

ユーザーエージェントがすべて提供されたメディアリソースをレンダリングすることができるかどうか、著者が確信できない場合、著者は最後のsource要素のフォールバック動作にerrorイベントをリッスンできる:

<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要素

Element/img

Support in all current engines.

FirefoxYesSafariYesChromeYes
OperaYesEdgeYes
Edge (Legacy)12+Internet ExplorerYes
Firefox AndroidYesSafari iOSYesChrome AndroidYesWebView AndroidYesSamsung InternetYesOpera AndroidYes

HTMLImageElement

Support in all current engines.

Firefox1+Safari3+Chrome1+
Opera8+Edge79+
Edge (Legacy)12+Internet Explorer8+
Firefox Android4+Safari iOS1+Chrome Android18+WebView Android1+Samsung Internet1.0+Opera Android10.1+
カテゴリー
フローコンテンツ
フレージングコンテンツ
エンベディッドコンテンツ
フォーム関連要素
要素がusemap属性をもつ場合:インタラクティブコンテンツ
パルパブルコンテンツ
この要素を使用できるコンテキスト
エンベディッドコンテンツが期待される場所。
コンテンツモデル
Nothing
text/htmlにおけるタグ省略
終了タグなし。
コンテンツ属性
グローバル属性
alt — 画像が利用不可である場合に使用する代用テキスト
src — リソースのアドレス
srcset — Images to use in different situations, e.g., high-resolution displays, small monitors, etc.
sizes — 異なるページレイアウトの画像サイズ
crossorigin — 要素がcrossorigin要求を処理する方法
usemap — 使用するイメージマップの名前
ismap — 画像がサーバー側イメージマップであるかどうか
width — 横の次元
height — 縦の次元
referrerpolicy — 要素によって開始されたフェッチのためのリファラポリシー
decoding — プレゼンテーションに対するにこの画像を処理する時に使用するデコーディングヒント
loading — 読み込み延期を決定するときに使用
アクセシビリティの考慮
要素が空でないalt属性を持つ場合:著者向け実装者向け
そうでなければ:著者向け実装者向け
DOMインターフェイス
[Exposed=Window,
 LegacyFactoryFunction=Image(optional unsigned long width, optional unsigned long height)]
interface HTMLImageElement : HTMLElement {
  [HTMLConstructor] constructor();

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

  Promise<void> decode();

  // also has obsolete members
};

img要素は画像を表す。

Element/img#attr-srcset

Support in all current engines.

Firefox38+Safari8+Chrome34+
Opera21+Edge79+
Edge (Legacy)≤18+Internet ExplorerNo
Firefox Android38+Safari iOS8+Chrome Android34+WebView Android37+Samsung Internet2.0+Opera Android21+
caniuse.com table

親が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要素も選択されなかった場合) 。

srcset属性が存在しかつ幅記述子を用いる任意の画像候補文字列を持つ場合、sizes属性も存在しなければならず、かつsizes属性である。source要素が選択される場合、sizes属性はソースセットソースサイズに寄与する。

Attributes/crossorigin

Support in all current engines.

FirefoxYesSafariYesChromeYes
OperaYesEdgeYes
Edge (Legacy)12+Internet ExplorerYes
Firefox AndroidYesSafari iOSYesChrome AndroidYesWebView AndroidYesSamsung InternetYesOpera AndroidYes

crossorigin属性はCORS設定属性である。その目的は、クロスオリジンなアクセスにcanvasとともに使用できるサードパーティのサイトからの画像を許可することである。

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

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

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">

上記の例では、画像は次のように読み込まれる:

1.jpeg, 2.jpeg, 4.jpeg

画像は熱心に読み込まれ、ウィンドウの読み込みイベントを延期する。

3.jpeg

ビューポート内にあるため、レイアウトがわかっているときに画像は読み込まれるが、ウィンドウの読み込みイベントは延期しない。

5.jpeg

画像はビューポートに一度スクロールされるだけで読み込まれ、ウィンドウの読み込みイベントを延期しない。

開発者は、たとえCSSが画像の幅と高さのプロパティを設定しているとしても、遅延読み込みされた画像のwidthおよびheight属性を通して固有のアスペクト比を指定し、画像の読み込み後にページレイアウトが移動するのを防ぐことを勧める。


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


What an img element represents depends on the src attribute and the alt attribute.

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.

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

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.

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

The image might be a key part of the content, and there is no textual equivalent of the image available.

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.

If the image is available and the user agent is configured to display that image, then the element represents the element's image data.

If the image has a src attribute whose value is the empty string, then the element represents nothing.

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 the image has a title attribute whose value is not the empty string, then return the value of that attribute.

  2. 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. Return nothing. (There is no caption information.)

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.

そうでなければ

The element represents the text given by the alt attribute.

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.

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.

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.

The contents of img elements, if any, are ignored for the purposes of rendering.


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

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

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

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

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

HTMLImageElement/alt

Support in all current engines.

FirefoxYesSafariYesChrome1+
OperaYesEdge79+
Edge (Legacy)12+Internet Explorer?
Firefox AndroidYesSafari iOSYesChrome AndroidYesWebView AndroidYesSamsung InternetYesOpera Android?

HTMLImageElement/src

Support in all current engines.

FirefoxYesSafariYesChrome1+
OperaYesEdge79+
Edge (Legacy)12+Internet Explorer?
Firefox AndroidYesSafari iOSYesChrome AndroidYesWebView AndroidYesSamsung InternetYesOpera AndroidYes

HTMLImageElement/srcset

Support in all current engines.

Firefox38+Safari8+Chrome34+
Opera21+Edge79+
Edge (Legacy)12+Internet ExplorerNo
Firefox Android38+Safari iOS8+Chrome Android34+WebView Android37+Samsung Internet2.0+Opera AndroidNo

HTMLImageElement/sizes

Firefox38+SafariNoChrome45+
OperaYesEdge79+
Edge (Legacy)13+Internet ExplorerNo
Firefox Android38+Safari iOSNoChrome Android45+WebView Android45+Samsung Internet5.0+Opera AndroidNo

altsrcsrcsetsizes IDL属性は、同じ名前の各コンテンツ属性を反映しなければならない。

HTMLImageElement/crossOrigin

Support in all current engines.

FirefoxYesSafariYesChrome13+
OperaYesEdge79+
Edge (Legacy)12+Internet Explorer9+
Firefox AndroidYesSafari iOSYesChrome AndroidYesWebView AndroidYesSamsung InternetYesOpera Android?

The crossOrigin IDL attribute must reflect the crossorigin content attribute, limited to only known values.

HTMLImageElement/useMap

Support in all current engines.

FirefoxYesSafariYesChrome1+
OperaYesEdge79+
Edge (Legacy)12+Internet Explorer?
Firefox AndroidYesSafari iOSYesChrome AndroidYesWebView AndroidYesSamsung InternetYesOpera AndroidYes

useMap IDL属性は、usemapコンテンツ属性を反映しなければならない。

HTMLImageElement/isMap

Support in all current engines.

FirefoxYesSafariYesChrome1+
OperaYesEdge79+
Edge (Legacy)12+Internet Explorer?
Firefox AndroidYesSafari iOSYesChrome AndroidYesWebView AndroidYesSamsung InternetYesOpera Android?

isMap IDL属性は、ismapコンテンツ属性を反映しなければならない。

The referrerPolicy IDL attribute must reflect the referrerpolicy content attribute, limited to only known values.

HTMLImageElement/decoding

Support in all current engines.

Firefox63+Safari11.1+Chrome65+
OperaYesEdge79+
Edge (Legacy)NoInternet ExplorerNo
Firefox Android63+Safari iOS11.3+Chrome Android65+WebView Android65+Samsung Internet9.0+Opera Android?

The decoding IDL attribute must reflect the decoding content attribute, limited to only known values.

The loading IDL attribute must reflect the loading content attribute, limited to only known values.

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 ] ] )

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

HTMLImageElement/width

Support in all current engines.

FirefoxYesSafariYesChrome1+
OperaYesEdge79+
Edge (Legacy)12+Internet Explorer?
Firefox AndroidYesSafari iOSYesChrome AndroidYesWebView AndroidYesSamsung InternetYesOpera AndroidYes

HTMLImageElement/height

Support in all current engines.

FirefoxYesSafariYesChrome1+
OperaYesEdge79+
Edge (Legacy)12+Internet Explorer?
Firefox AndroidYesSafari iOSYesChrome AndroidYesWebView AndroidYesSamsung InternetYesOpera Android?

The IDL attributes width and height must return the rendered width and height of the image, in CSS pixels, if the image is being rendered, and is being rendered to a visual medium; or else the density-corrected intrinsic width and height of the image, in CSS pixels, if the image has intrinsic dimensions and is available but not being rendered to a visual medium; or else 0, if the image is not available or does not have intrinsic dimensions. [CSS]

On setting, they must act as if they reflected the respective content attributes of the same name.

HTMLImageElement/naturalWidth

Support in all current engines.

FirefoxYesSafariYesChrome1+
OperaYesEdge79+
Edge (Legacy)12+Internet Explorer9+
Firefox AndroidYesSafari iOSYesChrome AndroidYesWebView AndroidYesSamsung InternetYesOpera Android?
caniuse.com table

HTMLImageElement/naturalHeight

Support in all current engines.

FirefoxYesSafariYesChrome1+
OperaYesEdge79+
Edge (Legacy)12+Internet Explorer9+
Firefox AndroidYesSafari iOSYesChrome AndroidYesWebView AndroidYesSamsung InternetYesOpera Android?

The IDL attributes naturalWidth and naturalHeight must return the density-corrected intrinsic width and height of the image, in CSS pixels, if the image has intrinsic dimensions and is available, or else 0. [CSS]

Since the intrinsic dimensions 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.

HTMLImageElement/complete

Support in all current engines.

FirefoxYesSafariYesChrome1+
OperaYesEdge79+
Edge (Legacy)12+Internet Explorer8+
Firefox AndroidYesSafari iOSYesChrome AndroidYesWebView AndroidYesSamsung InternetYesOpera Android?

The IDL attribute complete must return true if any of the following conditions is true:

Otherwise, the attribute must return false.

HTMLImageElement/currentSrc

Support in all current engines.

Firefox38+Safari10.1+Chrome45+
OperaYesEdge79+
Edge (Legacy)13+Internet ExplorerNo
Firefox Android38+Safari iOS10.3+Chrome Android45+WebView Android45+Samsung Internet5.0+Opera AndroidNo

The currentSrc IDL attribute must return the img element's current request's current URL.

HTMLImageElement/decode

Support in all current engines.

Firefox68+Safari11.1+Chrome64+
OperaYesEdge79+
Edge (Legacy)NoInternet Explorer?
Firefox Android68+Safari iOS11.3+Chrome Android64+WebView Android64+Samsung Internet9.0+Opera Android?

SVGImageElement/decode

Support in one engine only.

FirefoxNoSafari?Chrome65+
Opera?Edge79+
Edge (Legacy)NoInternet Explorer?
Firefox AndroidNoSafari iOS?Chrome Android65+WebView Android65+Samsung Internet9.0+Opera Android?

The decode() method, when invoked, must perform the following steps:

  1. Let promise be a new promise.

  2. Queue a microtask to perform the following steps:

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

    properly decode stars.jpg, we need to delay any processing by one microtask.

    1. If any of the following conditions are true about this img element:

      then reject promise with an "EncodingError" DOMException.

    2. Otherwise, in parallel, wait for one of the following cases to occur, and perform the corresponding actions:

      This img element's node document stops being an active document
      This img element's current request changes or is mutated
      This img element's current request's state becomes broken

      Reject promise with an "EncodingError" DOMException.

      This img element's current request's state becomes completely available

      Decode the image.

      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.

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

      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. Return promise.

decode()メソッドなしで、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 :("));
};

しかし、画像がDOMに挿入された後に発生するペイントでは、メインスレッドで同期デコードが行われるため、フレームが著しく削除される可能性がある。

代わりに、これはdecode()メソッドを使用して書き換えることができる:

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 :("));
});

この後者の形式は、ユーザーエージェントが画像をパラレルでデコードすることを可能にし、デコード処理が完了した後にのみ、DOMに挿入する(そして、それをペイントさせる)ことによって、元のフレームの欠落を回避する。

decode()メソッドは、デコードされた画像データが少なくとも1つのフレームで使用可能であることを保証しようとするため、requestAnimationFrame() APIと組み合わせることができる。つまり、すべてのDOMの変更をアニメーションフレームコールバックとして一緒にまとめるコーディングスタイルやフレームワークで使用することができる:

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

HTMLImageElement/Image

Support in all current engines.

Firefox1+Safari10.1+Chrome1+
Opera8+Edge79+
Edge (Legacy)12+Internet Explorer8+
Firefox Android4+Safari iOS1+Chrome Android18+WebView Android1+Samsung Internet1.0+Opera Android?

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 document be the current global object's associated Document.

  2. Let img be the result of creating an element given document, img, and the HTML namespace.

  3. If width is given, then set an attribute value for img using "width" and width.

  4. If height is given, then set an attribute value for img using "height" and height.

  5. Return img.

1つの画像は、コンテキストに応じて異なる適切な代替テキストを持つことができる。

次の場合のそれぞれにおいて、同じ画像を使用するが、altテキストは毎回異なる。画像は、スイスのジュネーブ州カルージュ自治体の紋章である。

ここでは、補足的なアイコンとして使用される:

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

ここでは、ある種の紋章であることのみで、どのような画像であるかを公表時点で未知であり、したがって、置換テキストが提供されず、title属性で、代わりに画像に対して簡単なキャプションが提供される:

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

理想的には、著者は、この場合ですら実際の置換テキストを提供するための方法を見つけるだろう。たとえば、前のユーザーを尋ねることによってなど。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.

ここで、毎回別の適切な代替テキストをともなう、異なるコンテキストで使用したのと同じ写真を示す複数の例を次に示す。

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