Webページの読み込み速度に最も大きく影響する要素の一つが画像です。PageSpeed Insightsを開くと「適切なサイズの画像を使用してください」や「次世代フォーマットで画像を配信してください」という指摘が頻繁に出てきます。この記事では、画像フォーマットの選択基準から圧縮レベルの設定、Core Web Vitalsへの具体的な影響まで、実装可能な最適化手法を解説します。
画像フォーマットの選択基準
JPEG は写真・グラデーションが多い画像に向いていて、品質75〜85程度で品質とサイズのバランスが取れます。PNGは透明度（アルファチャンネル）が必要な場合や、スクリーンショット・図版のように色の境目がはっきりした画像に向いています。WebPはJPEGとPNGの両方を置き換えられる形式で、Google の比較では、同等の画質で非可逆のWebPはJPEGより25〜34%、可逆のWebPはPNGより26%小さくなります。すべての主要ブラウザで表示できるので、新規のサイトでは標準として使えます。手元の写真やPNGをまとめて変換するなら、WebP Studio に複数枚をドロップすると、品質を選んで変換し、変換前後の大きさの違いを確かめてからZIPで保存できます。AVIFはWebPよりさらに小さくでき、現在は主要ブラウザがすべて対応していますが、変換に時間がかかり、古い端末向けにはWebPやJPEGを残しておくと安心です。
この手順で使うツール
WebP Studio
PNG/JPG → WebP 一括変換（AVIF はデスクトップ版）
サイズ最適化：表示サイズに合わせた画像提供
最も単純で効果的な最適化は「表示する大きさに合った画像を配る」ことです。スマートフォンで300px幅に表示するカード画像に1200px幅の画像を配ると、幅は4倍でも画素の数は16倍になり、表示に使われない分まで読み込ませることになります。一方で高解像度の画面では、300pxの表示に600pxの画像を使うと鮮明に見えるので、どの幅がちょうどよいかは画面ごとに違います。そこで幅の違う画像を何枚か用意し、`srcset` と `sizes` で候補と表示幅を伝えて、選ぶのをブラウザに任せます。Responsive Image Generator に元の画像を1枚入れて幅を選ぶと、幅ごとの画像と、srcset・sizes・width・height を書いた img タグがまとめて出てきます。Next.js の `<Image>` コンポーネントのように、この処理を自動で行う仕組みを使っている場合は、それに任せて構いません。
この手順で使うツール
Responsive Image Generator
1枚の画像から表示幅ごとの画像と srcset つきの img タグを作る
LCPとCLSへの影響：Core Web Vitals対策
画像が直接影響する Core Web Vitals の指標は2つあります。1つは LCP（Largest Contentful Paint）で、ページの主要コンテンツが表示されるまでの時間です。多くのページでLCPの対象はヒーロー画像のような上部の大きな画像です。改善には、①その画像に `fetchpriority="high"` を付けて優先して読み込ませ、`loading="lazy"` は付けない、②形式と大きさを最適化して転送量を減らす、③CDNでユーザーの近くから配信する、の3点が効きます。スクロールしないと見えない画像には `loading="lazy"` を付けて初期の転送を減らしますが、ファーストビューの画像に付けると読み込みの開始が遅れてLCPが悪化します。もう1つは CLS（Cumulative Layout Shift）で、読み込み中にレイアウトがずれる量です。画像に width と height が書かれていないと、画像が届いた瞬間に下の文章が押し下げられます。Responsive Image Generator の出力には width と height が入り、「ファーストビューの画像」に印を付けると loading="lazy" を外して fetchpriority="high" を付けた形に変わります。なお、以前の指標だった FID は2024年3月に INP に置き換わりました。INP は操作への反応の速さを測るもので、画像よりも JavaScript の処理の重さが主に効きます。
この手順で使うツール
Responsive Image Generator
1枚の画像から表示幅ごとの画像と srcset つきの img タグを作る
圧縮の目安と、読み込み中の見せ方
品質の設定は、JPEG・WebPとも80前後を出発点にして、実際の見た目と大きさを比べながら決めるのが確実です。品質の数値の意味はエンコーダーによって違うので、同じ80でも形式やツールが変われば仕上がりは変わります。数値だけで決めず、必ず変換後の画像を等倍で確かめてください。SVGは、デザインツールから書き出したものに編集用の情報や過剰な桁数の座標が多く含まれるので、SVG Optimizer のような最適化を通すと大きく減ることがあります。読み込み中の見せ方も体感速度に効きます。Image Color Extractor で画像の主要な色を取り出し、画像の場所の背景色にしておくと、画像が届くまで真っ白な四角ではなく、近い色の面が表示されます。
この手順で使うツール
Image Color Extractor
画像から主要カラーパレットを自動抽出
まとめ
画像最適化はWebパフォーマンス改善の中でも最も費用対効果が高い施策の一つです。まず PageSpeed Insights で「適切なサイズの画像」「次世代フォーマット」「画像要素で width と height が明示されていない」といった指摘を確認し、形式の変換、表示幅に合わせた srcset、width と height の明示から着手します。ファーストビューの画像だけは遅延読み込みせず優先して読み込ませる、という1点も忘れないでください。