<img src="" loading="">

更新日
仕様 HTML Living Standard
分類 フロー・コンテンツ / フレージング・コンテンツ / エンベッディッド・コンテンツ / フォーム関連要素 / インタラクティブ・コンテンツ(usemap属性がある場合) / パルパブル・コンテンツ
利用場所 エンベッディッド・コンテンツが置ける場所
内容 無し(空要素)

img要素loading="" を追加すると、画像が読み込まれるタイミングを指定することができます。

この機能を使うことで、いわゆるレイジーロード(遅延読み込み)を実装できるようになります。(これは、文書の表示速度の改善や転送量の軽減に役立ちます)


<img src="example.jpg" alt="サンプル" loading="lazy">

属性
必須属性
src="" 画像の指定 URL 埋め込む画像ファイルのURL
任意属性
loading="" [+]画像を読み込むタイミング lazy ビューポートに表示されるタイミングで読み込む
eager ページのロード時に直ちに読み込む(既定値)

値の詳細は次のようになります。

lazy
この画像は、ビューポート(表示領域)に表示されるタイミングで読み込まれます。ページロード時にビューポートに入っている画像は直ちに読み込まれ、それ以外の画像はスクロールに合わせて順次読み込まれていきます。
eager(既定値)
この画像は、ビューポートの外にあったとしても、ページロード時に直ちに読み込まれます。

次の例では、ビューポートに表示されるタイミングで読み込まれるように指定しています。

  • 画像が読み込まれる際にレイアウトが動いてしまうことを避けるため、同時に画像の表示サイズも指定しています。
<img src="example.jpg" alt="サンプル" loading="lazy" width="300" height="150">

使用例

画像の遅延読み込みを指定した例

<h1>画像の遅延読み込み</h1>

<p>スクロールしていくと画像が順次読み込まれていきます。</p>
<p>※このサンプルでは、div要素内のp要素にマージンが設定されています。</p>

<div>

<p><img src="lazy1.png" alt="Lazy1" loading="lazy" width="400" height="250"></p>

<p><img src="lazy2.png" alt="Lazy2" loading="lazy" width="400" height="250"></p>

<p><img src="lazy3.png" alt="Lazy3" loading="lazy" width="400" height="250"></p>

...

</div>

表示例

サンプル画面へ新規ウィンドウで表示

  • 上記の例では、画像サイズが小さいこともあり、遅延していることがほとんど分かりませんでした…。画像サイズや通信環境によっては、属性指定の効果が出てくると思います。