画像の遅延読み込みとは

画像の遅延読み込み（Lazy Loading）は、ページを開いた時点ですべての画像を読み込まず、画面に近づいたタイミングで読み込む仕組み。

画面外の画像の読み込みを後回しにすることで、初期読み込み時の通信量を抑えられる。

loading=”lazy”を設定する

imgタグに「loading=”lazy”」を追加するだけで設定できる。JavaScriptは不要。

<img src="image.webp" alt="画像の説明" width="800" height="600" loading="lazy">

画像が画面に近づくと、ブラウザが自動的に読み込みを開始する。読み込みを開始する距離はブラウザ側で決定される。

loading属性の種類

• lazy：画面外の画像を遅延読み込みする。
• eager：画像の位置に関係なく通常どおり読み込む。初期値。

loading属性を省略した場合は、基本的にeagerと同じ動作になる。

decoding=”async”との違い

decoding属性は画像のダウンロードではなく、画像データを画面表示用にデコードする処理を指定する。

• loading=”lazy”：画像の読み込み開始を遅らせる。
• decoding=”async”：画像のデコードを非同期で行うよう指定する。

両方を組み合わせることも可能。

<img src="image.webp" alt="画像の説明" width="800" height="600" loading="lazy" decoding="async">

ただし、decoding=”async”は必ず表示速度が改善する設定ではない。デコード方法はブラウザに任せることもできる。

ファーストビューの画像には設定しない

ページを開いた直後に表示されるメイン画像などには、原則としてloading=”lazy”を設定しない。

重要な画像まで遅延読み込みすると、表示開始が遅くなり、LCP（Largest Contentful Paint）に悪影響を与える可能性がある。

ファーストビューの重要な画像には、必要に応じて次のように設定する。

<img src="main.webp" alt="メイン画像" width="1200" height="600" loading="eager" fetchpriority="high">

fetchpriority=”high”は画像の取得優先度を高くするための指定。すべての画像に設定するのではなく、特に重要な画像に使用する。

widthとheightも指定する

画像の遅延読み込みでは、読み込み前に表示領域を確保しておくことが重要。

widthとheightを指定すると、画像の縦横比をブラウザが把握でき、読み込み時のレイアウトのずれ（CLS）を防ぎやすくなる。

<img src="photo.webp" alt="写真" width="800" height="600" loading="lazy" decoding="async">

widthとheightには画像本来の縦横比に合った値を設定する。

注意点

• ファーストビューやLCP対象の画像は遅延読み込みしない。
• widthとheightを指定してレイアウトのずれを防ぐ。
• loading属性はCSSのbackground-imageには使用できない。
• WordPressでは画像にloading属性が自動付与される場合があるため、重複や設定内容を確認する。

まとめ

画面外にある通常の画像は、基本的に次の指定で問題ない。

<img src="image.webp" alt="画像の説明" width="800" height="600" loading="lazy" decoding="async">

ただし、重要なのはすべての画像を遅延読み込みすることではなく、最初に表示する画像と画面外の画像を適切に使い分けること。