画像はウェブページの総転送量の50〜70%を占めることが多く、表示速度に最も直接的な影響を与える要因です。画像を圧縮することは必ずしも画質の犠牲を意味しません。圧縮の原理を理解し、適切なフォーマットを選び、正しい品質パラメータを設定することで、ほとんどの場合に人間の目でほぼ違いを感じさせることなく、ファイルサイズを60〜80%削減できます。
1. 非可逆圧縮 vs 可逆圧縮：原理とトレードオフ
画像圧縮は大きく2種類に分かれます。どちらを選ぶかは画像の用途によります：
| 種類 | 仕組み | 代表フォーマット | 適した用途 |
|---|---|---|---|
| 非可逆圧縮 | 人間の目では気づきにくい高周波の細部を破棄し、完全には復元できない | JPEG、WebP（非可逆）、AVIF | 写真、リアルなイラスト、SNS |
| 可逆圧縮 | データの繰り返しパターンをエンコードし、完全に復元できる | PNG、WebP（可逆）、GIF | スクリーンショット、ロゴ、アイコン、正確な色が必要なデザイン |
よくある誤解：「PNGは必ずJPEGより高画質だ」。画質はフォーマットではなく圧縮の種類に関係します。PNGは可逆形式でスクリーンショットやアイコンに適し、JPEGは非可逆形式で写真に適しています。写真をPNGで保存しても鮮明にはなりません——ただファイルが大きくなるだけです。
2. 品質パラメータ（Quality）とは何か？
JPEGとWebP非可逆モードには0〜100の品質パラメータがあります。これは線形ではなく、細部の破棄量に対応しています：
- 85〜95：原画像とほぼ区別がつかない。印刷や拡大表示に適しているが、ファイルは大きい
- 75〜85：ウェブ写真のゴールデンゾーン——人間の目にはほぼ違いが分からず、ファイルサイズを40〜60%削減できる
- 60〜75：サムネイルやSNS画像では許容範囲。小さいサイズでの表示では十分な品質
- 60未満：圧縮アーティファクトが目立ち始め、非常に低帯域の特殊用途にのみ適する
オンライン画像ツール：画像ツールはフォーマット変換と圧縮をサポートし、ブラウザのローカルで処理されます——画像はサーバーにアップロードされないため、個人情報や機密コンテンツを含む画像の処理にも安心です。
3. WebP：現代のウェブに最適なフォーマット
WebPはGoogleが2010年に導入したフォーマットで、主要ブラウザ（Chrome、Firefox、Safari 14+、Edge）はすべて対応済みです。従来のフォーマットと比較すると：
| 比較項目 | JPEG | PNG | WebP |
|---|---|---|---|
| 非可逆圧縮 | 対応 | 非対応 | 対応（同品質でJPEGより25〜35%小さい） |
| 可逆圧縮 | 非対応 | 対応 | 対応（PNGより約26%小さい） |
| 透過（Alpha） | 非対応 | 対応 | 対応 |
| アニメーション | 非対応 | 限定（APNG） | 対応 |
| ブラウザ対応 | すべて | すべて | 主要ブラウザ（IE非対応） |
フォーマット変換：画像ツールを使うと、JPEGやPNGを一クリックでWebPに変換でき、圧縮後の結果とファイルサイズの変化をリアルタイムでプレビューできます。
4. PDF内の画像
PDFファイルが大きすぎる場合、多くはその中に埋め込まれた画像が圧縮されていないことが原因です。PDFに埋め込む前に画像を適切な品質（75〜85）に圧縮することをお勧めします。埋め込んでからPDFツールで圧縮するより、結果が予測しやすくなります。
PDFサイズを削減：PDFツールでPDFファイルを圧縮できます。画像を多く含むPDF文書のサイズを減らすのに最適です。
まとめ
- 写真には非可逆圧縮（JPEG・WebP）、スクリーンショット・ロゴ・アイコンには可逆圧縮（PNG・WebP可逆）を使う
- 品質パラメータは80から始め、アーティファクトが「かろうじて見えない」最低値を見つける
- WebPは現代ウェブの最良の選択：同品質でJPEGより25〜35%小さく、透過とアニメーションにも対応
- レスポンシブ画像（srcset）により、各デバイスが必要な解像度の画像だけをダウンロードできる
- PDFに埋め込む前に画像を圧縮することで、より効果的な結果が得られる