img

概要

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

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

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

属性

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

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

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

border 非推奨 HTML4.01廃止 HTML5
画像の周りの境界線の幅を指定します。
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
画像固有の高さを HTML5 の CSS ピクセルまたは HTML 4 のピクセル、または割合で指定します。
hspace 非推奨 HTML4.01, 廃止 HTML5
画像の左右に挿入する空間の幅をピクセル単位で指定します。
ismap
この真偽値を持つ属性は、画像がサーバサイドマップの一部であるかどうかを示します。その場合、クリック位置の正確な座標がサーバに送信されます。

使用補足: この属性は、<img> 要素が正しい href 属性を持つ <a> 要素の子要素である場合にのみ使用できます。

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 個以上並べたリストです。それぞれのソースサイズの構成は以下のとおりです:
  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
画像固有の幅を HTML5 の CSS ピクセルまたは HTML 4 のピクセル、または割合で指定します。
usemap
要素に関連付けられた イメージマップ の部分 URL ('#' で始まる) です。

使用補足: この属性は、<img> 要素が <a> 要素または <button> 要素の子要素である場合は使用できません。

vspace 非推奨 HTML4.01, 廃止 HTML5
画像の上下に挿入する空間の幅をピクセル単位で指定します。

サポートされた画像形式

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

CSS との関係

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

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

例 1

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

MDN

<a href="https://developer.mozilla.org/"><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] ? 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 という名前の属性でした。

関連情報

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

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