サイト制作

WebPと画像の遅延読み込みの違い｜画質を保ちながら表示を速くする方法

慈愛妃きづな

2026-10-27

この記事には広告・アフィリエイトリンクが含まれます。

WebPなどで画像の容量を見直すことと、画面外の画像を後で読み込むことは別の対策です。用途に合う寸法と画質を選び、最初から見える主な画像は遅延させません。通信条件を変えて表示順と本文のずれも確認します。

画像の役割に合わせて画質と容量を配分

サイトの写真をどこまできれいに見せたいかは、内容によると思います。私なら、景色や観光地を見るサイトでは、写真の美しさを大切にしたいです。風景の魅力を伝えたいのに、細部がつぶれていてはもったいないですよね。

一方、すべての画像を同じ重さで用意する必要もないと思います。何を見せるページか、写真が情報の中心なのかを考えることで、画質と容量の配分も変えられそうです。

Googleは、WebPを高品質な可逆圧縮と非可逆圧縮に対応したウェブ向け画像形式として紹介しています。画質や透明部分の扱いなど、画像の用途に合わせた保存方法を選べるのが特徴です。

ただ、形式だけを変えれば必ず速くなるとは限りません。大きすぎる画像を小さな枠で表示していれば、表示に必要のない画素まで送ることになります。実際に見せる大きさを考え、変換後の文字や輪郭、色も確認したいところです。

何も開かずに待ち続けるのが、一番ストレスになると思います。まず文字と最初の一枚が見えて、読んでいる間に次の画像が用意される。私は、そんな順序が分かりやすいと感じます。

全部の画像を一度に見ることはできませんから、先の画像は必要になる頃に読み込む方法が考えられます。MDNが説明する画像の遅延読み込みは、画面外の画像などを後から読み込ませる仕組みです。本文の後半にたくさん写真があるページで検討できます。

ただし、最初から見える主な画像まで一律に遅らせると、肝心の表示を待つ原因になります。先頭の画像は優先し、後ろの画像を遅らせるなど、役割を分けることが大切です。画像の表示領域も先に確保しておけば、後から読み込まれたときの本文のずれを抑えやすくなります。

写真の質を落として終わりにするのではなく、見せる順序も整える。私は、景色のきれいさを残したまま、読者が先へ進める作りにしたいです。実際の端末や回線で確かめて、待たせ方まで考えることが、読みやすさにつながると思います。