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

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

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

<img src="●●●.jpg" alt="" loading="lazy" />

このように、loading属性の値に「lazy」を指定することによって画像を遅延ロードさせることができます。

ただ、これをサポートしているブラウザは、まだChromeなど一部のブラウザでしか対応していない状況となっています。

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

おすすめの記事