HTML IMG要素(<IMG>タグ)

<IMG> は画像（image）を表示するHTMLタグです。IMG要素タイプはインライン要素です。

HTML

HTMLではタグ名の大文字と小文字を区別しない。img要素の終了タグは省略できる。

<IMG></IMG>
<img></img>
<IMG>
<img>

XHTML

XHTMLではタグ名は小文字である。

<img></img>
<img />

属性

次に示す属性をimg要素に指定することができる。

class
CSSのクラスを指定する。空白で区切って、複数のクラスを指定できる。 
<img src="img.jpg" class="responsive rounded">
id
HTML文書内で一意な識別子を指定する。要素に識別子を付けることにより、CSSのセレクタやJavaScriptでこの要素を特定できる。
style
CSSのプロパティを指定する。セミコロンで区切って、複数のプロパティを指定できる。 
<img src="img.png" style="height: 250px; width: 300px;">
src
表示する画像のURIを指定します。
alt
代替文字列を指定します。代替文字列は画像を表示できないブラウザで画像の代わりに表示される文字列です。ブラウザによっては、画像にマウスポインタを合わせると代替文字列がポップアップ表示されることもあります。
longdesc
画像に対する説明が記述されている文書のURI
name
名前を指定します。
height
画像の高さをピクセル単位かパーセンテージで指定します。
width
画像の幅をピクセル単位かパーセンテージで指定します。
align
画像の配置位置を指定します。以下の値の中から選択できます。
align属性
属性値 意味
right 右端に表示
left 左端に表示
border
画像の周りの枠線の幅をピクセル単位で指定する。border属性を省略した場合は、画像の周りに枠線は表示されない。ただし、img要素を <a href=" URI "> と </a> で囲んで、画像をクリックすると他のページにジャンプするように設定すると、画像の周りに枠線が表示されるようになる。このとき、画像の周りに枠線を表示させたくない場合は、 border="0" と明示的に指定すれば枠線が表示されなくなる。
hspace
画像の周りの横方向の余白の大きさをピクセル単位で指定します。
vspace
画像の周りの縦方向の余白の大きさをピクセル単位で指定します。
galleryimg
大きな画像の上にマウスポインタを乗せたときに、イメージツールバー（画像の保存や印刷ができるポップアップメニュー）を表示させるか否かを指定します。
galleryimg属性
属性値 意味
true 表示する（規定値）
yes
false 表示しない
no

galleryimg属性はW3C標準仕様ではなく、Internet Explorer 6で独自拡張された属性である。IE6では<meta>タグで一括して指定することもできる。

Internet Explorer 7でgalleryimg属性は廃止された。

language
スクリプト言語を指定します。
lowsrc
大きな画像を表示するのに時間がかかる場合、画像データを読み込んでいる間に表示する代替画像のURIを指定します。
onerror
画像ファイルの読み込みに失敗したときに実行されるスクリプトを指定する。

W3C標準仕様ではない独自拡張属性だが、多くのWebブラウザでサポートされている。

コンテンツモデルのカテゴリ

フローコンテンツ、フレージングコンテンツ、エンベデッドコンテンツ、インタラクティブコンテンツ

サンプル

IMGタグのサンプルを示す。

<img src="/img/avator.jpg">

高さ又は幅のどちらか片方だけを指定した場合、アスペクト比が維持されたまま拡大又は縮小される。

<img src="/img/avator.jpg" style="width: 200px;">

高さと幅の両方を指定した場合、指定した大きさで表示される。このときアスペクト比は維持されない。

<img src="/img/avator.jpg" style="height: 200px; width: 300px;">

AMP

AMP (Accelerated Mobile Pages) では <img> の代わりに <amp-img> を使う。

HTMLタグ

参考文献

WHATWG (2021) "Embedded content" HTML Living Standard