近年、写真を投稿できるサイトが増えています。文字よりも視覚情報の多い写真は、見ていても楽しいし、自分も投稿してみようと気になります。しかし Web サイトを表示する側にも少なからず問題が生じます。
Web サイトを開いたとき、無条件でそこに表示される写真をすべて読み込むと、すべてを読み込むために多くの時間を要するでしょう。しかも、スクロールしないと見れない写真が大量にあるかもしれません。見ない写真がダウンロードされるのは時間の無駄になります。
またサーバにとっても見られない写真を送信するため、帯域を無駄に消費してしまう結果となります。

遅延読み込み (Lazy Load)

そこで画面に表示されていない画像は表示せず、スクロールして画像が見える範囲に入ったタイミングで画像の読み込みを行うことができます。
それを実現するための方法ですが、以前は JavaScript ライブラリを利用することが一般的でしたが、実はすでに多くのブラウザで標準で利用することができます。

loading 属性

多くのブラウザで標準で利用できる遅延読み込みが loading 属性です。次のように img タグで loading=”lazy” と書くだけで、適切な位置で読み込みが行われます。

<img loading="lazy" src="photo1.jpg" width="1024" height="768">

しかし、Chrome や Edge, Firefox の最新版は対応していますが、 Safari は2021年12年現在まだ正式には対応していません。ただしテクニカルプレビューでは対応しているので、そのうち対応されるでしょう。

JavaScript ライブラリ

それでも Safari ですぐに対応が必要な場合は、JavaScript ライブラリを利用することになるでしょう。
次の Lazy Load はよく利用されているライブラリの一つです。

https://github.com/tuupola/lazyload

使い方は 3ステップで簡単です。

1. lazyload の読み込み
<script src="https://cdn.jsdelivr.net/npm/lazyload@2.0.0-rc.2/lazyload.js">
2. img タグにクラスを追加し、読み込む画像を data-src 属性にする
<img class="lazyload" data-src="photo1.jpg" width="1024" height="768">
3. HTML の読み込みが終わったタイミングで lazyload() を実行する
lazyload();

まとめ

今どき HTML に画像が一切ないということはないので、遅延読み込みの必要性を常に考えておいたほうがいいと思います。Chrome や Edge, Firefox などで利用できる loading 属性だけであれば、処理が遅くなることはないと思いますので、大いに検討の余地はあるかと思います。