画像はWebページの平均容量の50%以上を占めます。つまり、サイトが遅い原因はほぼ常に画像です。画像を正しく圧縮することは、Webパフォーマンス、Core Web Vitalsのスコア、ひいてはSEOランキングに対して、最も投資対効果の高い単一の施策です。
GoogleのCore Web Vitalsは、Largest Contentful Paint（LCP）を主要なランキングシグナルとして使います。LCPはページの主要画像が表示されるまでの時間を測ります。未圧縮の3MBのヒーロー画像だけでLCPが4秒超 —— 「不良」と分類され —— ランキングを損ないかねません。
| フォーマット | 最適な用途 | ブラウザ対応 | JPEG比のサイズ |
|---|---|---|---|
| WebP | すべてのWeb画像（写真+図形） | 97%+のブラウザ | 25〜34%小さい |
| AVIF | 写真、高精細画像 | 約85%（IE/Safari 15は非対応） | 40〜50%小さい |
| JPEG | 写真（フォールバック） | 汎用 | 基準 |
| PNG | ロゴ、スクリーンショット、透過 | 汎用 | JPEGより3〜5倍大きいことが多い |
| SVG | アイコン、ロゴ、イラスト | 汎用 | 解像度非依存 |
| GIF | 避ける —— アニメーションWebPか動画を使う | 避ける | WebPの最大10倍大きい |
<picture> でAVIF → WebP → JPEGのフォールバックを使いましょう。互換性を犠牲にせず、各ブラウザが対応する最良のフォーマットを配信できます。
<picture>
<source srcset="img.avif" type="image/avif">
<source srcset="img.webp" type="image/webp">
<img src="img.jpg" alt="...">
</picture>| 画像タイプ | 最大幅 | 目標サイズ（WebP） | 目標サイズ（JPEG） |
|---|---|---|---|
| ヒーロー / バナー | 1920 px | <150 KB | <200 KB |
| ブログ記事のアイキャッチ | 1200 px | <80 KB | <120 KB |
| 商品画像（EC） | 800 px | <60 KB | <100 KB |
| サムネイル / カード画像 | 400 px | <20 KB | <35 KB |
| アバター / プロフィール写真 | 200 px | <10 KB | <15 KB |
| 背景（全画面） | 1440 px | <100 KB | <150 KB |
800pxの段組みに4000px幅の画像を配信しないこと。まず最大表示幅にリサイズします。Retina/HiDPI向けにはCSS表示サイズの2倍を —— 400pxの段組みには800pxの画像を用意し、その後しっかり圧縮します。
プライバシーと速度を最大化するには ImgMin を —— すべての処理がブラウザ内で行われます。最大10枚をドラッグし、圧縮し、ZIPでダウンロード。アップロードなし、制限なし、アカウント不要。
サーバー側のワークフロー（CI/CD、CMS）には、Sharp（Node.js）、Pillow（Python）、cwebp（CLI）などが自動化に優れた選択肢です。
ファーストビュー以下のすべての画像に loading="lazy" を追加します。ユーザーが画像付近までスクロールするまで読み込みを遅らせ、帯域を節約し初期読み込み時間を大幅に改善します。
<img> タグには必ず width と height 属性を指定しましょう。レイアウト内に場所を確保し、累積レイアウトシフト（CLS）—— SEOに影響するもう一つのCore Web Vitals指標 —— を防ぎます。
Cloudflare、Vercel、AWS CloudFrontを使っているなら、画像の自動最適化を有効にしましょう。これらのサービスはモダンブラウザにWebPを配信し、最適化版を世界中のエッジノードにキャッシュ —— レイテンシを大幅に下げます。
add_image_size() 呼び出しを実際の表示サイズに合わせる_800x.jpg 接尾辞で適切なサイズの画像を配信2026年の最良の既定はWebPです —— 同品質でJPEGより25〜34%小さく、97%以上のブラウザが対応。視聴者がモダンなChromeやFirefoxを使うなら、さらに高い圧縮のためAVIFを。JPEG/PNGはフォールバックに残しましょう。
ヒーロー画像：200KB未満。コンテンツ画像：100KB未満。サムネイル：30KB未満。背景画像：150KB未満。これらはWebP/JPEGの目標で —— 正確なしきい値は画像の複雑さによります。
はい、直接影響します。GoogleはCore Web Vitals（LCP、CLS）をランキングシグナルに使います。未圧縮の大きな画像はLCPが遅い主因です。画像を圧縮するとページ速度が上がり、直帰率が下がり、検索順位を有意に押し上げられます —— 特にモバイルで。
最終更新：2026年4月。ブラウザ対応率はcaniuse.comより。