MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

HTML <img> 要素 (HTML 画像要素) は、ドキュメントに画像を表示します。

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

属性

他のすべての HTML 要素と同様に、この要素は グローバル属性 をサポートします。

align 非推奨 HTML4.01廃止 HTML5
画像の周りのコンテキストに対する画像の配置を指定します。HTML5 では、代わりに CSS の float プロパティや vertical-align プロパティを使用してください。
alt
この属性は、画像を説明する代替テキストを定義します。画像の URL が間違っている場合や指定された 画像の形式 が未対応のものであった場合、または画像がダウンロード中の場合にこのテキストを表示します。

ブラウザーは、要素から参照された画像を常に表示するわけではありません。視覚ブラウザー以外のブラウザー (視覚障がい者向けの聴覚ブラウザーなど) で閲覧された場合や、ユーザーが画像を非表示に設定している場合、または記述が正しくない場合や、指定された 画像形式 が未対応のものでブラウザーが画像を表示できない場合など、いくつかのケースがこれに該当します。このような場合にブラウザーは、画像をこの要素の alt 属性で定義されたテキストに置き換えます。このような理由から、alt には可能な限り役に立つ値を指定するべきです。

この属性を完全に省略すると、画像がコンテンツの鍵となる部分であり、同等のテキストがないことを示します。この属性に空文字列をセットする (alt="") と、この画像がコンテンツにおいて重要な箇所ではないことを示します。視覚型ではないブラウザーは、この要素の表現を省略する可能性があります。

border 非推奨 HTML4.01廃止 HTML5
画像の周りの境界線の幅を指定します。HTML5 では、代わりに CSS の border プロパティを使用してください。
crossorigin HTML5
この列挙型の属性は、関連画像を 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 ヘッダーに関わらず) は画像が汚染され、その使用も制限されます。
この属性を指定しない場合はリソースが CORS 要求なしで取得され (Origin: HTTP ヘッダーを送信せずに取得)、<canvas> 要素での汚染されない使用が妨げられます。この属性が無効である場合は、列挙型のキーワードに anonymous が指定されたものとして扱います。追加の情報は CORS 設定属性 を参照してください。
height
画像固有の高さをピクセル値で指定します。HTML 4 では、高さをピクセル値またはパーセンテージで指定できます。一方 HTML5 では、ピクセル値で指定しなければなりません。
hspace 非推奨 HTML4.01廃止 HTML5
画像の左右に挿入する空間の幅をピクセル単位で指定します。HTML5 では、代わりに CSS の margin プロパティを使用してください。
ismap
この真偽値を持つ属性は、画像がサーバーサイドマップの一部であるかを示します。そうである場合は、クリック位置の正確な座標をサーバーに送信します。

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

longdesc
画像の詳細な説明へのリンクです。有効な値は、URL または要素の id です。
name 非推奨 HTML4.01廃止 HTML5
要素の名前です。これは、後方互換性のために HTML 4 でのみサポートされています。代わりに id 属性を使用してください。
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> 要素の子要素である場合は使用できません。

vspace 非推奨 HTML4.01廃止 HTML5
画像の上下に挿入する空間の幅をピクセル単位で指定します。HTML5 では、代わりに CSS の margin プロパティを使用してください。

サポートする画像形式

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

CSS との関係

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

画像の種類に応じて、固有の寸法を持つことができます。ただし、固有の寸法が必須ではない画像形式があります。例えば SVG 画像は、固有の寸法を持ちません。

エラー

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

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

例 1: 代替テキスト

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

MDN

<a href="/">MDN<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 属性を無視します。メディア条件 (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] ? 50.0 (50.0) ? ? ?
onerror イベントハンドラー (有) ? 51 (51) ? (有) (有)
機能 Android Android Webview Edge Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile Chrome for Android
基本サポート (有) (有) (有) (有) (有) (有) (有) (有)
srcset ? 34.0 (有) 未サポート 未サポート 21 iOS 8 34.0
referrerpolicy ? 46.0 [1] 未サポート 50.0 (50.0) ? ? ? 46.0[1]
onerror イベントハンドラー ? (有) ? 51.0 (51) ? ? (有) (有)

[1] referrerpolicy として実装。flag で制御されています。

[2] 設定で制御する方式で実装しています。

関連情報

ドキュメントのタグと貢献者

 このページの貢献者: yyss, ethertank, Marsf
 最終更新者: yyss,