<img> …… 画像を表す

<img>タグは、画像を表す際に使用します。

src属性は、画像リソースのアドレスを指定する必須属性です。 src属性の値には、画像リソースを参照するための有効なURLを指定します。 src属性の値に空文字は指定できません。

alt属性は、画像が利用できない環境のための置換テキストを指定する属性です。 alt属性で指定したテキストは、画像を処理できなかったり画像の読み込みが無効になっている環境で利用されます。 画像と同等のコンテンツを提供するためのフォールバックコンテンツとして機能します。

alt属性の値が空文字かどうかでimg要素の意味が異なる

img要素にsrc属性が設定され、alt属性が空ではない文字列に設定されている場合、そのimg要素はコンテンツの重要な一部となります。

<!--img要素は、コンテンツの重要な一部です。-->
<img src="./sample/neko1.jpg" alt="今日のネコはやる気があります。">

img要素にsrc属性が設定され、alt属性が空の文字列に設定されている場合、そのimg要素はコンテンツを装飾するものに過ぎません。

<!--img要素は、コンテンツを装飾するものに過ぎません。-->
<img src="./sample/neko1.jpg" alt="">

img要素の終了タグについて

HTMLの仕様では、img要素には終了タグ</img>はありません。

■属性

■使用例

以下のサンプルは、1つのimg要素で1枚の画像を表示する際の典型的な使用例です。

HTMLソース

<img src="./sample/neko1.jpg" alt="今日のネコはやる気があります。" width="200" height="150">

↓↓↓

ブラウザ上の表示

画像リソースの選択肢をブラウザに提供する

img要素のsrcset属性とsizes属性を使用してその値にw記述子を記述すると、 画像リソースの選択肢をブラウザに提供できます。

ブラウザは、srcset属性で指定されたw記述子と、size属性で指定されたレンダリングサイズから、各画像の実効ピクセル密度を計算します。 ユーザー画面のピクセル密度やズームレベル、ユーザーのネットワーク状態などの要因に応じて、提供された画像リソース候補のいずれかが選択されます。

■使用例

以下のサンプルは、img要素のsrcset属性とsizes属性を使用して、複数の画像リソース候補をブラウザに提供しています。 srcset属性の値にはカンマ（ , ）区切りで複数の画像リソースのURLを指定しています。

HTMLソース

<img sizes="100vw" alt="白い狼"
 srcset="./sample/wolf-s.png 600w, ./sample/wolf-m.png 800w, ./sample/wolf-l.png 1000w"
 src="wolf-m.png">

↓↓↓

ブラウザ上の表示

上記サンプルをパソコンやスマホなどの様々な環境で表示したり、ブラウザのウィンドウ幅を縮めた状態で読み込むと、 ユーザーエージェントが利用する画像リソースが閲覧環境によって変化することを確認できるかもしれません。

尚、src属性で画像リソースの1つを指定しているのは、 srcset属性をサポートしていない旧いユーザーエージェントへの配慮のためです。 srcset属性をサポートしているユーザーエージェントではsrc属性は無視されます。

画像リソースの読み込みをすぐに行うか、延期するか

img要素のloading属性は、画像リソースの読み込みをすぐに行うか、延期するかをキーワードで指定します。 loading属性を使用すれば、ビューポートの外にある画像の読み込みを制御できます。

loading="eager"を指定すると、画像リソースをすぐに取得します。（初期値）

loading="lazy"を指定すると、条件が満たされるまで画像リソースの取得を延期します。 この読み込み方法の場合、後から画像が読み込まれる際にページレイアウトが変動してしまう可能性があります。 そのため、CSSで画像の幅と高さを設定している場合にも、同時にimg要素のwidth属性とheight属性で適切なアスペクト比を指定することが推奨されています。

■使用例

以下のサンプルは、img要素のloading属性の使用例です。

<img src="1.jpeg" alt="1">
<img src="2.jpeg" loading=eager alt="2">
<img src="3.jpeg" loading=lazy alt="3">
<div id=very-large></div> <!-- このdiv要素以降はすべてビューポートの外にあるとします -->
<img src="4.jpeg" alt="4">
<img src="5.jpeg" loading=lazy alt="5">

上記の例では、画像は次のようにロードされます。

1.jpeg、2.jpeg、4.jpeg

画像はすぐに読み込まれます。その分だけ、ウィンドウの読み込みイベントは遅延します。

3.jpeg

画像がビューポート内にある場合、レイアウトがわかっているときには読み込まれます。 ウィンドウの読み込みイベントは遅延しません。

5.jpeg

画像がビューポート内に入る位置までスクロールされたときに1回だけ読み込まれます。 ウィンドウの読み込みイベントは遅延しません。

img要素をレイアウト調整のためのツールとして使用しない

img要素をレイアウト調整のためのツールとして使用してはなりません。 特に、透明な画像を表示するためにimg要素を使用すべきではありません。 そのような画像が何らかの意味を伝えたり、ドキュメントに有用な情報をもたらすことはほとんどありません。

■関連項目

Sponsors