img要素【image element】 imgタグ / img tag

概要

img要素（image element）とは、HTMLで定義されている要素(タグ)の一つで、画像をページに埋め込んで表示することができるもの。

src属性で画像ファイルの位置を指定すると、img要素がある位置に埋め込んで表示することができる。位置はサーバ内のパス（ドキュメントルートからの絶対パスあるいはHTMLファイルを基準とする相対パス）あるいはURLで指定する。位置の代わりに src="data:image/png;base64,画像データ" のように記述することで、Base64エンコードされた文字列として画像データを直接埋め込むこともできる。

alt属性で画像付が表示できない場合に代わりに表示される文字列（代替テキスト）を指定する。画像ファイルの取得ができず表示できなかった場合や、読み上げブラウザなどを利用していてそもそも画像の表示自体が不可能な環境では重要な情報となる。

画像内にいくつも領域を設けてそれぞれ特定のURLにリンクを張ることができる「イメージマップ」という機能があり、これを利用する場合はusemap属性で利用するイメージマップ名を指定する。サーバサイドイメージマップを利用する場合はismap属性を指定する。

width属性で表示幅を、height属性で表示高を指定することができる。これらが無指定の場合は画像ファイル側のサイズ情報を利用するが、ファイルの読み込みが完了するまで表示サイズを決定できず、ページの表示状態が崩れたり後から位置やサイズがずれる場合がある。また、画像のサイズと属性値で指定した幅や高さが異なる場合は、自動的に拡大・縮小・変形して表示される。

img要素で読み込むことができる画像データの形式はWebブラウザによるが、一般的にはJPEGやPNG、GIFが用いられ、最近ではWebPなども普及している。ベクター形式のSVG画像を指定することもできる。HTML5では複数の画像データから状況に応じて適切なものを選択させるpictureタグが導入され、img要素はその子要素として記述されることがある。

(2023.5.11更新)