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

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

上記の例では、 <img> 要素のとてもシンプルな使い方を示しています。

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

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

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

対応している画像形式

HTML 標準では、対応しなければならない画像形式を指定していないので、ユーザーエージェントによって対応する画像形式は異なります。ウェブで最もよく使われている画像形式のリストを以下に示します。

ウェブ上で最も一般的に使用されている画像ファイル形式は以下の通りです。

略称 ファイル形式 MIME タイプ ファイル拡張子 概要
APNG Animated Portable Network Graphics image/apng .apng 劣化のない一連のアニメーションに最適 (GIF は性能が低い)。 AVIFWebP はより性能が高いが、ブラウザーの対応が狭い。
対応: Chrome, Edge, Firefox, Opera, Safari
AVIF AV1 Image File Format image/avif .avif

高性能でロイヤリティフリーの画像形式であるため、画像とアニメーションの両方に適している。 PNGJPEG よりもはるかに優れた圧縮を提供し、より高い色深度、アニメーションフレーム、透明度などに対応している。 AVIF を使用する場合は、よりブラウザーの対応状況が良い形式への代替を含めるべきであることに注意してください (つまり、 <picture> 要素を使用する)。
対応: Chrome, Opera, Firefox (設定で隠蔽)

GIF Graphics Interchange Format image/gif .gif 単純な画像やアニメーションに適しています。 PNG の方が劣化なしかつインデックスカラーの静止画に適しており、アニメーションシーケンスには WebP, AVIF, APNG を検討してください。
対応: Chrome, Edge, Firefox, IE, Opera, Safari
JPEG Joint Photographic Expert Group image image/jpeg .jpg, .jpeg, .jfif, .pjpeg, .pjp

静止画の非可逆圧縮に適しています (現在最も普及しています)。 PNG の方がより正確な画像の再現が必要な場合に適しており、 WebP/AVIF の方がより良い再現性と高い圧縮率の両方が必要な場合に適しています。
対応: Chrome, Edge, Firefox, IE, Opera, Safari

PNG Portable Network Graphics image/png .png

PNG は元画像をより正確に再現したい場合や、透明度が必要な場合には JPEG より好まれます。 WebP/AVIF はさらに優れた圧縮と再現性を提供しますが、ブラウザーの対応はより限定されています。
対応: Chrome, Edge, Firefox, IE, Opera, Safari

SVG Scalable Vector Graphics image/svg+xml .svg ベクター画像形式です。異なる大きさで正確に描画する必要があるユーザーインターフェース要素、アイコン、図などに最適です。
対応: Chrome, Edge, Firefox, IE, Opera, Safari
WebP Web Picture format image/webp .webp 画像とアニメーションの両方に最適です。 WebP は PNGJPEG よりもはるかに優れた圧縮を提供し、より高い色深度、アニメーションフレーム、透明度などに対応しています。 AVIF はわずかに優れた圧縮機能を提供していますが、ブラウザーがあまり対応しておらず、プログレッシブレンダリングにも対応していません。
対応: Chrome, Edge, Firefox, Opera, Safari

注: PNG、JPEG、GIF のような古い形式は、WebP や AVIF のような新しい形式と比較して性能が劣りますが、より広範囲の「歴史的な」ブラウザーが対応しています。新しい画像形式は、対応していないブラウザーが無視できるようになってきている (つまり、市場シェアがゼロに近づいてきている) ため、人気が高まってきています。

以下のリストにはウェブ上で見られる画像形式を挙げていますが、ウェブコンテンツでは避けた方が良いものがあります (一般的には、ブラウザーの対応が広くないか、より良い代替手段があるためです)。

略称 ファイル形式 MIME タイプ ファイル拡張子 説明
BMP Bitmap ファイル image/bmp .bmp Chrome, Edge, Firefox, IE, Opera, Safari
ICO Microsoft Icon image/x-icon .ico, .cur Chrome, Edge, Firefox, IE, Opera, Safari
TIFF Tagged Image File Format image/tiff .tif, .tiff Safari

注: 各画像形式の略語は、形式、その機能、ブラウザーの互換性に関する詳細な情報 (どのバージョンで対応が導入されたか、後に導入された可能性のある特定の特殊機能を含む) についてのより詳しい説明へとリンクしています。

注: ウェブブラウザーが対応している画像形式に関する、より包括的な情報については、画像ファイルの種類と形式ガイドを参照してください。こちらには、対応されているがウェブコンテンツでは推奨されていない画像形式 (例: ICO、BMP など)も含まれています。

画像読み込みエラー

画像の読み込みまたは表示の間にエラーが発生した場合、かつ onerror イベントハンドラーが error イベントを扱うよう設定されていた場合は、イベントハンドラーが呼び出されます。これはいくつもの状況がありえます。

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

属性

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

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

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

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

このような場合、ブラウザーは、画像をこの要素の 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 レスポンスヘッダーにサイトのオリジンが含まれていない場合)、ブラウザーは画像が汚染されていると判断し、画像データへのアクセスを制限し、 <canvas> 要素での使用を禁止します。

許可されている値:

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

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

decoding

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

sync
他のコンテンツと不可分の表示として、画像を同期的にデコードします。
async
他のコンテンツの表示が遅れないように、画像を非同期的にデコードします。
auto
既定のモードで、デコード方式を指定しません。ブラウザーはユーザーのために最良の方法を選択します。
height
画像固有の高さをピクセル値で指定します。
intrinsicsize
この属性はブラウザーに、画像の固有の寸法を無視し、この属性で指定された寸法であると見せかけるよう指示します。特に、画像がこれらの次元のラスターであって、画像の naturalWidth/naturalHeight はこの属性で指定された値が返されます。説明
ismap
この真偽値を持つ属性は、画像がサーバーサイドマップの一部であるかを示します。そうである場合は、クリック位置の正確な座標をサーバーに送信します。

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

loading
ブラウザーがどのように画像を読み込むかを示します。
  • eager: 画像が現在可視ビューポートに入っているかどうかにかかわらず、直ちに画像を読み込みます (これが既定値です)。
  • lazy: 画像がブラウザーで定義されたビューポートからの距離に達するまで、画像の読み込みを遅延させます。これは、画像が必要とされるのが合理的に確実になるまで、処理に必要なネットワークやストレージの帯域幅を使用しないようにするためです。これは一般的に、ほとんどの典型的な使用法において、コンテンツの性能を向上させることができます。
    注: 読み込みが延期されるのは JavaScript が有効になっているときだけです。これはトラッキング対策であり、スクリプトが無効になっているときにユーザーエージェントが遅延読み込みに対応している場合でも、サーバーがいつ何枚の画像が要求されたかを追跡できるようにページのマークアップに画像を戦略的に配置することで、サイトがセッション全体を通してユーザーのおおよそのスクロール位置を追跡することが可能になるからです。
referrerpolicy
リソースを読み込む際に、どのリファラーを使用するかを示す文字列です。
  • no-referrer: Referer ヘッダーを送信しないことを表します。
  • no-referrer-when-downgrade: TLS (HTTPS) を使用せずにあるオリジンへ移動する場合は、 Referer ヘッダーを送信しないことを表します。これは他にポリシーが定められていない場合の、ユーザーエージェントの既定の動作です。
  • origin: Referer ヘッダーにそのページのオリジンのスキーム、ホスト名ポート番号を含めます。
  • origin-when-cross-origin: 異なるオリジンへのナビゲーションでは、リファラーをスキーム、ホスト、ポートのみに制限します。同一のオリジンへのナビゲーションでは、リファラーのフルパスを含めます。
  • unsafe-url: Referer ヘッダーにオリジンとパスを含めることを表します (ただし、フラグメント、パスワード、ユーザー名は含めません)。これはオリジンやパスの情報が 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' とする) も無効になります。

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

width
画像固有の幅をピクセル値で指定します。
usemap
要素に関連づけられた イメージマップの部分的な URL ('#' で始まる) です。

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

非推奨の属性

align
周囲の文脈に対する画像の配置を指定します。もう使用するべきではありません。 — 代わりに CSSfloat プロパティや 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
画像の周りの境界線の幅を指定します。代わりに CSSborder プロパティを使用してください。
hspace
画像の左右に挿入する空間の幅をピクセル単位で指定します。代わりに CSS の margin プロパティを使用してください。
longdesc
画像の詳細な説明へのリンクです。有効な値は、 URL または要素の id です。

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

name
要素の名前です。代わりに id 属性を使用してください。
vspace
画像の上下に挿入する空間の幅をピクセル単位で指定します。HTML5 では、代わりに 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 が設定されていない限り、固有の寸法はありません。

代替テキスト

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

<img src="https://developer.mozilla.org/static/img/favicon144.png"
     alt="MDN ロゴ — MDN のテキストが入った恐竜のロゴ">

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

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

srcset 属性の使用

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

 <img src="https://developer.mozilla.org/static/img/favicon72.png"
      alt="MDN logo"
      srcset="https://developer.mozilla.org/static/img/favicon144.png 2x">

srcset および sizes 属性の使用

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

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

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

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

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

アクセシビリティの考慮

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

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

悪い例

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

良い例

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

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

title 属性

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

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

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

技術的概要

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

仕様書

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

ブラウザーの互換性

BCD tables only load in the browser

関連情報