<img>: 画像埋め込み要素

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

試してみましょう

上記の例では、 <img> 要素の使い方を示しています。

  • src 属性は必須で、埋め込みたい画像へのパスを入れます。
  • alt 属性は画像のテキストによる説明で、必須ではありませんがアクセシビリティのために非常に有用です。 — スクリーンリーダーがこの説明を読み上げることで、画像が何を表すかをユーザーが知ることができます。また、ネットワークエラーやコンテンツのブロック、リンク切れ等の理由で画像が読み込めなかった場合にも代替テキストが表示されます。

他にも、様々な目的で指定できる属性がたくさんあります。

  • セキュリティとプライバシーのためのリファラー/CORS 制御。 crossorigin および referrerpolicy を参照してください。
  • widthheight の両方を使用して画像の固有の寸法を設定すると、画像を読み込む前に場所を確保し、コンテンツのレイアウトが移動することを防ぐことができます。
  • sizes および srcset を使用したレスポンシブ画像のヒント (<picture> 要素とレスポンシブ画像のチュートリアルもご覧ください)。

対応している画像形式

HTML 標準では、対応する画像形式を指定していないので、ユーザーエージェントによって対応する画像形式は異なります。

メモ: 画像ファイルの種類と形式ガイド には、画像ファイルとウェブブラウザーの対応に関する包括的な情報があります。 この節は概要のみです。

ウェブで最もよく使われる画像ファイル形式は、以下の通りです。

WebPAVIF などは、PNG、JPEG、GIF よりはるかに性能が良く、静止画と動画の両方で使えるのでおすすめします。 WebP は広く対応されていますが、 AVIF は Edge での対応が不足しています。

SVG は、異なるサイズでも正確に描画する必要がある画像に推奨される形式であることに変わりはありません。

画像読み込みエラー

画像の読み込みまたは描画の間にエラーが発生した場合で、かつ onerror イベントハンドラーが error イベントを扱うよう設定されていた場合は、イベントハンドラーが呼び出されます。これは例えば次のように、様々な状況で発生します。

  • src 属性が空 ("") または null である。
  • 指定された srcURL が現在ユーザーがいるページの URL と同じである。
  • 指定された画像が何らかの理由で読み込みが妨害され、中止された。
  • 指定された画像のメタデータが、寸法を受け取ることができないなどの理由で読み込みが中止され、かつ <img> 要素の属性に寸法が指定されていなかった場合。
  • 指定された画像が、ユーザーエージェントが対応している形式ではない場合。

属性

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

alt

この属性は、画像を説明する代替文字列を定義します。

メモ: ブラウザーは常に画像を表示するわけではありません。ブラウザーが画像を表示しない状況はいくつかがあります。

  • 視覚ブラウザー以外のブラウザー(視覚障碍者向けのものを含む)で閲覧された場合
  • ユーザーが画像を非表示に設定している場合(帯域の節約、プライバシー上の理由)
  • 画像が無効であったり未対応の画像形式であったりした場合

このような場合、ブラウザーは、画像をこの要素の alt 属性で定義された文字列に置き換えます。このような理由から、 alt には可能な限り役に立つ値を指定するべきです。

この属性に空文字列を設定すると (alt="")、この画像がコンテンツにおいて重要な箇所ではないことを示し、視覚ブラウザーではない場合はレンダリングを省略することがあります。視覚ブラウザーでは、 alt 属性が空欄で、画像の表示に失敗した場合は、壊れた画像のアイコンの表示が省略される場合もあります。

この属性は画像をテキストにコピー&ペーストした場合や、リンクされた画像をブックマークに保存したときにも使用されます。

crossorigin

関連する画像の取得の際に CORS を使用しなければならないかどうかを示します。 CORS リクエストから返されたCORS が有効な画像は、 <canvas> 要素で「汚染」されることなく再利用することができます。

crossorigin 属性が指定されていない場合は、 (Origin リクエストヘッダーがない) CORS 以外のリクエストが送信され、ブラウザーは画像が汚染されたものとしてマークし、その画像データへのアクセスを制限して、 <canvas> 要素での使用を防ぎます。

crossorigin 属性が指定されている場合は、(Origin リクエストヘッダーを伴う) CORS リクエストが送信されます。しかし、サーバーがオリジンのサイトによる画像データへのオリジン間アクセスを許可することをオプトインしない場合 (Access-Control-Allow-Origin レスポンスヘッダーが一切送信されていないか、送信された Access-Control-Allow-Origin レスポンスヘッダーにサイトのオリジンが含まれていない場合)、ブラウザーは画像を読み込むことをブロックし、開発ツールのコンソールに CORS エラーを記録します。

許可されている値:

anonymous

CORS リクエストは、資格情報を省略して (つまり、クッキーX.509 証明書Authorization リクエストヘッダーなしで) 送信されます。

use-credentials

CORS リクエストは、資格情報 (つまり、Cookie、X.509 証明書、 Authorization リクエストヘッダー) が含まれた状態で送信されます。サーバーが元のサイトとの資格情報の共有を選択する (Access-Control-Allow-Credentials: true レスポンスヘッダーを送り返す) ことをしなかった場合、ブラウザーは画像を汚染されたものとしてマークし、その画像データへのアクセスを制限します。

この属性の値が無効である場合は、列挙型のキーワードに anonymous が指定されたものとして扱われます。詳しくはCORS 設定属性を参照してください。

decoding

この属性は、ブラウザーが画像のデコードを他の DOM コンテンツのレンダリングと一緒に行い、より「正しく」見えるようにするのか (sync)、それとも他の DOM コンテンツを先にレンダリングして表示し、画像をデコードして後で表示するのか (async) のヒントを提供します。実際には、async は次の描画が画像のデコードを待たないことを意味します。

静的な <img> 要素に decoding を使用した場合、顕著な効果を認識することは困難です。画像ファイルが(ネットワークやキャッシュから)取得される間、最初は空の画像としてレンダリングされ、その後は独立して処理されるため、コンテンツの更新の「同期」はあまり意識されません。しかし、デコード中にレンダリングがブロックされることは、非常に小さいことが多いものの、計測可能です。より詳細な分析については、画像デコード属性は実際に何をしているのか を参照してください (tunetheweb.com, 2023)。

異なる decoding タイプを使用すると、 JavaScript を使って動的に <img> 要素を DOM に挿入する際に、より顕著な違いが生じます - 詳しくは HTMLImageElement.decoding を参照してください。

許可されている値は次の通りです。

sync

他の DOM コンテンツのレンダリングと同期して画像をデコードし、すべてを一緒に表示します。

async

他の DOM コンテンツをレンダリングして表示した後、非同期に画像をデコードします。

auto

デコードモードの優先順位はありません。ブラウザーがユーザーにとって最適なものを決定します。これは既定値です。

elementtiming

PerformanceElementTiming API による監視のために画像をマークします。指定された値は、監視される画像要素の識別子になります。elementtiming 属性のページも参照してください。

fetchpriority Experimental

画像を取得する際に使用する相対的な優先順位のヒントを提供します。許可されている値は次の通りです。

high

他の画像と比較して読み込みの優先度が高いことを示します。

low

他の画像と比較して読み込みの優先度が低いことを示します。

auto

既定値。他の画像との相対的な読み込みの優先順位を自動的に決定することを指示します。

height

画像固有の高さをピクセル値で指定します。単位のない整数でなければなりません。

メモ: heightwidth を記載することで、画像を読み込む前にブラウザーが画像の縦横比を計算することができるようになります。このアスペクト比は、画像を表示するために必要な空間を確保するために使用され、画像をダウンロードして画面に表示したときのレイアウトのずれを縮小したり、防止したりすることができます。レイアウトのずれを縮小することは、良い使い勝手とウェブパフォーマンスの主要な構成要素です。

ismap

論理属性で、この画像がサーバーサイドマップの一部であるかを示します。そうである場合は、クリック位置の正確な座標をサーバーに送信します。

メモ: この属性は <img> 要素が、有効な href 属性を持つ <a> 要素の子孫である場合に限り許可されます。これにより、ポインティングデバイスを持たないユーザーのフォールバック先を提供します。

loading

ブラウザーがどのように画像を読み込むかを示します。

  • eager
    • : 画像が現在可視ビューポートに入っているかどうかにかかわらず、直ちに画像を読み込みます (これが既定値です)。
  • lazy
    • : 画像がブラウザーで定義されたビューポートからの距離に達するまで、画像の読み込みを遅延させます。これは、画像が必要とされるのが合理的に確実になるまで、処理に必要なネットワークやストレージの帯域幅を使用しないようにするためです。これは一般的に、ほとんどの典型的な使用法において、コンテンツの性能を向上させることができます。

    メモ: 読み込みが延期されるのは JavaScript が有効になっているときだけです。これはトラッキング対策であり、スクリプトが無効になっているときにユーザーエージェントが遅延読み込みに対応している場合でも、サーバーがいつ何枚の画像が要求されたかを追跡できるようにページのマークアップに画像を戦略的に配置することで、サイトがセッション全体を通してユーザーのおおよそのスクロール位置を追跡することが可能になるからです。

referrerpolicy

リソースを読み込む際に、どのリファラーを使用するかを示す文字列です。

  • no-referrer: Referer ヘッダーを送信しないことを表します。
  • no-referrer-when-downgrade: あるオリジンTLS (HTTPS) を使用せずに移動した場合に、 Referer ヘッダーを送信しないことを表します。
  • origin: 送られるリファラーは、参照しているページページのオリジン、すなわちスキームホスト名ポート番号のみとなります。
  • origin-when-cross-origin: 異なるオリジンへの移動では、リファラーをスキーム、ホスト、ポートのみに制限します。同一のオリジンへの移動では、リファラーのフルパスを含めます。
  • same-origin: リファラーは同じオリジンに対しては送信されますが、オリジン間リクエストではリファラー情報が入りません。
  • strict-origin: プロトコルのセキュリティレベルが同等 (HTTPS→HTTPS) である場合は、リファラーとしてこの文書のオリジンが送信されますが、安全性の低い宛先 (HTTPS→HTTP) には送信されません。
  • strict-origin-when-cross-origin(既定値): 同一オリジンリクエストを行う際には完全な URL を送信し、セキュリティレベルが同等 (HTTPS→HTTPS) の場合はオリジンのみを送信し、安全性の低い宛先 (HTTPS→HTTP) にはヘッダーを送信しません。
  • unsafe-url: リファラーにはオリジンとパスを含めることを表します(ただし、フラグメント、パスワード、ユーザー名は含めません)。この値は安全ではありません。オリジンやパスの情報が TLS で保護されたリソースから安全でないオリジンへ漏えいするからです。
sizes

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

  1. メディア条件。リスト内の最後のアイテムでは省略しなければなりません。
  2. ソースサイズ値。

メディアの状態はビューポートのプロパティで記述するものであり、画像のプロパティではありません。例えば、 (max-height: 500px) 1000px は、ビューポートの高さが 500px 以下であれば 1000px 幅のソースを使用することを提案します。

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

src

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

srcset

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

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

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

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

srcset 属性が幅の記述子を使用した場合、 sizes 属性も指定しなければなりません。そうでなければ、 srcset 自体が無視されます。

ユーザーエージェントには、利用可能なソースからひとつを選択する裁量があります。これは、ユーザー設定や帯域幅の条件などに基づいて選択を適合させるような、かなりの裁量が与えられています。例としてはレスポンシブ画像のチュートリアルをご覧ください。

width

画像固有の幅をピクセル値で指定します。単位のない整数でなければなりません。

usemap

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

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

非推奨の属性

align 非推奨

周囲のコンテキストに対する画像の配置を指定します。代わりに CSSfloat プロパティや vertical-align プロパティを使用してください。使用できる値は次の通りです。

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; と等価です。

float: right; と等価です。

border 非推奨

画像の周りの境界線の幅を指定します。代わりに CSSborder プロパティを使用してください。

hspace 非推奨

画像の左右に挿入する空間の幅をピクセル単位で指定します。代わりに CSS の margin プロパティを使用してください。

longdesc 非推奨

画像の詳細な説明へのリンクです。有効な値は、 URL または要素の id です。

メモ: この属性は、最新の W3C のバージョンである HTML 5.2 でも言及されていますが、 WHATWGHTML Living Standard では完全に削除されています。将来が不確実なので、代わりに、aria-describedby またはaria-details のような WAI-ARIA の代替手段を使用してください。

name 非推奨

要素の名前です。代わりに id 属性を使用してください。

vspace 非推奨

画像の上下に挿入する空間の幅をピクセル単位で指定します。代わりに CSS の margin プロパティを使用してください。

CSS でのスタイル付け

<img>置換要素です。 display の値が既定で inline ですが、既定の寸法は埋め込まれた画像の内部的な値で定義されます。画像には border/border-radius, padding/margin, width, height, などのプロパティを設定することができます。

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

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

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

代替テキスト

以下の簡単な例では、ページに画像を埋め込み、アクセシビリティを向上させるために代替テキストを含めています。

html
<img src="favicon144.png" alt="MDN ロゴ" />

画像リンク

この例は前回のを土台に、画像をリンクにする方法を示しています。これを行うのはとても単純です。 <img> タグを <a> の中に組み込むだけです。一つの考慮事項として、リンクが指すリソースを説明する代替テキストを作成するようにしてください。

html
<a href="https://developer.mozilla.org">
  <img src="favicon144.png" alt="MDN サイトにおいでください" />
</a>

srcset 属性の使用

この例では、 srcset 属性によって高解像度版のロゴの参照を指定しています。これで、高解像度の端末では src 画像の代わりにこちらが読み込まれます。 src で参照される画像は、 srcset に対応しているユーザーエージェントでは、 1x の候補としてカウントされます。

html
<img src="favicon72.png" alt="MDN ロゴ" srcset="favicon144.png 2x" />

srcset および sizes 属性の使用

src 属性は、 srcset に対応しているユーザーエージェントで 'w' 記述子を使用している場合は無視されます。 (max-width: 600px) のメディア条件に一致すると、 200px の幅の画像 (200px にもっと近いもの) が読み込まれ、そうでなければ他の画像が読み込まれます。

html
<img
  src="clock-demo-200px.png"
  alt="時計"
  srcset="clock-demo-200px.png 200w, clock-demo-400px.png 400w"
  sizes="(max-width: 600px) 200px, 50vw" />

メモ: その場で大きさを変更してみるには、この例を別なページで表示させる必要があり、そうすればコンテンツ領域の大きさを実際に使用することができます。

セキュリティとプライバシーの考慮事項

<img> 要素の多くは無害な使用ですが、ユーザーのセキュリティとプライバシーに望ましくない結果をもたらす可能性もあります。詳細情報と緩和策については Referer ヘッダー: プライバシーとセキュリティの考慮事項を参照してください。

アクセシビリティの考慮

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

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

悪い例

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

良い例

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

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

SVG を画像として識別

VoiceOver のバグにより、VoiceOver は SVG 画像を画像として正しくアナウンスしません。SVG のソースファイルを持つすべての <img> 要素に role="img" (en-US) を記載し、支援技術が SVG を画像コンテンツとして正しくアナウンスするようにしてください。

html
<img src="mdn.svg" alt="MDN logo" role="img" />

title 属性

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

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

title 属性の値は、よくツールチップとして、画像の上でカーソルを停止させた後で間もなく表示されます。これはユーザーに追加の情報を提供することができますが、ユーザーが必ず見ると仮定してはいけません。ユーザーが見ることが特に重要または有益である情報があるのであれば、上記の title を使用するのではなく、何らかの方法で行内に表示するべきです。

技術的概要

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

仕様書

Specification
HTML Standard
# the-img-element

ブラウザーの互換性

BCD tables only load in the browser

関連情報