多くのサイトで、Core Web Vitals のスコアを最も大きく左右する単一要因は画像です。最大の表示要素であり、最も多くレイアウトずれを起こし、メインスレッドを長時間止める原因にもなります。本記事では LCP・CLS・INP をすべて緑域にするための、画像まわりの全レバーを整理します。
3 指標のおさらい
- LCP（Largest Contentful Paint）：最大の可視要素が描画されるまで。目標 2.5 秒以下。
- CLS（Cumulative Layout Shift）：読み込み中に表示が動く累積量。目標 0.1 以下。
- INP（Interaction to Next Paint）：操作の反応速度。目標 200 ms 以下。2024 年に FID から置き換え。
3 つすべて画像が関係します。順に対策を見ていきます。
1. LCP 画像を最優先で読ませる
多くのランディングページでは LCP 要素はヒーロー画像です。即効性のある 3 つ：
- preload する。
<head>に<link rel="preload" as="image" href="/24picture/hero.webp" fetchpriority="high">。 <img>にもfetchpriority="high"を付ける。- LCP 画像に
loading="lazy"は絶対に付けない。 Lighthouse で最も多い警告です。
2. 現代フォーマットを使う
JPG / PNG を WebP や AVIF に置き換えるだけで、画質はそのまま 25〜50% 軽量化でき、LCP に直結します。古いブラウザ向けには <picture> で JPG フォールバックを：
<picture>
<source srcset="/hero.avif" type="image/avif">
<source srcset="/hero.webp" type="image/webp">
<img src="/24picture/hero.jpg" alt="..." width="1920" height="1080">
</picture>変換は PNG → WebP ツール で数秒。
3. 圧縮はしっかり、しかし適切に
JPG / WebP の品質 80 が写真ではスイートスポット。品質 95 と見分けはつきませんが、容量は半分。グラフィックは可逆 WebP か圧縮 PNG。一発で軽くするには 画像圧縮ツール を（ブラウザ内処理、ファイルは外に出ません）。
4. 必ず width と height を書く
CLS 対策の最重要ポイント。width と height はレイアウト寸法ではなく、最新ブラウザはこれでアスペクト比のスペースを事前確保します：
<img src="/24picture/hero.webp" width="1920" height="1080" alt="...">CSS で max-width: 100%; height: auto; を組み合わせれば、レイアウトを崩さず可変。
5. srcset でレスポンシブ配信
360px のスマホに 4K 画像を送るのは無駄。srcset + sizes でデバイスごとに最適な解像度を：
<img
src="/24picture/hero-1280.webp"
srcset="/hero-640.webp 640w, /hero-1280.webp 1280w, /hero-1920.webp 1920w"
sizes="(max-width: 768px) 100vw, 1280px"
alt="..." width="1920" height="1080">一括リサイズには 画像リサイズツール。
6. ファーストビュー外は遅延読み込み
初期画面より下の <img> にはすべて loading="lazy"。スクロール接近時のみダウンロードされ、帯域と CPU を LCP に振り向けられて INP も改善。
例外： LCP 画像と preload した画像には 付けない。
7. デコードを非同期に
非クリティカル画像に decoding="async" を付けると、デコードがメインスレッド外で行われ、スクロールやタップ時の引っかかりを防ぎます（INP 改善）。
8. Web フォントとアイコンスプライトに注意
アイコンスプライトや大きな SVG を使うなら、SVG オプティマイザーを必ず通します。SVG オプティマイザーで 30〜60% 軽量化が普通。パース時間も短くなり、操作の多いページの INP に効きます。
9. ガタつくカルーセルに注意
カルーセルのコンテナは固定高さに。スライドのアスペクト比が違うなら object-fit: cover で揃える。スライド読み込みのたびに高さが変わるカルーセルは CLS の温床です。
10. キャッシュは強気で
ハッシュ付きファイル名の画像には Cache-Control: public, max-age=31536000, immutable を。再訪ユーザーはほぼ満点の LCP になります。
クイック監査チェックリスト
- LCP 画像を preload +
fetchpriority="high"✅ - WebP / AVIF（フォールバック付き） ✅
- 品質 80 相当 ✅
- すべての画像に width / height ✅
- ヒーローと本文画像に
srcset+sizes✅ - ファーストビュー外は
loading="lazy"+decoding="async"✅ - SVG 最適化済み ✅
- 長期キャッシュ設定済み ✅
Pro Tip：LCP 失点の大半はたった 1 枚の重いヒーロー画像が原因です。WebP に変換し、寸法を書き、preload する。これだけで他をいじる前にスコアが跳ねます。
まとめ
Core Web Vitals はブラックボックスではありません。画像が指標を支配しており、対策の多くは 1 行の HTML か、コンバーターを 1 回通すだけです。ヒーロー画像を整え、すべてに寸法を書き、ファーストビュー外を遅延化すれば合格できます。
とっかかりが欲しい？ ヒーロー画像を 圧縮ツール にかけ、PNG → WebP ツール で変換すれば、LCP は即座に下がります。
