【高速化】画像を速く、確実に表示する方法

## ポイント

- 外部の画像サーバーは安定性の懸念がある
- 画像を後から差し替える

## 目的：画像を速く、確実に表示する

前回、外部のサーバーを利用すると画像を高速に表示できることを紹介した。

一方で、外部のサーバーは安定性の懸念があり、サーバーにトラブルが発生すると画像が表示されなくなる問題がある。

そこで、画像を遅延読み込みで差し替えて確実に表示できるようにする。

## 遅延読み込みの方法

遅延読み込みする画像は、次のように記述する。

~~~
<img src="元の画像のURL" data-src="差し替える画像のURL" alt="画像の説明" height="高さ" width="幅"/>
~~~

`data-src=""` という項目を追加して、差し替える画像のURLを記入する。

<br>

次に、ページの最後にこの記述を追加する。

~~~
<script> //画像の遅延読み込み
    document.addEventListener('DOMContentLoaded', function() {
        setTimeout(function() {
            var slowImages = document.querySelectorAll('img[data-src]');
            slowImages.forEach(function(img) {
            img.setAttribute('src', img.getAttribute('data-src'));
            });
        }, 150); // 150ミリ秒遅延実行
    });
</script>
~~~

ページの表示から 0.15 秒後 に、`<img>` の `src=""` の内容を `data-src=""` の内容に書き換えている。

このスクリプトは軽量でどこに配置しても良いが、一般的には一番最後の `</body>` の前に記述する。

## 実際の動作

実際の差し替えを Chrome の 開発者ツール で確認してみる。

<br>

<figure class="fig640"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7S85W0qxqkn74UJmhnPB5SPffDEm9s-AhQpqEv1etXrCPd28LmnTg7nWZNJ71GZt6QyjoxdmmeB_rQo9golkJ5TreLIxE-Kx5_hm8__kzhmFliGcamlEH_Gxqytz98KV2Lkyv-xJ81-x5pLDnR-Pk01wrJ8EyCA0jgU-7-nGrMnOnfA/s0-rw-e90/%E9%96%8B%E7%99%BA%E8%80%85%E3%83%84%E3%83%BC%E3%83%AB%E7%94%BB%E5%83%8F%E5%B7%AE%E3%81%97%E6%9B%BF%E3%81%88%E3%82%B3%E3%83%A1%E3%83%B3%E3%83%88%E5%85%A5%E3%82%8A.png" ><img loading="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7S85W0qxqkn74UJmhnPB5SPffDEm9s-AhQpqEv1etXrCPd28LmnTg7nWZNJ71GZt6QyjoxdmmeB_rQo9golkJ5TreLIxE-Kx5_hm8__kzhmFliGcamlEH_Gxqytz98KV2Lkyv-xJ81-x5pLDnR-Pk01wrJ8EyCA0jgU-7-nGrMnOnfA/s0-rw-e90/%E9%96%8B%E7%99%BA%E8%80%85%E3%83%84%E3%83%BC%E3%83%AB%E7%94%BB%E5%83%8F%E5%B7%AE%E3%81%97%E6%9B%BF%E3%81%88%E3%82%B3%E3%83%A1%E3%83%B3%E3%83%88%E5%85%A5%E3%82%8A.png" alt="開発者ツール画像差し替えコメント入り.png (1301×253)" width="1301" height="253" ></a></figure>

ページの読み込みに続いて、初期サーバーの画像が読み込まれる。こちらは読み込みが早い。

ページの読み込み終了から 0.15 秒後に、差し替えるサーバーの画像の読み込みが始まる。こちらは遅く、約１秒 かかっている。

そして、ページ読み込み開始から ２秒後 に、画像が入れ替わっている。

## 画像差し替えのメリット

- 画像表示を１秒短縮できる
- 外部サーバーがサービスを終了しても画像が表示される

## 画像差し替えのデメリット

- 画像を２回読み込むのでデータ通信量が増える
- 画像を挿入する時に少し手間が増える

### 実際のデメリットは？

データ通信量は、初期画像を高圧縮にすれば問題ない。

画像を挿入する手間も、外部サーバーはトップの画像にのみ使えばよいのでそれほど大変ではない。

## 参考：通常の遅延読み込みの用途

通常は、遅延読み込みは初期画像に1px × 1px の非常に軽いダミー画像を挿入して、読み込み負荷を減らす目的で使う。

ダミー画像の例：
`src="data:image/webp;base64,UklGRjoAAABXRUJQVlA4IC4AAACyAgCdASoCAAIALmk0mk0iIiIiIgBoSygABc6WWgAA/veff/0PP8bA//LwYAAA"`

現在は、全てのブラウザが `<img loading="lazy">` による遅延読み込み対応したので、以前より使うことは少なくなった。

### loading="lazy" との比較

|  | loading="lazy" | 今回の方法（Javascript） |
|--|--|--|
| 対象 | img と iframe のみ | 何でも |
| タイミング | 指定できない | 細かく設定できる |
| 最初の画像 | 使うとスコアが悪化 | 一応使える |
| Javascript 無効時 | 動作する | 動作しない |

最初の画像に Javascript による遅延読み込みを行うと、スコアは上昇するが実際の画像の表示は遅くなる。


## 注意：height と width を記入する

画像を遅延読み込みすると、レイアウトシフト（ページの表示がカクッと崩れる）が発生する。

レイアウトシフトは見ていて不快で、さらに再レンダリングのためにパフォーマンスが悪化する。

これを防ぐため、遅延読み込みする場合は height と width を明示的に記入して、レイアウトを保持する。

<br>

## まとめ

- 遅延読み込みで画像を差し替える
- 高速なサーバーを利用しながら、確実に表示できる

<br>

---

次の記事

https://qiita.com/kimamanaDr/items/b645d3a64dd7511c9d6c

前の記事

https://qiita.com/kimamanaDr/items/e85c1a7ce00f7a685234

<br>

オリジナルのブログ記事

https://kimamaniigakuronbun.blogspot.com/2024/04/Blog07.html