画像の遅延読み込みについて

画像の遅延読み込み

通常、Web サイトでは画像の読み込みは最初にページ内の画像を全て読み込んでいる。

そのため、画像数が多かったりすると Web サイトの読み込みが遅くなってしまう。

それをページ表示に初期表示される領域の画像だけを読み込むようにし、領域外の画像はスクロールで表示が必要になったタイミングで読み込むようにすることを「画像の遅延読み込み」という。

こうすることで初期読み込みのファイル容量を減らし、ページの表示速度高速化をすることが出来る。

画像の遅延読み込みの方法

img タグに loading=”lazy”を付与

以下のように、img タグにloading=”lazy”という記述を追加することで、画像を遅延読み込みさせることが出来る。

<!-- loading="lazy"を付与 -->
<img src="example.jpg" loading="lazy" alt="" width="720" height="540" />

img タグの loading 属性

• lazy ：ページがスクロールされて表示位置が近づいたタイミングで読み込む（ページ表示時には読み込まない）
• eager ：ページ表示時に読み込む
• auto ：ブラウザが、ページの読み込み速度やユーザーの接続速度に基づいて、lazy か eager のどちらかを自動的に選択する（初期値）

loading 属性は、imgタグだけでなく、iframeタグにも記述することができる。

iframe タグは外部スクリプトなどを読み込む重い処理になることが多いため、遅延読み込みを行わせると良い。

遅延読み込みを使用する場合、img やiframeタグにwidthとheight属性を必ず指定する。

これにより、遅延読み込みで後から表示される要素のスペースを、ブラウザがページ表示時に予め確保してくれ、ページのレイアウトがズレる問題CLS（Cumulative Layout Shift）を防ぐことが出来る。

画像の非同期デコード

img タグに decoding=”async”を付与

ページ表示時、ブラウザは画像のデコード中に読み込みをブロックしてしまうことで表示が遅れることがある。

以下のように、decoding="async"を使用すると、画像のデコードが非同期にバックグラウンドで行われるため、ページの読み込みを妨げず表示速度が向上する。

<!-- decoding=”async”を付与 -->
<img src="example.jpg" decoding="async" alt="" width="720" height="540" />

一方、loading="lazy"はページ表示時には画像を読み込まず、近づいたときに読み込む特性があります。しかし、decoding="async"はページ表示時に画像の読み込みを行いながらも、ページのレンダリングと同時に処理するので、スクリーン外の画像も読み込みます。

img タグの decoding 属性

• async ：画像を非同期にデコードし、他のコンテンツの読み込みを妨げない
• sync ：画像を同期的にデコードする（デコード中は他のコンテンツの読み込みをブロックする）
• auto ：ブラウザによって最適な読み込み方法が自動的に選択される（初期値）

※ loading 属性は img タグと iframe タグに設定できたが、decoding 属性を設定できるのは img タグのみ設定できる。

loading=”lazy”と decoding=”async”の使い分け

• ファーストビュー以降の画像は、decoding="async"とloading="lazy"を併用して遅延読み込み遅延読み込みを優先させる。
• 特定の状況、例えばモーダルの中や横スクロールで表示される画像、カルーセルの 2 枚目以降の画像などは、decoding="async"のみを使用。loading="lazy"は指定しない。なぜなら、非表示から表示に切り替わる際、画像の部分が一瞬空白になることを避けるため。
• 縦スクロールでは、loading="lazy"で指定された画像は画面内に入る少し前から読み込むが、横スクロールでは画面に入ってから読み込みが始まるため、空白が表示される瞬間が生じる。この問題を回避するため、loading="lazy"は避け、decoding=”async”によってページのレンダリングブロックは避けつつ、事前に画像の読み込みは完了させておく。