Web制作・SEO対策 ⏱️ 読了目安: 約6分
Webサイトの表示速度を高める画像フォーマット（WebP/JPEG/PNG）の選び方と圧縮基準
Core Web Vitals（LCP）やSEO評価に直結するWeb画像の最適化手法を徹底解説。WebP・JPEG・PNG・SVGの適切な使い分けと、画質を損なわずにファイル容量を70%削減するリサイズ・圧縮の基準値を紹介します。
1. なぜWebサイトの画像軽量化がSEOと収益に直結するのか？
Googleは検索ランキングの評価指標として「Core Web Vitals（コアウェブバイタル）」を導入しており、その中核指標である LCP（Largest Contentful Paint：最大コンテンツの描画時間）は「ページ読み込み開始から2.5秒以内」が良好の基準とされています。
多くのブログやコーポレートサイトでLCP悪化の最大要因となっているのが、最適化されていない巨大なヒーロー画像やアイキャッチ画像です。1枚あたり2MB〜5MBある未圧縮のPNG/JPEG画像を、横幅1200pxのWebP形式（約80KB〜150KB）に変換するだけで、通信量は90%以上削減され、モバイル回線でも瞬時にページが表示されるようになります。
2. 用途別・最適な画像横幅（px）と目標ファイルサイズ基準
どれほど圧縮率の高いフォーマットを使っても、元画像のピクセル数（解像度）が大きすぎればファイルサイズは肥大化します。掲載箇所に応じた適切な横幅へリサイズすることが最優先です。
| 掲載箇所・用途 | 推奨される横幅（px） | 推奨フォーマット | 目標ファイル容量（1枚あたり） |
|---|---|---|---|
| OGP画像・記事アイキャッチ | 1200px × 630px | WebP（またはJPEG） | 100KB 〜 180KB 以内 |
| 記事本文内の解説画像・写真 | 800px 〜 1200px | WebP | 50KB 〜 120KB 以内 |
| サムネイル・一覧カード画像 | 400px 〜 600px | WebP | 20KB 〜 50KB 以内 |
| サイトロゴ・シンプルなアイコン | ベクターデータ | SVG | 5KB 〜 15KB 以内 |
3. HTML側でさらに表示速度を高める実装ベストプラクティス
画像をWebPに変換して軽量化した後、HTMLの img タグに以下の属性を記述することで、ブラウザのレンダリングパフォーマンスをさらに引き上げることができます。
- ✓ width属性とheight属性を必ず明記し、画像読み込み前後のレイアウトシフト（CLS）を防ぐ
- ✓ ファーストビューより下にある記事内画像には loading="lazy"（遅延読み込み）を設定する
- ✓ ページの最上部にあるメインビジュアル（LCP要素）には loading="eager" および fetchpriority="high" を指定する
この記事と連動する無料Webツール
画像リサイズ＆WebP・JPEG軽量化コンバーター
インストールや会員登録は不要。ブラウザ上ですぐに無料で計測・変換をお試しいただけます。
ツールを今すぐ使ってみる →