<img src="">
| 更新日 | |
|---|---|
| 仕様 | HTML Living Standard |
| 分類 | フロー・コンテンツ / フレージング・コンテンツ / エンベッディッド・コンテンツ / フォーム関連要素 / インタラクティブ・コンテンツ（usemap属性がある場合） / パルパブル・コンテンツ |
| 利用場所 | エンベッディッド・コンテンツが置ける場所 |
| 内容 | 無し（空要素） |
img要素は、文書に画像を埋め込みます。
<img src="example.gif" alt="サンプル">
| 属性 | 値 | ||
|---|---|---|---|
| 必須属性 | |||
src="" |
画像の指定 | URL | 埋め込む画像ファイルのURL |
| 任意属性 | |||
alt="" |
代替テキスト | テキスト | 画像の代わりになるテキスト |
width="" |
画像の幅 | 数値 | ピクセル数 |
height="" |
画像の高さ | 数値 | ピクセル数 |
usemap="" |
クライアントサイド・イメージマップ | #マップ名 |
イメージマップの名前 |
ismap |
サーバーサイド・イメージマップ | （ismap） |
値は省略可能 |
srcset="" |
画像の候補 | URL | 画像ファイルのURL（既定の記述子は 1x） |
URL 横幅w |
ビューポートの幅による切り替え： 画像ファイルのURL、幅記述子（w） |
||
URL 比率x |
デバイスピクセル比による切り替え： 画像ファイルのURL、画素密度記述子（x） |
||
sizes="" |
ブレイクポイント、画像の表示サイズ | メディアクエリ 表示サイズ | メディアクエリ（任意）、画像の表示サイズ（横幅） |
crossorigin="" |
別オリジンにある画像の処理方法 | anonymous |
認証情報を使用せずにCORSリクエストを送信 |
use-credentials |
認証情報を使用してCORSリクエストを送信 | ||
| 空 | anonymous と同じ |
||
referrerpolicy="" |
画像を読み込む際のリファラーポリシー | リファラーポリシー | 既定値は strict-origin-when-cross-origin |
fetchpriority="" |
 画像を読み込む際の相対的な優先度 |
high |
他の画像と比較して読み込みの優先度が高いことを示す |
low |
他の画像と比較して読み込みの優先度が低いことを示す | ||
auto |
読み込みの優先度は自動的に決定（既定値） | ||
decoding="" |
画像のデコード方式 |
sync |
他のコンテンツと同期的にデコード |
async |
他のコンテンツと非同期的にデコード | ||
auto |
デコード方式を指定しない（既定値） | ||
loading="" |
画像を読み込むタイミング |
lazy |
ビューポートに表示されるタイミングで読み込む |
eager |
ページのロード時に直ちに読み込む（既定値） | ||
- ismap属性は、サーバーサイド・イメージマップを使用する際に指定します。この属性は、href属性を持つa要素内のimg要素にのみ指定することができます。（詳細未確認）
- crossorigin属性の値を省略した場合は
anonymousになります。属性そのものを省略した場合はCORSリクエストを行いません。
alt属性、width属性、height属性、srcset属性、sizes属性、referrerpolicy属性、decoding属性、loading属性、usemap属性の詳細については、下記のページを参考にしてください。
画像の埋め込み方法
画像ファイルのURLを、src属性で指定します。例えば次のように記述した場合は、example.gif がその場所に埋め込まれることになります。
<img src="example.gif" alt="サンプル">
画像の形式について
Webページで使用する画像の形式は、一般的にはJPEG、GIF、PNGの3タイプになります。
- JPEG （拡張子 .jpg）
- 約1677万色まで使用可能。写真向きの形式で、色数の多い複雑な画像に適しています。
- GIF （拡張子 .gif）
- 256色まで使用可能。イラストやアイコン向きの形式で、色数の少ない単調な画像に適しています。
- PNG （拡張子 .png）
- （通常は）約1677万色まで使用可能。イラストやアイコン向きの形式で、色数の少ない単調な画像に適しています。写真などで使用する場合は、データ量が大きくなってしまうので注意が必要です。（しかし、画質の劣化がないのでJPEGより綺麗に表示されます）
alt属性について
alt属性の指定は任意の扱いになっていますが、ほとんどのケースではこの指定が必要となるため、ほぼ必須属性と考えて良いでしょう。
<img src="photo.jpg" alt="逗子海岸で犬と散歩する私">
- 旧HTMLからの変更点
-
- HTML5：longdesc属性、name属性、align属性、border属性、hspace属性、vspace属性が廃止され、crossorigin属性が追加されました。
- HTML5：alt属性が必須ではなくなりました。（しかしほとんどのケースで必要となります）
- HTML5：width属性とheight属性の値にパーセント値を指定できなくなりました。
- HTML5.1：srcset属性とsizes属性が追加されました。
- HTML5.2：longdesc属性が復活し、referrerpolicy属性が追加されました。
- HTML LS：longdesc属性が再度廃止され、decoding属性とloading属性が追加されました。
- HTML LS：fetchpriority属性が追加されました。［2023/04/20］
使用例
<p><img src="sample.gif" alt="SAMPLE"></p>
<p><img src="kyoto.jpg" alt="京都の庭園を写した写真。透き通った池が目の前に広がっています。"></p>
- 表示例
-
