<img>: 画像埋め込み要素
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
<img>
は HTML の要素で、文書に画像を埋め込みます。
試してみましょう
上記の例では、 <img>
要素の使い方を示しています。
src
属性は必須で、埋め込みたい画像へのパスを入れます。alt
属性は、この画像のテキストによる代替情報を保持します。これは必須であり、アクセシビリティに非常に役立つものです。スクリーンリーダーは、この属性値をユーザーに読み上げるので、画像の意味が分かります。また、ネットワークエラーやコンテンツのブロック、リンク切れ等の理由で画像が読み込めなかった場合にも代替テキストが表示されます。
他にも、様々な目的で指定できる属性がたくさんあります。
- セキュリティとプライバシーのためのリファラー/CORS 制御。
crossorigin
およびreferrerpolicy
を参照してください。 width
とheight
の両方を使用して画像の固有の寸法を設定すると、画像を読み込む前に場所を確保し、コンテンツのレイアウトが移動することを防ぐことができます。sizes
およびsrcset
を使用したレスポンシブ画像のヒント (<picture>
要素とレスポンシブ画像のチュートリアルもご覧ください)。
対応している画像形式
HTML 標準では、対応する画像形式を指定していないので、ユーザーエージェントによって対応する画像形式は異なります。
メモ: 画像ファイルの種類と形式ガイド には、画像ファイルとウェブブラウザーの対応に関する包括的な情報があります。 この節は概要のみです。
ウェブで最もよく使われる画像ファイル形式は、以下の通りです。
- APNG (Animated Portable Network Graphics) — 可逆性のあるアニメーションシーケンスに適しています(GIF はパフォーマンスが劣る)
- AVIF (AV1 Image File Format) — 高い性能により、画像とアニメーションの両方に適しています。
- GIF (Graphics Interchange Format) — シンプルな画像やアニメーションに適しています。
- JPEG (Joint Photographic Expert Group image) — 静止画の非可逆圧縮に適しています(現在最も普及しています)。
- PNG (Portable Network Graphics) — 静止画の可逆圧縮に適しています(JPEG より若干画質が良い)。
- SVG (Scalable Vector Graphics) — ベクター画像形式。異なるサイズでも正確に描画する必要がある画像に使用します。
- WebP (Web Picture format) — 画像とアニメーションの両方に優れた選択です。
WebP や AVIF などは、PNG、JPEG、GIF よりはるかに性能が良く、静止画と動画の両方で使えるのでおすすめします。
SVG は、異なるサイズでも正確に描画する必要がある画像に推奨される形式であることに変わりはありません。
画像読み込みエラー
画像の読み込みまたは描画の間にエラーが発生した場合で、かつ onerror
イベントハンドラーが error
イベントを扱うよう設定されていた場合は、イベントハンドラーが呼び出されます。これは例えば次のように、様々な状況で発生します。
src
属性が空 (""
) またはnull
である。- 指定された
src
の URL が現在ユーザーがいるページの URL と同じである。 - 指定された画像が何らかの理由で読み込みが妨害され、中止された。
- 指定された画像のメタデータが、寸法を受け取ることができないなどの理由で読み込みが中止され、かつ
<img>
要素の属性に寸法が指定されていなかった場合。 - 指定された画像が、ユーザーエージェントが対応している形式ではない場合。
属性
この要素にはグローバル属性があります。
alt
-
ページ内の画像を置き換えることができるテキストを定義します。
メモ: ブラウザーは常に画像を表示するわけではありません。ブラウザーが画像を表示しない状況はいくつかがあります。
- 視覚ブラウザー以外のブラウザー(視覚障碍者向けのものを含む)で閲覧された場合
- ユーザーが画像を非表示に設定している場合(帯域の節約、プライバシー上の理由)
- 画像が無効であったり未対応の画像形式であったりした場合
このような場合、ブラウザーは、画像をこの要素の
alt
属性で定義された文字列に置き換えます。このような理由から、alt
には可能な限り役に立つ値を指定するべきです。この属性に空文字列を設定すると (
alt=""
)、この画像がコンテンツにおいて重要な箇所ではないことを示し、視覚ブラウザーではない場合はレンダリングを省略することがあります。視覚ブラウザーでは、alt
属性が空欄で、画像の表示に失敗した場合は、壊れた画像のアイコンの表示が省略される場合もあります。この属性は画像をテキストにコピー&ペーストした場合や、リンクされた画像をブックマークに保存したときにも使用されます。
attributionsrc
Experimental-
ブラウザーに画像リクエストとともに
Attribution-Reporting-Eligible
ヘッダーを送信するように指定します。サーバー側では、この機能を使用して、
Attribution-Reporting-Register-Source
またはAttribution-Reporting-Register-Trigger
ヘッダーをレスポンスで送信し、それぞれ画像ベースの帰属ソースまたは帰属トリガーを登録します。どのレスポンスヘッダーを送り返すべきかは、登録をトリガーしたAttribution-Reporting-Eligible
ヘッダーの値によって異なります。ブラウザーが画像ファイルを含むレスポンスを受信すると、対応するソースまたはトリガーイベントがオフになります。
メモ: 詳しくは帰属報告 API を参照してください。
この属性には、設定できるバージョンが 2 つあります。
- 論理属性、すなわち
attributionsrc
名のみ。これは、Attribution-Reporting-Eligible
ヘッダーがsrc
属性が指し示すのと同じサーバーに送信されることを指定します。これは、帰属元やトリガー登録を同じサーバーで処理する場合に適しています。帰属トリガーを登録する場合、このプロパティは任意であり、省略した場合は論理値が使用されます。 - 1 つ以上の URL を含む値、例えば次のようなものです。
html<img src="image-file.png" alt="My image file description" attributionsrc="https://a.example/register-source https://b.example/register-source" />
これは、リクエストされたリソースが管理下のサーバーにない場合や、別のサーバーでの帰属元の登録を処理したい場合に便利です。この場合、
attributionSrc
の値として1つまたは複数のURLを指定することができます。リソースへのリクエストが発生すると、Attribution-Reporting-Eligible
ヘッダーが、リソースのオリジンに加えて、attributionSrc
で指定された URL に送信されます。これらの URL は、登録を完了するために、Attribution-Reporting-Register-Source
またはAttribution-Reporting-Register-Trigger
ヘッダーを適切に返すことができます。メモ: 複数の URL を指定すると、同じ機能に複数の帰属元を登録することができます。例えば、成功を測定しようとしている異なるキャンペーンがあり、異なるデータについて異なるレポートを生成する必要がある場合などです。
- 論理属性、すなわち
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
を参照してください。許可されている値は次の通りです。
elementtiming
-
PerformanceElementTiming
API による監視のために画像をマークします。指定された値は、監視される画像要素の識別子になります。elementtiming
属性のページも参照してください。 fetchpriority
-
画像を取得する際に使用する相対的な優先順位のヒントを提供します。許可されている値は次の通りです。
high
-
他の画像と比較して高い優先度で読み取ります。
low
-
他の画像と比較して低い優先度で読み取ります。
auto
-
フェッチ優先度に優先順位を設定しないでください。 これが既定値です。 値がない場合や無効な値が設定されている場合に使用されます。
詳しくは
HTMLImageElement.fetchPriority
を参照してください。 height
-
画像固有の高さをピクセル値で指定します。単位のない整数でなければなりません。
ismap
-
論理属性で、この画像がサーバーサイドマップの一部であるかを示します。そうである場合は、クリック位置の正確な座標をサーバーに送信します。
loading
-
ブラウザーがどのように画像を読み込むかを示します。
eager
-
画像が現在可視ビューポートに入っているかどうかにかかわらず、直ちに画像を読み込みます (これが既定値です)。
lazy
-
画像がブラウザーで定義されたビューポートからの距離に達するまで、画像の読み込みを遅延させます。これは、画像が必要とされるのが合理的に確実になるまで、処理に必要なネットワークやストレージの帯域幅を使用しないようにするためです。これは一般的に、ほとんどの典型的な使用法において、コンテンツの性能を向上させることができます。
メモ: 読み込みが延期されるのは JavaScript が有効になっているときだけです。これはトラッキング対策であり、スクリプトが無効になっているときにユーザーエージェントが遅延読み込みに対応している場合でも、サーバーがいつ何枚の画像が要求されたかを追跡できるようにページのマークアップに画像を戦略的に配置することで、サイトがセッション全体を通してユーザーのおおよそのスクロール位置を追跡することが可能になるからです。
メモ: 画像の
loading
がlazy
に設定されていると、たとえ読み込みによって表示が変更されるとしても、可視要素と交差しない場合は決して読み込まれません。未読み込みの画像はwidth
およびheight
が0
であるためです。遅延読み込みの画像にwidth
およびheight
を設定すると、この問題が解決され、仕様で推奨されているベストプラクティスとなります。また、レイアウトのずれを防ぐことにも役立ちます。 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個以上並べたリストです。それぞれのソースサイズの構成は以下のとおりです。
- メディア条件。リスト内の最後のアイテムでは省略しなければなりません。
- ソースサイズ値。
メディアの状態はビューポートのプロパティで記述するものであり、画像のプロパティではありません。例えば、
(max-height: 500px) 1000px
は、ビューポートの高さが 500px 以下であれば 1000px 幅のソースを使用することを提案します。ソースサイズ値は、画像の表示サイズを指定するものです。ユーザーエージェントは
srcset
属性で与えられたソースからひとつを選択するために、現在のソースサイズを使用します。そのとき、ソースは幅記述子 ('w
') を使用して説明します。選択したソースサイズは画像の固有の寸法(CSS スタイルが適用されていない場合の、画像の表示サイズ)に影響します。srcset
属性がない場合、あるいは幅記述子 (w
) を持つ値がない場合は、sizes
属性の効果はありません。 src
-
画像の URL です。
<img>
要素に必須です。srcset
に対応するブラウザーではsrc
を、画素密度記述子1x
の候補画像であるように扱います。ただし、この画素密度記述子がsrcset
で定義済みである、またはsrcset
に 'w
' 記述子が含まれている場合を除きます。 srcset
-
ユーザーエージェントが使用可能なソース画像のセットを示す、カンマ区切りで文字列を 1 個以上並べたリストです。各々の文字列の構成は以下のとおりです。
-
画像の URL
-
任意で、ホワイトスペースの後に以下のいずれかを記述します。
- 幅記述子(正の整数の直後に
w
を付加したもの)。幅記述子は実際の画素密度を計算するために、sizes
属性で与えられたソースサイズで割られます。 - 画素密度記述子(正の浮動小数点数の直後に
x
を付加したもの)。
- 幅記述子(正の整数の直後に
記述子を指定しない場合は、ソースを既定の記述子
1x
に割り当てます。幅記述子と画素密度記述子を同一の
srcset
属性に混在させると無効になります。重複した記述子(例えばひとつのsrcset
に2つのソースがあり、どちらも '2x
' とする)も無効になります。srcset
属性が幅の記述子を使用した場合、sizes
属性も指定しなければなりません。そうでなければ、srcset
自体が無視されます。ユーザーエージェントには、利用可能なソースからひとつを選択する裁量があります。これは、ユーザー設定や帯域幅の条件などに基づいて選択を適合させるような、かなりの裁量が与えられています。例としてはレスポンシブ画像のチュートリアルをご覧ください。
-
width
-
画像固有の幅をピクセル値で指定します。単位のない整数でなければなりません。
usemap
非推奨の属性
align
非推奨-
周囲のコンテキストに対する画像の配置を指定します。代わりに CSS の
float
プロパティやvertical-align
プロパティを使用してください。使用できる値は次の通りです。 border
非推奨hspace
非推奨-
画像の左右に挿入する空間の幅をピクセル単位で指定します。代わりに CSS の
margin
プロパティを使用してください。 longdesc
非推奨-
画像の詳細な説明へのリンクです。有効な値は、 URL または要素の
id
です。メモ: この属性は、最新の W3C のバージョンである HTML 5.2 でも言及されていますが、 WHATWG の HTML 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
が設定されていない限り、固有の寸法はありません。
アクセシビリティ
意味のある代替説明を書く
alt
属性の値は明確で簡潔に画像の内容を説明するものにしてください。画像そのもの存在を説明するものであったり、画像のファイル名であったりするべきではありません。画像が言葉で説明できるものではなく、 alt
属性を意図的に省略する場合は、画像が伝えようとしていることの内容を他の方法で表すように考慮してください。
悪い例
<img alt="画像" src="penguin.jpg" />
良い例
<img alt="海岸に立っているイワトビペンギン" src="penguin.jpg" />
簡単なアクセシビリティのテストとして、alt
属性の内容を、その前後のテキストコンテンツと併せて読み、画像と同じ意味が伝わるかどうかを確認してください。例えば、画像の前に「旅行中、小さくてかわいい動物を見つけました。」という文がある場合、「悪い例」ではスクリーンリーダーによって「旅行中、小さくてかわいい動物を見つけました。画像」と読み上げられますが、これは意味をなしません。一方、「よい例」ではスクリーンリーダーによって「旅行中、小さくてかわいい動物を見つけました。海岸に立っているイワトビペンギン」と読み上げられ、意味をなします。
例えば、アクションを起動するために使用される画像(<a>
や <button>
要素内にネストされた画像)については、alt
属性値内に起動されるアクションを記述することを考えてください。例えば、alt="右向き矢印"
の代わりに alt="次のページ"
と記述できます。また、title
属性内に任意でさらに詳しい説明を追加することも検討できます。これは、ユーザーが要求した場合にスクリーンリーダーによって読み上げられる場合があります。
画像に alt
属性が指定されていない場合、一部のスクリーンリーダーでは代わりに画像のファイル名が読み上げられることがあります。ファイル名が画像の内容を適切に表していない場合、混乱を招く可能性があります。
SVG を画像として識別
VoiceOver のバグにより、VoiceOver は SVG 画像を画像として正しくアナウンスしません。SVG のソースファイルを持つすべての <img>
要素に role="img"
を記載し、支援技術が SVG を画像コンテンツとして正しくアナウンスするようにしてください。
<img src="mdn.svg" alt="MDN" role="img" />
title 属性
title
属性を alt
属性の代わりに利用することはできません。加えて、 alt
属性の値を同じ画像の title
属性に複製して宣言することは避けてください。このようにすると、読み上げソフトが説明を二回読み上げ、操作を混乱させる可能性があります。
title
属性は、画像の alt
の説明と組み合わせた補助的な説明として使用するべきでもありません。画像にキャプションが必要であれば、 figure
および figcaption
要素と組み合わせて使用してください。
title
属性の値は、よくツールチップとして、画像の上でカーソルを停止させた後で間もなく表示されます。これはユーザーに追加の情報を提供することができますが、ユーザーが必ず見ると仮定してはいけません。ユーザーはキーボードやタッチパネルしか持っていないかもしれません。ユーザーが見ることが特に重要または有益である情報があるのであれば、上記の title
を使用するのではなく、何らかの方法で行内に表示するべきです。
例
代替テキスト
以下の簡単な例では、ページに画像を埋め込み、アクセシビリティを向上させるために代替テキストを含めています。
<img src="favicon144.png" alt="MDN" />
画像リンク
この例は前回のを土台に、画像をリンクにする方法を示しています。これを行うのはとても単純です。 <img>
タグを <a>
の中に組み込むだけです。一つの考慮事項として、リンクが指すリソースを説明する代替テキストを作成するようにしてください。
<a href="https://developer.mozilla.org">
<img src="favicon144.png" alt="MDN サイトにおいでください" />
</a>
srcset 属性の使用
この例では、 srcset
属性によって高解像度版のロゴの参照を指定しています。これで、高解像度の端末では src
画像の代わりにこちらが読み込まれます。 src
で参照される画像は、 srcset
に対応しているユーザーエージェントでは、 1x
の候補としてカウントされます。
<img src="favicon72.png" alt="MDN ロゴ" srcset="favicon144.png 2x" />
srcset および sizes 属性の使用
src
属性は、 srcset
に対応しているユーザーエージェントで 'w
' 記述子を使用している場合は無視されます。 (max-width: 600px)
のメディア条件に一致すると、 200px の幅の画像 (200px にもっと近いもの) が読み込まれ、そうでなければ他の画像が読み込まれます。
<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 ヘッダー: プライバシーとセキュリティの考慮事項を参照してください。
技術的概要
コンテンツカテゴリー |
フローコンテンツ、
記述コンテンツ、
埋め込みコンテンツ、
知覚可能コンテンツ。要素が usemap 属性を持つ場合は、対話型コンテンツのカテゴリーの一角にもなります。
|
---|---|
許可されている内容 | なし。これは空要素です。 |
タグの省略 | 開始タグは必須。終了タグを記述してはなりません。 |
許可されている親要素 | 埋め込みコンテンツを受け入れるすべての要素。 |
暗黙の ARIA ロール |
|
許可されている ARIA ロール |
|
DOM インターフェイス | HTMLImageElement |
仕様書
Specification |
---|
HTML Standard # the-img-element |
ブラウザーの互換性
BCD tables only load in the browser
関連情報
<picture>
,<object>
,<embed>
要素- その他の画像に関する CSS プロパティ:
object-fit
,object-position
,image-orientation
,image-rendering
,image-resolution
- この要素の
HTMLImageElement
インターフェイス - HTML の画像
- 画像のファイル形式のガイド
- レスポンシブ画像