HTMLで画像の遅延ロード処理を行う方法

ページを読み込む際に画像のロードを遅延させることによって、ページの読み込み速度が向上したりします。通常、画像の遅延ロードを組み込む際には、Javascriptなどで対応することが多いですが、スクリプトを書かなくてもHTMLだけで遅延ロードの処理をする方法があります。

HTMLで画像を遅延ロードさせるには？

スクリプトを使わずにHTMLだけで画像の遅延ロードを実現させるためには、HTMLのimg要素にloading属性を付与することで実装することができます。

<img src="●●●.jpg" alt="" loading="lazy" width="500" height="200" />

このように、loading属性の値に「lazy」を指定することによって画像を遅延ロードさせることができます。なお、これを使用する場合にはimg要素に「width属性」と「height属性」を指定しなければなりません。
理由としては、読み込みを遅延するということは画像をあとから読み込むということになるので、それまでなかった場所に画像が表示されることで他のコンテンツがズレて表示されることがあるからです。ボタンをクリックしようとしたら、コンテンツが動いてクリックできなかった、あるいは意図しない箇所をクリックしてしまったなど、嫌な経験をしたことがある人もいるのではないでしょうか。

しかし、width属性とheight属性を付与しておくことで、ブラウザ側でアスペクト比を計算して画像が表示される前からそのスペースを確保しておくことができ、コンテンツのズレを防ぐことができます。

以上が、HTMLだけを使って画像を遅延ロードさせる方法となります。