HTML <img>

構文

HTML要素のタグ名、属性名および属性値は、大文字と小文字のどちらでもよい。

<img></img>

<IMG></IMG>

img 要素の終了タグは省略できる。

<img>

<IMG>

XML 形式で終了タグを省略することもできる。

<img />

属性

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

alt

代替文字列を指定します。代替文字列は画像を表示できないブラウザで画像の代わりに表示される文字列です。ブラウザによっては、画像にマウスポインタを合わせると代替文字列がポップアップ表示されることもあります。

class

CSSのクラスを指定する。空白で区切って、複数のクラスを指定できる。

<img src="img.jpg" class="responsive rounded">

id

HTML文書内で一意な識別子を指定する。要素に識別子を付けることにより、CSSのセレクタやJavaScriptでこの要素を特定できる。

loading

画像の読み込み方法を指定する。

loading

値	説明
eager	画像を可能な限り早く読み込む
lazy	画像を遅延読み込みする

loading 属性に eager を指定すると、HTMLの読み込み時に画像も読み込む。これはデフォルトの動作である。

loading 属性に lazy を指定すると、実際に画像を表示するときに画像を読み込む。たとえば、スクロールしないと見えない位置にある画像は、スクロールしたときに読み込まれる。これにより、初期表示を高速に行うことができる。loading 属性に lazy を指定する場合は、width 及び height 属性も指定する必要がある。

<img src="/img/avator.jpg" loading="lazy" width="300" height="300">

src

表示する画像のURIを指定します。

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

style

CSSのプロパティを指定する。セミコロンで区切って、複数のプロパティを指定できる。

<img src="img.png" style="height: 250px; width: 300px">

height

画像の高さを指定する。

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

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

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

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

width

画像の幅を指定する。

画面の幅によって画像の表示サイズが変化するレスポンシブな表示でも width と height 利用してレイアウトシフトを防ぐことができる。

img {
  width: 100%;
  height: auto;
}

<img src="example.jpg" width="1280" height="720" alt="example">

ondblclick

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

onerror

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

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

title

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

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

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

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> を使う。

関連記事

AMPの <amp-img> タグ

HTMLの <figcaption> タグ

HTMLの <figure> タグ

HTMLの <picture> タグ

参考文献

Web Hypertext Application Technology Working Group 2023. Embedded content. HTML Living Standard