HTML <img> element

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

HTML

HTMLにおいて、タグおよび属性の名前はの大文字と小文字を区別しない。img要素の終了タグは省略できる。

<IMG></IMG>

<img></img>

<IMG>

<img>

XHTML

XHTMLにおいて、タグおよび属性の名前は小文字で記述する。img要素の終了タグは省略できるが、XMLの規則に従う必要がある。

<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を指定します。

ondblclick

img要素をダブルクリックしたとき実行するJavaScriptを指定する。

onerror

画像ファイルの読み込みに失敗したときに実行されるスクリプトを指定する。

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

title

画像のクレジットや説明など、ツールチップに適した要素のアドバイザリ情報を指定する。

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

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

サンプル

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

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

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

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

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

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

JavaScript

JavaScriptからはHTMLImageElementインタフェースを通じてimg要素へアクセスできる。

HTMLImageElementインタフェースのプロパティ一覧を次に示す。

alt

img要素のalt属性

src

img要素のsrc属性

srcset

img要素のsrcset属性

sizes

img要素のsizes属性

crossorigin

img要素のcrossOrigin属性

usemap

img要素のuseMap属性

ismap

img要素のisMap属性

width

img要素のwidth属性

height

img要素のheight属性

referrerpolicy

img要素のreferrerPolicy属性

decoding

img要素のdecoding属性

loading

img要素のloading属性

AMP

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

参考文献

Web Hypertext Application Technology Working Group (2022) "Embedded content" HTML Living Standard