<img>要素

<img>要素の定義

英語の”image”より。
<img>要素は HTML 文書内に画像を埋め込むために使用されます。
通常の要素とは異なり、「閉じタグ」がないのも<img>要素の特徴です。閉じタグがないため、<img>要素の子要素に何かを指定するということは出来ません。

親要素として使えるもの

埋め込みコンテンツを受け入れるすべての要素。

許可されているARIAロール

すべて

DOMインターフェース

HTMLImageElement

属性

グローバル属性が指定できます。

alt

画像を説明するための、代替文字列を指定します。読み上げソフトや、検索エンジンが画像の内容を認識する際に使用されます。

crossorigin

関連する画像の取得の際に、CORS （オリジン間リソース共有、 Cross-Origin Resource Sharing）を使用しなければならないかを示します。CORS を有効にしていると、汚染されること無く、<canvas> 要素で画像を再利用できます。

• anonymous （デフォルト）：オリジン間要求 (Origin: HTTP ヘッダーを持つ要求) を実行しますが、信用情報 (Cookie、 X.509 証明書、 HTTP ベーシック認証など) は送信しません。サーバーがそのオリジンのサイトに信用情報を付与しない (HTTP の Access-Control-Allow-Origin ヘッダーの設定がない) 場合は、画像が汚染され、その使用も制限されます。
• use-credentials ：信用情報を伴ってオリジン間要求 (HTTP の Origin ヘッダーを持つ要求) を送信します (Cookie、証明書、 HTTP ベーシック認証を使用します)。サーバーが元のサイトに信用情報を付与しない場合は (HTTP の Access-Control-Allow-Credentials ヘッダーに関わらず)、画像が汚染され、その使用も制限されます。

decoding

ブラウザーに画像のデコードのためのヒントを与えます。

• sync ：他のコンテンツと不可分の表示として、画像を同期的にデコードします。
• async ：他のコンテンツの表示が遅れないように、画像を非同期的にデコードします。
• auto （デフォルト）：デコード方式を指定しません。ブラウザーはユーザーのために最良の方法を選択します。

height

画像固有の高さの値を px値で指定します。

ismap

この真偽値を持つ属性は、画像がサーバーサイドマップの一部であるかを示します。そうである場合は、クリック位置の正確な座標をサーバーに送信します。
なお、この属性は、<img>要素が、有効な href 属性を持つ <a> 要素の子孫である場合に使えます。

sizes

ソースのサイズのセットを示す、カンマ区切りの文字列を1個以上並べたリストを記述します。ソースサイズは以下の構成で記述します。

1. メディアクエリ。なお、最後のアイテムでは省略しなければなりません。
2. ソースサイズ値。画像の表示サイズを指定するものです。

ユーザーエージェントは srcset 属性で与えられたソースからひとつを選択するために、現在のソースサイズを使用します。そのとき、ソースは幅記述子 (‘w’) を使用して説明します。選択したソースサイズは画像固有のサイズ ( CSS スタイルが適用されていない場合の、画像の表示サイズ) に影響します。srcset 属性がない場合、あるいは幅記述子 (w) を持つ値がない場合は、sizes 属性の効果はありません。

src

画像の URL です。この属性は、 <img>要素に必須です。 srcset に対応するブラウザーでは src を、画素密度記述子 1x の候補画像であるように扱います。ただし、この画素密度記述子が srcset で定義済みである、または srcset に ‘w’ 記述子が含まれている場合を除きます。

srcset

ユーザーエージェントが使用可能なソース画像のセットを示す、カンマ区切りで文字列を 1 個以上並べたリストです。各々の文字列の構成は以下のとおりです。

1. 画像の URL
2. 任意で、半角スペースのあとに以下のいずれかを記述。
   1. 幅記述子。これは直後に ‘w’ を付加した正の整数です。幅記述子は実際の画素密度を計算するために、sizes 属性で与えられたソースサイズで割られます。
   2. 画素密度記述子。これは直後に ‘x’ を付加した正の浮動小数点数です。

記述子を指定しない場合は、ソースを既定の記述子 1x に割り当てます。
幅記述子と画素密度記述子を同一の srcset 属性に混在させると無効になります。重複した記述子 (例えばひとつの srcset に2つのソースがあり、どちらも ‘2x’ とする) も無効になります。

width

画像固有の幅をピクセル値で指定します。

usemap

要素に関連づけられた イメージマップの部分的な URL (‘#’ で始まる) です。

サンプル

See the Pen KjWvEw by Masahiko Iwakiri (@m-iwakiri) on CodePen.