HTML <img>
<IMG> は画像（image）を表示する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