概要
HTML <img> 要素 (HTML 画像要素) は、ドキュメントに画像を表示します。
使用補足: ブラウザは、要素から参照された画像を常に表示するわけではありません。視覚ブラウザ以外のブラウザ（視覚障がい者向けの聴覚ブラウザなど）で閲覧された場合や、ユーザが画像を非表示に設定している場合、または記述が正しくない場合や、指定された画像形式が未対応のものでブラウザが画像を表示できない場合など、いくつかのケースがこれに該当します。このような場合は、ブラウザは、画像をこの要素の alt 属性で定義されたテキストに置き換えます。
| コンテンツカテゴリ | フローコンテンツ、フレージングコンテンツ、埋め込みコンテンツ、パルパブルコンテンツ。要素が usemap 属性を持つ場合は、インタラクティブコンテンツカテゴリの一員でもあります。 |
|---|---|
| 許可された内容 | なし。これは空要素です。 |
| タグの省略 | 開始タグは必須。終了タグを記述してはならない。 |
| 許可された親要素 | 埋め込みコンテンツを受け入れるすべての要素。 |
| DOM インターフェイス | HTMLImageElement |
属性
他のすべての HTML 要素と同様に、この要素はグローバル属性をサポートします。
align非推奨 HTML4.01、廃止 HTML5vertical-alignCSS プロパティを使用してください- 画像の周りのコンテキストに対する画像の配置を指定します。
alt- この属性は、画像を説明する代替テキストを定義します。画像の URL が間違っている場合や指定された画像の形式が未対応のものであった場合、または画像がダウンロード中の場合に表示されます。
使用補足: この属性を省略すると、画像がコンテンツの鍵となる部分であり、同等のテキストがないことを示します。この属性に空文字列をセットすると、この画像がコンテンツにおいて重要な箇所ではないことを示します。視覚型ではないブラウザは、この要素の表現を省略する可能性があります。
border非推奨 HTML4.01、廃止 HTML5- 画像の周りの境界線の幅を指定します。
crossoriginHTML5- この列挙型の属性は、関連画像を CORS を使用して取得しなければならないか、そうでないかを示します。CORS が有効な画像 は、汚染 されることなく
<canvas>要素で再利用できます。次の値が使用できます:"anonymous"- クロスオリジン要求 (
Origin:HTTP ヘッダを持つ要求) が実行されます。ただし、信用情報は送信されません (Cookie、X.509 証明書、HTTP ベーシック認証は利用されません)。サーバが元のサイトに信用情報を付与しない場合 (Access-Control-Allow-Origin:HTTP ヘッダの設定なし)、画像が 汚染 され、その使用も制限されます。 "use-credentials"- クロスオリジン要求 (
Origin:HTTP ヘッダを持つ要求) が実行され、信用情報が送信されます (Cookie、証明書、HTTP ベーシック認証が利用されます)。サーバが元のサイトに信用情報を付与しない場合 (Access-Control-Allow-Credentials:HTTP ヘッダに関わらず)、画像が 汚染 され、その使用も制限されます。
Origin:HTTP ヘッダを送信せずに取得)、<canvas>要素での汚染されない使用が妨げられます。これが無効な場合、列挙型のキーワードに anonymous が指定されたものとして扱われます。追加の情報は CORS 設定属性 を参照してください。 height- 画像固有の高さを HTML5 の CSS ピクセルまたは HTML 4 のピクセル、または割合で指定します。
hspace非推奨 HTML4.01, 廃止 HTML5- 画像の左右に挿入する空間の幅をピクセル単位で指定します。
ismap- この真偽値を持つ属性は、画像がサーバサイドマップの一部であるかどうかを示します。その場合、クリック位置の正確な座標がサーバに送信されます。
longdesc- 表示される画像の説明の URL です。これは、alt テキストを補足するものです。
name非推奨 HTML4.01, 廃止 HTML5- 要素の名前です。これは、後方互換性のために HTML 4 でのみサポートされています。代わりに
id属性を使用してください。 referrerpolicy- リソースを読み込む際にどのリファラを使用するかを示す文字列です:
"no-referrer"は、Referer:ヘッダを送信しないことを表します。- "
no-referrer-when-downgrade" は、TLS (HTTPS) を使用せずに生成元へナビゲートする場合はReferer:ヘッダを送信しないことを表します。これは他にポリシーが定められていない場合の、ユーザエージェントのデフォルトの動作です。 "origin"は、ページの生成元 (大まかにいえばスキーム、ホスト、ポート) をリファラとすることを表します。- "origin-when-cross-origin" は、異なる生成元へのナビゲートではリファラをスキーム、ホスト、ポートに制限します。同一生成元へのナビゲートでは、リファラのパスも含めます。
"unsafe-url"は、リファラに生成元とパスを含めることを表します (ただし、フラグメント、パスワード、ユーザ名は含めません)。これは生成元やパスの情報が TLS で保護されたリソースからセキュアでない生成元へ漏えいしますので、安全ではありません。
sizesHTML5- ソースのサイズのセットを示す、カンマ区切りの文字列を 1 個以上並べたリストです。それぞれのソースサイズの構成は以下のとおりです:
- メディア条件。最後のアイテムでは省略しなければなりません。
- ソースサイズ値。
ソースサイズ値は、画像の表示サイズを指定するものです。ユーザエージェントは
srcset属性で与えられたソースからひとつを選択するために、現在のソースサイズを使用します。そのとき、ソースは幅記述子 ('w') を使用して説明されます。選択したソースサイズは画像固有のサイズ (CSS スタイルが適用されていない場合の、画像の表示サイズ) に影響します。srcset属性がない場合、あるいは幅記述子 (w) を持つ値がない場合は、sizes属性の効果はありません。 src- 画像の URL です。この属性は、
<img>要素に必須です。srcsetをサポートするブラウザではsrcを、画素密度記述子1xの候補画像であるように扱います。ただし、この画素密度記述子がsrcsetで定義済みである、またはsrcsetに 'w' 記述子が含まれている場合を除きます。 srcsetHTML5- ユーザエージェントが使用可能なソース画像のセットを示す、カンマ区切りで文字列を 1 個以上並べたリストです。各々の文字列の構成は以下のとおりです:
- 画像のURL
- 任意で、ホワイトスペースの後に以下のいずれかを記述:
- 幅記述子。これは直後に '
w' を付加した正の整数です。幅記述子は実際の画素密度を計算するために、sizes属性で与えられたソースサイズで割られます。 - 画素密度記述子。これは直後に
'x'を付加した正の浮動小数点数です。
- 幅記述子。これは直後に '
記述子を指定しない場合は、ソースを既定の記述子
1xに割り当てます。幅記述子と画素密度記述子を同一の
srcset属性に混在させると無効になります。重複した記述子 (例えばひとつのsrcsetに 2 つのソースがあり、どちらも '2x' とする) も無効になります。ユーザエージェントには、利用可能なソースからひとつを選択する裁量があります。これは、ユーザ設定や帯域幅の条件などに基づいて選択を適合させるような、かなりの裁量が与えられています。
width- 画像固有の幅を HTML5 の CSS ピクセルまたは HTML 4 のピクセル、または割合で指定します。
usemap- 要素に関連付けられた イメージマップ の部分 URL ('#' で始まる) です。
vspace非推奨 HTML4.01, 廃止 HTML5- 画像の上下に挿入する空間の幅をピクセル単位で指定します。
サポートされた画像形式
HTML 標準では、サポートすべき画像形式のリストを提示していません。そのため、ユーザエージェントごとにサポートする形式が異なります。Gecko は次の画像形式をサポートしています:
CSS との関係
CSS について、<img> は置換要素です。これはベースラインがありません。つまり vertical-align: baseline を伴うインライン形式のコンテキスト内で使用したときに、画像の下端はコンテナのベースラインに揃えられるでしょう。
画像はその種類に応じて固有の寸法を持つことができます。ただし、必須ではありません。例えば SVG 画像は、固有の寸法を持ちません。
例 1
<img src="mdn-logo-sm.png" alt="MDN">
例 2: 画像リンク
<a href="https://developer.mozilla.org/"><img src="mdn-logo-sm.png" alt="MDN"></a>
例 3: srcset 属性を使う
srcset 属性をサポートするブラウザでは src 属性を、1x の候補とします。
<img src="mdn-logo-sm.png"
alt="MDN"
srcset="mdn-logo-HD.png 2x">
例 4: srcset および sizes 属性を使う
srcset をサポートするブラウザは、'w' 記述子を使用している場合に src 属性を無視します。メディア条件 (min-width: 600px) にマッチすると画像の幅は 200px に、そうでない場合は 50vw 幅 (ビューポートの幅の 50%) になります。
<img src="clock-demo-thumb-200.png"
alt="Clock"
srcset="clock-demo-thumb-200.png 200w, clock-demo-thumb-400.png 400w"
sizes="(min-width: 600px) 200px, 50vw">
仕様
| 仕様書 | 策定状況 | コメント |
|---|---|---|
| Referrer Policy referrer attribute の定義 |
草案 | referrerpolicy 属性を追加。 |
| WHATWG HTML Living Standard <img> の定義 |
現行の標準 | |
| HTML5 <img> の定義 |
勧告 | |
| HTML 4.01 Specification <img> の定義 |
勧告 |
ブラウザ実装状況
| 機能 | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|---|---|
| 基本サポート | (有) | (有) | (有) | (有) | (有) | (有) |
srcset |
34.0 | (有) | 32.0 (32.0)[2] | 未サポート | 21 | 7.1 |
referrerpolicy |
46.0[1] | ? | 42.0 (42.0)[3] | ? | ? | ? |
| 機能 | Android | Android Webview | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile | Chrome for Android |
|---|---|---|---|---|---|---|---|
| 基本サポート | (有) | (有) | (有) | (有) | (有) | (有) | (有) |
srcset |
? | 34.0 | 未サポート | 未サポート | 21 | iOS 8 | 34.0 |
referrerpolicy |
? | 46.0 [1] | 42.0 (42.0)[3] | ? | ? | ? | 46.0[1] |
[1] referrerpolicy として実装。flag で制御されています。
[2] 設定で制御する方式で実装しています。
[3] 設定 network.http.enablePerElementReferrer で制御しており、既定値は false です。Firefox 42 から Firefox 44 では、referrer という名前の属性でした。