画像圧縮の仕組み：JPEG、PNG、WebPを徹底解説

Last updated: 2026年6月27日

画像圧縮は、人間の目があまり捉えられない情報を除去することでファイルを縮小します。各フォーマットがどの情報を取り除くかを理解することは、なぜ JPEG がテキストをぼかすのか、なぜ PNG はサイズが大きいままなのか、そして WebP と AVIF が写真で優れているのかを知る手がかりになります。これはマーケティング比較ではなく、実際のアルゴリズムについての実務的な解説です。

簡単な回答：画像圧縮はどのように機能するか？

すべての web 画像フォーマットは2つの役割を果たします。まずピクセル値を予測し、繰り返しデータが崩壊するようにし、次にその予測誤差を効率的にエンコードします。ロッシー形式（JPEG, WebP lossy, AVIF）はさらに量子化も行います。これは、人間がほとんど知覚できない高周波のディテールを丸める処理です。ロスレス形式（PNG, WebP lossless）は量子化をスキップし、すべてのピクセルを保持します。

実用的な判断基準：

フォーマットの決定については AVIF vs WebP vs JPEG comparison を参照してください。この記事では、各エンコーダー内部で何が起こるかに焦点を当てています。

ロスリーとロスレスの違いとは？

ロスレス (Lossless) 圧縮は、元のピクセルをピクセル単位で再構築します。これは、同一色の連続、繰り返しパターン、予測可能なグラデーションといった冗長性を見つけることで機能します。PNG, GIF, および WebP-lossless がこのアプローチを使用しています。限界は画像のエントロピーであり、ランダムノイズはほとんど圧縮されません。

ロッシー (Lossy) 圧縮は情報を恒久的に破棄します。コツは、視覚システムが最も気づきにくい情報—細かい高周波テクスチャや微妙な色の違い—を捨てることです。JPEG, WebP-lossy, および AVIF がこれを行います。その対価として得られるのは、非常に小さいファイルサイズです。写真の場合、ロスレスと比較してしばしば 5–10× 小さくなります。

フォーマットは特定の技術を使用します：

JPEG圧縮は実際にどのように機能するか？

JPEGは典型的なロッシーパイプラインです。5つのステージが順番に実行されます：

JPEGがテキストやシャープなエッジをぼかす理由: 高周波成分はエッジを担っており、量子化によってそれらがゼロにされてしまうためです。品質を十分に低く設定すると、8×8のブロックノイズが見えます。

単一の羽毛のディテールで量子化が機能している様子を見ることができます。同じ 500×280 の領域を3つの品質レベルでエンコードした結果は、品質スライダーが何をトレードオフしているかを正確に示しています：

q95では羽の羽根がはっきりと残っています。q75になると、細かい繊維がぼやけ始めます。q50では 8×8 のブロックが明確に見え、テクスチャがにじみ、ファイルサイズは小さくなっていますが、そのロスは閲覧者が気づくレベルになっています。

PNG圧縮はどのように機能するか？

PNGはロスレスであり、完全に異なる方法で機能します。2つのステージがあります：

1. 行フィルタリング (Row filtering)。 圧縮の前に、各スキャンラインがより予測可能になるようにフィルタリングされます。PNG は5種類のフィルター（None, Sub, Up, Average, Paeth）を定義しており、エンコーダーは行ごとに最適なものを選びます。

2. DEFLATE圧縮。 フィルタリングされたバイトは、LZ77（繰り返されるシーケンスを見つけ、バックリファレンスに置き換える）と Huffman コーディング（一般的な値に対する短いコード）を組み合わせたもの—ZIPが使用するのと同じアルゴリズム—を通ります。

実際に役立つ PNG 最適化のヒント：

• フラットなグラフィックには PNG-8 (インデックスカラー、≤256色) を使用すると、PNG-24よりもはるかに小さくなります。
• 不要なチャンクを削除する：EXIF、未使用の ICC プロファイル、画像が不透明の場合はアルファチャネル。
• optipng または pngquant で再圧縮する（後者は、どうしても PNGでなければならない写真に対してディザリングを使用して8ビットに変換し、大きな節約を実現します）。

WebPは両方より小さいのはなぜか？

WebPには2つの独立したモードがあります：

• Lossy WebP は VP8 ビデオコーデックから借用しています。フレーム全体（JPEGのように単なる 8×8 ブロック内ではない）でブロック予測を使用し、4×4 および 8×8 の変換を行い、より優れた算術エントロピーコーディングを使用します。その結果は、同等の品質での JPEG と比較して約 25–34% 小さくなります。
• Lossless WebP は最大13の予測モード、チャネルをデコレーションするための色空間変換、および LZ77 のバリアントを使用します。同じコンテンツの場合、通常 PNG よりも ~20–26% 小さいです。

AVIF は、AV1 ビデオコーデックのイントラフレームツールを使用してさらに進んでおり、WebP lossy をさらに 20–30% 上回ります。その代償はエンコード速度であり、AVIF の生成は時間がかかります。WebP および AVIF を出力するツールについては TinyPNG alternatives ガイドを参照してください。

圧縮品質を測定するにはどうすればよいか？

2つの指標が主流です。どちらも完璧ではありません。両方を使用してください。

PSNR は計算が簡単ですが、人間が気づくものを無視します。SSIM は知覚とより相関しますが、注意を引くアーティファクト（テキスト周辺のリンギングなど）は依然として過小評価しがちです。実際の製品決定を行う際は、単一の数値を信頼するよりも、意図した表示サイズで目視確認することが重要です。

Mozilla の JPEG quality study および Google の WebP compression study は、比較を再現したい場合に方法論とサンプル画像を公開しています。

どのような品質設定を使用すべきか？

これらのデフォルトから開始し、コンテンツに合わせて調整します。これらはガイドラインであり、絶対的なルールではありません。

数字よりも重要な2つのルール：

• 品質の数値ではなく、視覚的な品質を一致させて比較する。AVIF q60、WebP q75、JPEG q85 は見た目上ほぼ同じに見えます。「q80」で全てを比較しても意味がありません。
• 圧縮する前にリサイズする。4000px のカメラオリジナルを JPEG q80 で圧縮しても、ダウンロードサイズは依然として 4000px です。まず表示サイズにダウンスケールすることが、どのような品質調整よりも多くのバイトを節約します。

サイズ対品質のカーブが、なぜ 75–85 の範囲が一般的な推奨値なのかを示しています。同じ羽毛ディテールで、ファイルサイズは最初は急激に減り、その後平坦になります—そして、q75を下回ると目に見える品質低下が加速します。この点を過ぎて圧縮しても、節約できるバイトはほとんどありませんが、本質的なディテールを失います：

実務で画像をうまく圧縮するには？

1. 適切なマスターから始める。 RAW または高品質な JPEG で撮影します。圧縮は累積するため、すでにロッシーなファイルを再エンコードすることは避けてください。
2. まずリサイズする。 他のステップを行う前に、Image Resizer を使ってページ上のボックスに合わせます。
3. コンテンツによってフォーマットを選ぶ。 写真 → WebP/AVIF lossy; テキスト/UI → PNG または WebP lossless。
4. 適切な品質でエンコードする。 写真の場合は Image Compressor で 75–80 から開始します。
5. パブリックウェブ向けにメタデータを削除する（アーカイブ用には EXIF を保持）。Image Converter はフォーマットとメタデータの両方を一度のパスで行えます。
6. 表示サイズで検査し、古いクライアントのために JPEG のフォールバックを提供する <picture> タグを使用する。

よくある間違い

• すでに圧縮された JPEG を再圧縮すること。 ロッシーなエンコードを繰り返すたびにアーティファクトが追加されます。マスターファイルを保持してください。
• テキストに対してクロマサブサンプリングを無視すること。 4:2:0 は写真には適していますが、色付きのテキストはにじませます。テキストが重いグラフィックには 4:4:4（または PNG）を使用してください。
• フォーマット間で単一の品質数値を信頼すること。 その数値は JPEG, WebP, AVIF で異なる意味を持ちます。
• リサイズする前に最適化を行うこと。 必ず最初にリサイズしてください—これが最大のバイト節約になります。
• JPEG フォールバックなしで AVIF/WebP を提供すること。 古いブラウザやメールクライアントは何もレンダリングしません。

関連ガイド

• AVIF vs WebP vs JPEG: Which Format Should You Use?
• Compress Images Without Losing Quality
• TinyPNG Alternatives Compared
• Image SEO Optimization Checklist
• Complete Image Optimization Checklist

よくある質問

画像圧縮はどのように機能しますか？

ロスレス圧縮 (PNG) は、ピクセルを変更することなく繰り返されるパターンを見つけ出しエンコードします。ロッシー圧縮 (JPEG, WebP) は、目があまり気づかない高周波ディテールを破棄し、残りをエンコードします。品質設定は、どれだけロッシー圧縮が情報を破棄するかを制御します。

ロスリーとロスレスの違いは何ですか？

ロスレスはすべてのピクセルを正確に保持し、完全に可逆的です (PNG, lossless WebP)。ロッシーはファイルを縮小するためにディテールを破棄し、元に戻すことができません (JPEG, lossy WebP)。写真ではロッシーがサイズで優位であり、グラフィックやマスターファイルではロスレスが品質で優位です。

写真を最もよく圧縮するフォーマットはどれですか？

AVIF（最小、最新のブラウザ）、次に WebP、そして JPEG です。PNG はロスレスであるため、写真には最大になりやすいです。ウェブ配信の場合、WebP が安全なデフォルトであり、エンコードでき、オーディエンスが最新のブラウザを使用している場合は AVIF を使用します。

圧縮は品質を低下させますか？

ロッシーは低下させますが、品質 80–85 の場合、閲覧サイズではロスは目に見えません。落とし穴は、ロッシーファイルを繰り返し再圧縮すること（世代劣化）であり、これがアーティファクトを累積させます。一度だけ、ロスレスマスターから圧縮してください。

画像クレジット

• カバー — Source code on a monitor の写真（Leonid Altman による Pexels Pexels より取得し、WebPに変換）。
• JPEG 品質ラダーとサイズ対品質カーブ — 作者がマカオの羽毛写真（Pexels #36720663、Kaca Skok による）から生成し、品質レベルごとの実際の測定された JPEG 出力を示しています。