Webサイトの表示速度に最も影響するのは画像です。Googleの調査によると、Webページの総データ量のうち約50〜70%を画像が占めています。つまり、画像の最適化はサイト高速化の最も効果的な手段です。
しかし、「とにかく圧縮すればいい」というわけではありません。画質とファイルサイズのバランスを正しく取ることが重要です。この記事では、用途別の最適な画像フォーマットと圧縮設定を解説します。
画像フォーマットの選び方 - JPEG・PNG・WebPの使い分け
まず、主要な3つの画像フォーマットの特徴を整理します。
| フォーマット | 圧縮方式 | 透過 | 向いている画像 | ファイルサイズ |
|---|---|---|---|---|
| JPEG | 非可逆 | × | 写真・グラデーション | 小さい |
| PNG | 可逆 | ○ | ロゴ・アイコン・スクリーンショット | 大きい |
| WebP | 非可逆/可逆 | ○ | ほぼ全ての用途 | 最も小さい |
WebPを第一選択にすべき理由
WebPはGoogleが開発した次世代フォーマットで、JPEGと比べて25〜34%小さいファイルサイズで同等の画質を実現します。PNGの透過もサポートしており、2026年現在、主要ブラウザの97%以上がWebPに対応しています。
| 変換前 | 変換後（WebP） | 削減率 |
|---|---|---|
| JPEG 500KB | WebP 350KB | 約30%削減 |
| PNG 2MB | WebP 600KB | 約70%削減 |
特にPNGからWebPへの変換は劇的な効果があります。
それでもJPEG・PNGが必要なケース
- JPEG：メール添付用など、互換性が最重要の場合
- PNG：印刷用データ、ピクセルパーフェクトが必要なUI素材
圧縮率の最適設定 - 画質を保つ限界点
「何%まで圧縮しても大丈夫か」は、画像の用途によって異なります。
用途別の推奨圧縮品質
| 用途 | JPEG品質 | WebP品質 | 目安���ァイルサイズ |
|---|---|---|---|
| ヒーロー画像・メインビジュアル | 80〜85% | 75〜80% | 150〜300KB |
| ブログ記事内の画像 | 75〜80% | 70〜75% | 80〜150KB |
| サムネイル・一覧用 | 70〜75% | 65〜70% | 30〜80KB |
| 背景画像（装飾） | 60〜70% | 55〜65% | 50〜100KB |
経験則：JPEG品質80%、WebP品質75%がほとんどの場合の「スイートスポット」です。これ以上の画質では目視での違いがほぼわかりません。
圧縮しすぎると起きる問題
品質60%未満に設定すると、以下の劣化が目立ち始めます。
- 文字のエッジがにじむ（テキスト入り画像は要注意）
- グラデーション部分にバンディング（縞模様）が出る
- 人肌のトーンが不自然になる
- ロゴの色が変わる
画質の劣化が気になる場合は、画像圧縮ツールでプレビューを確認しながら調整してみてください。
リサイズの最適設定 - 無駄に大きな画像を配信しない
スマホで撮った写真は4,000×3,000px（1,200万画素）以上になることが多いですが、Webページで表示するにはそこまでの解像度は不要です。
ディスプレイ幅に合わせた推奨サイズ
| 用途 | 推奨横幅 | 理由 |
|---|---|---|
| フルワイド（PCメイン画像） | 1,920px | フルHDモニターに対応 |
| 記事本文内 | 800〜1,200px | コンテンツ幅に十分 |
| サムネイル | 400〜600px | 一覧表示に最適 |
| OGP画像（SNS共有用） | 1,200×630px | 各SNSの推奨サイズ |
Retinaディスプレイへの対応
高解像度ディスプレイ（Retina）では、表示サイズの2倍の解像度があるときれいに見えます。
例：記事内で横幅800pxで表示する画像 → 元画像は1,600pxで用意
ただし、2倍にするとファイルサイズは約4倍になるため、WebP形式での圧縮と組み合わせることが重要です。
画像のリサイズは画像リサイズツールで簡単にできます。幅・高さの指定やアスペクト比の維持も可能です。
実践：画像最適化の手順
Web用画像を最適化する具体的な手順をまとめます。
ステップ1：フォーマットを選ぶ
- 写真 → WebP（対応できない環境向けにJPEGも用意）
- ロゴ・アイコン → SVG（ベクター）またはWebP
- スクリーンショット → WebPまたはPNG
ステップ2：リサイズする
- 表示サイズの2倍（Retina対応）を上限に縮小
- 画像リサイズツールで一括処理
ステップ3：圧縮する
- WebPなら品質75%、JPEGなら品質80%を基本に
- 画像圧縮ツールでプレビューを見ながら調整
- テキスト入りの画像は品質を高めに設定
効果の目安
| 処理 | 元サイズ | 最適化後 | 削減率 |
|---|---|---|---|
| スマホ写真をそのまま掲載 | 5MB | — | — |
| リサイズのみ（1,200px） | — | 800KB | 84% |
| リサイズ＋JPEG 80% | — | 200KB | 96% |
| リサイズ＋WebP 75% | — | 130KB | 97% |
元の5MBが130KBになれば、ページ読み込み速度は劇的に改善します。