<img> …… 画像を表す

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

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

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

img要素が何を表すかは、src属性とalt属性の指定によります。

src属性が設定され、alt属性が空ではない文字列に設定されている場合

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

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

src属性が設定され、alt属性が空の文字列に設定されている場合

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

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

■属性

■使用例

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

HTMLソース

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

↓↓↓

ブラウザ上の表示

ユーザーエージェントに画像リソースの選択肢を提供する

srcset属性とsizes属性を使用してw記述子を記述すると、 ユーザーエージェントにサイズが異なる複数のイメージ候補を提供できます。

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

■使用例

以下のサンプルは、ユーザーエージェントに対して複数の画像リソースを提供する使用例です。 srcset属性の値にはカンマ（ , ）区切りで複数の画像リソースのURLを指定しています。

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

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

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">

↓↓↓

ブラウザ上の表示

loading属性は、画像リソースの読み込み方法を指定する

loading属性は、画像リソースの読み込みをすぐに行うか、延期するかをキーワードで指定する属性です。 loading属性を使用することで、ビューポートの外にある画像の読み込み方法を指定できます。 loading="lazy"を指定すると、条件が満たされるまで画像リソースの取得を延期します。 loading="eager"を指定すると、画像リソースをすぐに取得します。 初期値は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