HTML の <img> 要素は、文書に画像を埋め込みます。

コンテンツカテゴリ フローコンテンツ記述コンテンツ、埋め込みコンテンツ、知覚可能コンテンツ。要素が usemap 属性を持つ場合は、対話型コンテンツのカテゴリの一角にもなります。
許可されている内容 なし。これは空要素です。
タグの省略 開始タグは必須。終了タグを記述してはならない。
許可されている親要素 埋め込みコンテンツを受け入れるすべての要素。
許可されている ARIA ロール すべて
DOM インターフェイス HTMLImageElement

属性

この要素にはグローバル属性があります。

alt
この属性は、画像を説明する代替文字列を定義します。画像の URL が間違っている場合や、画像が対応する画像形式に含まれていない場合、画像がダウンロード中の場合にこの文字列を表示します。

メモ: ブラウザーは、要素から参照された画像を常に表示するとは限りません。視覚ブラウザー以外のブラウザー(視覚障がい者向けの聴覚ブラウザーなど)で閲覧された場合、ユーザーが画像を非表示に設定している場合、画像が無効であったり未対応の画像形式であったりしてブラウザーが画像を表示できない場合などです。このような場合、ブラウザーは、画像をこの要素の alt 属性で定義された文字列に置き換えます。このような理由から、 alt には可能な限り役に立つ値を指定するべきです。

メモ: この属性を省略すると、画像がコンテンツの鍵となる部分であり、同等の文字列表現を行うことができないことを表します。この属性に空文字列を設定すると(alt="")、この画像がコンテンツにおいて重要な箇所ではないことを示し、視覚ブラウザーではない場合は表示を省略することがあります。

crossorigin HTML5
これは列挙型の属性で、関連する画像の取得の際に CORS を使用しなければならないかどうかを示します。 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: ヘッダーに関わらず)は画像が汚染され、その使用も制限されます。
この属性を指定しない場合は、リソースが CORS 要求なしで取得され (Origin: HTTP ヘッダーを送信せずに取得)、 <canvas> 要素での汚染されない使用が妨げられます。この属性が無効である場合は、列挙型のキーワードに anonymous が指定されたものとして扱います。詳しくは CORS 設定属性を参照してください。
decoding

ブラウザ―に画像のデコードのヒントを提供します。以下のような値が使用できます。

sync
他のコンテンツと不可分の表示として、画像を同期的にデコードします。
async
他のコンテンツの表示が遅れないように、画像を非同期的にデコードします。
auto
既定のモードで、デコード方式を指定しません。ブラウザーはユーザーのために最良の方法を選択します。
height
画像固有の高さをピクセル値で指定します。HTML 4 では、高さをピクセル値またはパーセント値で指定できます。一方 HTML5 では、ピクセル値で指定しなければなりません。
ismap
この真偽値を持つ属性は、画像がサーバーサイドマップの一部であるかを示します。そうである場合は、クリック位置の正確な座標をサーバーに送信します。

メモ: この属性は <img> 要素が、有効な href 属性を持つ <a> 要素の子孫である場合に限り許可されます。

referrerpolicy
リソースを読み込む際に、どのリファラーを使用するかを示す文字列です。
  • no-referrer: Referer ヘッダーを送信しないことを表します。
  • no-referrer-when-downgrade: TLS (HTTPS) を使用せずにあるオリジンへナビゲートする場合は、 Referer ヘッダーを送信しないことを表します。これは他にポリシーが定められていない場合の、ユーザーエージェントの既定の動作です。
  • origin: そのページのオリジンのスキーム、ホスト、ポートを Referer ヘッダーに含めます。
  • origin-when-cross-origin: 異なるオリジンへのナビゲーションでは、リファラーをスキーム、ホスト、ポートのみに制限します。同一のオリジンへのナビゲーションでは、リファラーのフルパスを含めます。
  • unsafe-url: Referer ヘッダーにオリジンとパスを含めることを表します(ただし、フラグメント、パスワード、ユーザー名は含めません)。これはオリジンやパスの情報が TLS で保護されたリソースからセキュアでないオリジンへ漏えいしますので、安全ではありません。
sizesHTML5
ソースのサイズのセットを示す、カンマ区切りの文字列を1個以上並べたリストです。それぞれのソースサイズの構成は以下のとおりです。
  1. メディア条件。最後のアイテムでは省略しなければなりません。
  2. ソースサイズ値。

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

src
画像の URL です。この属性は、 <img> 要素に必須です。 srcset に対応するブラウザでは src を、画素密度記述子 1x の候補画像であるように扱います。ただし、この画素密度記述子が srcset で定義済みである、または srcset に 'w' 記述子が含まれている場合を除きます。
srcsetHTML5
ユーザーエージェントが使用可能なソース画像のセットを示す、カンマ区切りで文字列を 1 個以上並べたリストです。各々の文字列の構成は以下のとおりです:
  1. 画像のURL
  2. 任意で、ホワイトスペースの後に以下のいずれかを記述:
    • 幅記述子。これは直後に 'w' を付加した正の整数です。幅記述子は実際の画素密度を計算するために、sizes 属性で与えられたソースサイズで割られます。
    • 画素密度記述子。これは直後に 'x' を付加した正の浮動小数点数です。

記述子を指定しない場合は、ソースを既定の記述子 1x に割り当てます。

幅記述子と画素密度記述子を同一の srcset 属性に混在させると無効になります。重複した記述子 (例えばひとつの srcset に2つのソースがあり、どちらも '2x' とする) も無効になります。

ユーザーエージェントには、利用可能なソースからひとつを選択する裁量があります。これは、ユーザー設定や帯域幅の条件などに基づいて選択を適合させるような、かなりの裁量が与えられています。

width
画像固有の幅をピクセル値で指定します。 HTML 4 では、パーセント値またはピクセル値を受け入れます。一方 HTML5 では、ピクセル値のみ受け入れます。
usemap
要素に関連づけられた イメージマップの部分 URL ('#' で始まる) です。

使用上のメモ: <img> 要素が <a> 又は <button> 要素の子孫である場合は、この属性を使用することはできません。

廃止された属性

align
周囲の文脈に対する画像の配置を指定します。 HTML5 では、代わりに CSS の float プロパティや vertical-align プロパティを使用してください。要素ボックス内の画像の位置を示すために、 object-position プロパティを使用することもできます。
top
vertical-align: top; 又は vertical-align: text-top; と等価です。
middle
vertical-align: -moz-middle-with-baseline; と等価です。
bottom
値の既定値はなく vertical-align: unset; 又は vertical-align: initial; と等価です。
left
float: left; と等価です。
right
float: right; と等価です。
border
画像の周りの境界線の幅を指定します。 HTML5 では、代わりに CSS の border プロパティを使用してください。
hspace
画像の左右に挿入する空間の幅をピクセル単位で指定します。HTML5 では、代わりに CSS の margin プロパティを使用してください。
longdesc HTML5 で廃止
画像の詳細な説明へのリンクです。有効な値は、 URL または要素の id です。

この属性は HTML 5.0 で廃止されました。最新の W3C のバージョンである HTML 5.2 でも言及されていますが、一方、 WHATWG の HTML Living Standard では完全に削除されています。

この属性はもう使用しないでください。代わりに、 aria-describedby 又は aria-details のような WAI-ARIA の代替手段を検討してください。

name 非推奨 HTML4.01, HTML5 で廃止
要素の名前です。これは、後方互換性のために HTML 4 でのみ対応しています。代わりに id 属性を使用してください。
vspace 非推奨 HTML4.01HTML5 で廃止
画像の上下に挿入する空間の幅をピクセル単位で指定します。HTML5 では、代わりに CSS の margin プロパティを使用してください。

対応する画像形式

HTML 標準では、対応すべき画像形式のリストを提示していません。そのため、ユーザーエージェントごとに対応する形式が異なります。

Firefox

Firefox が対応している画像形式は次の通りです。

CSS との関係

CSS では、 <img>置換要素です。これはベースラインがありません。つまり vertical-align: baseline を伴うインライン整形文脈内で使用したときに、画像の下端はコンテナーのベースラインに揃えられます。

object-position プロパティを使用して、要素ボックス内の画像の位置を指定したり、 object-fit プロパティを使用して、ボックス内の画像の寸法を調整したり(例えば、クリッピングが必要な時に画像をボックスに合わせるか埋めるか)することができます。

画像の種類に応じて、固有の寸法を持つことができます。ただし、固有の寸法が必須ではない画像形式があります。例えば SVG 画像は、固有の寸法を持ちません。つまり、 SVG 画像には <svg> 要素に width または height が設定されていない限り、固有の寸法はありません。

エラー

画像の読み込みや描画の際にエラーが発生した場合は、 error イベントを処理するために onerror イベントハンドラーが設定されていれば、イベントハンドラーが呼び出されます。これは、以下のような状況で発生します。

  • src 属性が空または null である。
  • src で指定した URL が、ユーザーが現在表示しているページの URL と同じである。
  • 指定した画像は、読み込みを妨げる何らかの異常がある。
  • 指定した画像のメタデータは、寸法の読み取りができない何らかの異常がある。さらに、<img> 要素の属性で寸法を指定していない。
  • 指定した画像はユーザーエージェントが対応していない形式である。

例1: 代替テキスト

<img src="mdn-logo-sm.png" alt="MDN">

MDN

<a href="/"><img src="mdn-logo-sm.png" alt="MDN"></a>

MDN

例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 属性を無視します。 (max-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="(max-width: 600px) 200px, 50vw">

アクセシビリティの考慮事項

意味のある代替説明を書く

alt 属性の値は明確で簡潔に画像の内容を説明するものにしてください。画像そのもの存在を説明するものであったり、画像のファイル名であったりするべきではありません。画像が言葉で説明できるものではなく、 alt 属性を意図的に省略する場合は、画像が伝えようとしていることの内容を他の方法で表すように考慮してください。

悪い例

<img alt="image" src="penguin.jpg">

良い例

<img alt="海岸に立っているイワトビペンギン" src="penguin.jpg">

alt 属性が画像にない場合、読み上げソフトによっては代わりに画像のファイル名を読み上げることがあります。ファイル名が画像の内容を表していない場合、これが操作を混乱させる可能性があります。

title 属性

The title 属性alt 属性の代わりに利用することはできません。加えて、 alt 属性の値を同じ画像の title 属性に複製して宣言することは避けてください。このようにすると、読み上げソフトが説明を二回読み上げ、操作を混乱させる可能性があります。

title 属性は、画像の alt の説明と組み合わせた補助的な説明として使用するべきでもありません。画像にキャプションが必要であれば、 figure 及び figcaption 要素と組み合わせて使用してください。

仕様書

仕様書 状態 備考
Referrer Policy
referrer attribute の定義
勧告候補 referrerpolicy 属性を追加。
HTML Living Standard
<img> の定義
現行の標準  
HTML5
<img> の定義
勧告  
HTML 4.01 Specification
<img> の定義
勧告

 

ブラウザーの対応

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応 あり あり あり あり あり あり
align あり あり あり あり あり あり
alt あり あり あり あり あり あり
border あり あり あり あり あり あり
crossorigin あり あり あり あり あり あり
height あり あり あり あり あり あり
hspace あり あり あり あり あり あり
ismap あり あり あり あり あり あり
longdesc あり あり あり あり あり あり
name あり あり あり あり あり あり
onerror あり ?51 ? あり あり
referrerpolicy51 なし50 なし38 ?
sizes あり あり あり あり あり あり
src あり あり あり あり あり あり
srcset34 あり

38

32 — 521

なし218
usemap あり あり あり あり あり あり
vspace あり あり あり あり あり あり
width あり あり あり あり あり あり
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応 あり あり あり あり あり あり あり
align あり あり あり あり あり あり あり
alt あり あり あり あり あり あり あり
border あり あり あり あり あり あり あり
crossorigin あり あり あり あり あり あり あり
height あり あり あり あり あり あり あり
hspace あり あり あり あり あり あり あり
ismap あり あり あり あり あり あり あり
longdesc あり あり あり あり あり あり あり
name あり あり あり あり あり あり あり
onerror あり あり ?51 あり あり あり
referrerpolicy5151 なし5038 ?5.0
sizes あり あり あり あり あり あり あり
src あり あり あり あり あり あり あり
srcset3434 あり

38

32 — 521

218 あり
usemap あり あり あり あり あり あり あり
vspace あり あり あり あり あり あり あり
width あり あり あり あり あり あり あり

1. From version 32 until version 52 (exclusive): this feature is behind the dom.image.srcset.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.

関連情報