Web画像の最適化が、表示速度とSEOを同時に底上げする理由

サイトが重い原因の大半は「画像」だ

表示速度が遅いという相談を受けて中身を調べると、その原因の多くは巨大な画像ファイルにある。デザイナーが用意した高解像度の写真を、そのまま原寸で貼り付けている。スマホの小さな画面に、5000ピクセル・数メガバイトの画像を送りつけている——こうしたケースは驚くほど多い。画像はWebページの総容量の大部分を占めるため、ここを最適化するだけで、体感速度は劇的に変わる。私たちが速度改善で真っ先に手をつけるのが画像だ。

次世代フォーマット WebP・AVIF に切り替える

長年使われてきたJPEGやPNGは、もはや最適な選択肢ではない。WebP は、同じ見た目の品質を保ったままJPEGより2〜3割ファイルサイズを小さくできる。さらに新しい AVIF は、条件によってはもっと圧縮が効く。主要なブラウザはこれらに対応済みだ。古いブラウザ向けには従来形式を用意しつつ、対応ブラウザには軽いフォーマットを配信する仕組み（picture要素での出し分け）を使えば、互換性を保ったまま容量を削減できる。まずは既存画像をWebPに変換するだけでも効果は大きい。

レスポンシブ画像で「必要なサイズだけ」届ける

PCとスマホでは、必要な画像の大きさが違う。それなのに全端末に同じ大画像を送るのは無駄そのものだ。ここで使うのが srcset と sizes 属性だ。あらかじめ大・中・小の複数サイズを用意しておき、ブラウザが画面サイズや解像度に応じて最適な1枚を選んで読み込む。スマホユーザーには小さい画像を、Retinaディスプレイのユーザーには高精細な画像を届ける。ユーザーの通信量を減らし、表示を速くする、地味だが効果の大きい手法だ。

遅延読み込みで初期表示を軽くする

ページを開いた瞬間に、まだ画面に映っていない下のほうの画像まで一気に読み込む必要はない。遅延読み込み（lazy loading）は、ユーザーがスクロールして近づいてきた画像だけを順次読み込む仕組みだ。img要素に loading="lazy" を付けるだけで有効になる。これにより、最初に読み込むデータ量が減り、ページの初期表示が速くなる。ただし、画面の一番上に表示される主役級の画像には lazy を付けてはいけない。そこはむしろ最優先で読み込ませる。

CDNで「近くから速く」配信する

画像を軽くしても、遠いサーバーから届けていては速さに限界がある。CDN（コンテンツデリバリーネットワーク）は、世界中に分散したサーバーから、ユーザーに最も近い拠点で画像を配信する仕組みだ。加えて、多くのCDNは配信時に自動でWebP変換やリサイズを行う機能を持つ。元画像を1枚置いておけば、端末やブラウザに応じて最適化した画像を自動生成して届けてくれる。運用の手間を増やさずに最適化を効かせられるのが利点だ。

画像最適化はLCP改善に直結する

Googleがページ体験の指標とする Core Web Vitals のうち、LCP（最大コンテンツの描画時間）は、多くのページで「一番大きな画像がいつ表示されるか」で決まる。つまり、主役の画像を軽く・近くから・優先的に届けることが、LCPの改善にそのまま効く。表示速度は検索順位にも、離脱率にも、コンバージョン率にも影響する。画像最適化は、地味に見えて、ユーザー体験とSEOを同時に底上げする費用対効果の高い施策だ。まずは自社サイトの一番重い画像から手をつけてほしい。