パフォーマンス画像ウェブ開発

画像最適化とCore Web Vitals：実践ガイド

画像はウェブパフォーマンスの最大の要因です。適切に最適化してCore Web Vitalsのスコアを改善する方法を解説します。

RunToolz Team2026年2月4日8 min read

GoogleがCore Web Vitalsをランキング要因として使い始めてから数年、突然みんなページ速度を気にするようになりました。しかし、実際に何がページを遅くしているか掘り下げると、ほぼ常に同じ犯人です：画像。

平均的なウェブページで、画像はページ全体の重さの約50%を占めます。画像を正しく処理すれば、パフォーマンスパズルの半分を解いたことになります。

重要な3つの指標

LCP（Largest Contentful Paint） — 最大の可視要素がどれだけ速く読み込まれるか。通常、それは画像です。Googleは2.5秒以内を求めています。

CLS（Cumulative Layout Shift） — ページ読み込み中にどれだけ要素がずれるか。サイズが定義されていない画像が主な原因です。目標：0.1未満。

INP（Interaction to Next Paint） — ユーザーアクションにどれだけ速く反応するか。重い画像がメインスレッドをブロックしてインタラクションを遅延させることがあります。目標：200ms未満。

効果は本物

一般的なコンテンツサイトで画像を最適化した結果：

| 指標 | 最適化前 | 最適化後 | |------|---------|---------| | ページ重量 | 4.2 MB | 890 KB | | LCP | 4.8秒 | 1.6秒 | | CLS | 0.25 | 0.02 | | 読み込み時間（3G） | 18秒 | 4秒 |

チェリーピッキングではありません。実際に作業したサイトの数値です。修正は複雑ではありません — 少しの意識があればいいだけです。

ステップ1：適切なサイズ、適切なフォーマット

最大の効果は、適切なサイズで画像を配信することです。1200pxで表示される3000px幅のヒーロー画像は、必要な6倍のピクセルを送信しています。

表示サイズに合わせて画像をリサイズしましょう。Retinaディスプレイでは2倍に — 画像が600pxで表示されるなら、1200pxにします。

実際に試してみませんか？画像をリサイズ

そして適切なフォーマットを選びます：

WebP — 同等品質でJPEGより25-35%小さい。デフォルトとして使いましょう。
AVIF — WebPよりさらに小さいですが、エンコーディングが遅くブラウザサポートが追いついている途中。
JPEG — 汎用フォールバック。WebPが使えない場所で写真用にはまだ大丈夫。
PNG — 透明度が必要でWebPが使えない画像にのみ。
SVG — アイコン、ロゴ、シンプルなイラスト用。小さなファイルサイズ、無限スケーリング。

ステップ2：積極的に圧縮

ほとんどの画像は、スクリーンが表示できる以上の品質を持っています。JPEGを品質80に圧縮しても誰も違いに気づきません — でもファイルは40-60%小さくなります。

大まかなガイド：

| 品質レベル | 用途 | 一般的な削減量 | |-----------|------|-------------| | 90-100 | 写真ポートフォリオ | 10-20% | | 75-85 | 一般的なウェブ画像 | 40-60% | | 60-75 | サムネイル、背景 | 60-80% |

品質レベルを推測しないでください。圧縮して、結果を見ましょう。違いがわからなければ、圧縮は適切です。

実際に試してみませんか？画像を圧縮する

ステップ3：レイアウトシフトを修正

ページ上のすべての画像に明示的なwidthとheight属性をつけるか、CSS aspect-ratioを使います。これがないと、ブラウザはどれだけスペースを確保すべきかわからず、画像の読み込みに伴ってコンテンツが跳ね回ります。

<!-- 良い例：ブラウザが必要なスペースを知っている -->
<img src="photo.webp" width="800" height="600" alt="説明" />

<!-- これも良い：CSS aspect ratio -->
<img src="photo.webp" style="aspect-ratio: 4/3; width: 100%;" alt="説明" />

これだけでCLSを不合格から合格に変えることができます。

ステップ4：ファーストビュー外の画像を遅延読み込み

ページが最初に読み込まれた時に見えない画像は、ユーザーがスクロールするまで読み込まないようにします。

<img src="photo.webp" loading="lazy" alt="説明" />

属性一つ。それだけです。ただしヒーロー画像やLCP要素は遅延読み込みしないでください — 即座に読み込む必要があります。

ステップ5：レスポンシブ画像を使う

異なる画面幅に異なるサイズを配信します。スマホに1400pxの画像は必要ありません。

<img
  srcset="photo-400.webp 400w, photo-800.webp 800w, photo-1200.webp 1200w"
  sizes="(max-width: 600px) 400px, (max-width: 1000px) 800px, 1200px"
  src="photo-800.webp"
  alt="説明"
/>

はい、複数サイズの生成が必要です。しかしモバイルでの帯域幅の節約は大きいです。