画像圧縮のしくみ:JPEG・PNG・WebP・AVIFは何を捨てて小さくしているのか

4000×3000の写真を無圧縮で保存すると、1,200万画素×3バイト(赤・緑・青)で約36MBになります。同じ写真がスマートフォンのカメラロールでは3〜5MB程度です。この9割近い差を生んでいるのが画像圧縮で、やり方は大きく二つに分かれます。

可逆と非可逆:元に戻せるかどうか

可逆圧縮は、展開したときにピクセルが1ビットも違わず元どおりになる方式です。ZIPと同じく、データの中の繰り返しや規則性を見つけて短く書き直します。どれだけ縮むかは画像の単調さ次第で、白地に図形がいくつかあるだけの図なら数十分の一になりますが、ノイズだらけの夜景写真はほとんど縮みません。PNG、GIF、可逆WebPがこちらです。

非可逆圧縮は元に戻せません。人の目が気づきにくい情報を選んで捨て、捨てる量を「品質」という数字で調整します。JPEG、非可逆WebP、AVIFがこちらです。写真で非可逆圧縮が圧倒的に強いのは、写真のデータ量の大半が、ほとんど見えない細かな変化(センサーノイズや細かな質感)に使われているからです。

よくある誤解に「PNGは高画質、JPEGは低画質」というものがあります。一度JPEGになった写真をPNGで保存しても、JPEGで失われた部分はそのまま残り、ファイルが数倍に膨らむだけです。画質は情報を捨てた時点で決まり、形式はそれをどう効率よく入れるかの違いにすぎません。

JPEG:色を分け、周波数に変え、丸める

JPEGの規格ITU-T T.81は1992年9月に承認されました。30年以上たった今も最も使われている写真形式で、その後の非可逆画像形式もほぼ同じ骨組みを受け継いでいます。

ステップ1:明るさと色を分ける

まずRGBを、明るさ(Y)と二つの色差(Cb・Cr)に変換します。人の目は明るさの変化には敏感ですが、色の細かな変化には鈍感です。そのため色差チャンネルは解像度を落としても気づかれにくく、縦横とも半分にする4:2:0なら色のデータは4分の1になります。横だけ半分なら4:2:2、落とさなければ4:4:4です。

おなじみの劣化もここから始まります。白地の細い赤文字は、明るさの差は小さく色の差が大きい対象です。色の解像度を半分にすると赤が隣のピクセルへにじみ、輪郭がぼやけます。旅行写真ではまったく目立たないのに、バナーや図表、字幕のスクリーンショットでは妙に目につくのはこのためです。

ステップ2:8×8ブロックとDCT

各チャンネルを8×8ピクセルのブロックに区切り、ブロックごとに**離散コサイン変換(DCT)**をかけます。DCTは64個のピクセル値を64個の周波数成分に置き換えます。左上の値(DC成分)はブロックの平均で、右下へ行くほど細かい縞模様の強さを表します。変換そのものでは何も失われません。同じ情報を別の座標で表しただけです。

役に立つのは、自然な写真のブロックの多くがなだらかに変化するという性質です。エネルギーは低い周波数の数個に集まり、高い周波数の値は0付近の小さな数になります。

ステップ3:量子化 — 情報を捨てる唯一の場所

各周波数成分を量子化テーブルの対応する数で割り、整数に丸めます。高い周波数ほど大きな数で割るようにテーブルが作られているので、小さな高周波成分はほとんど0になります。品質スライダーは、結局このテーブルをどれだけ大きくするかを決めるつまみです。品質を下げれば割る数が大きくなり、0が増えます。

0が長く続くデータは、次のハフマン符号化(エントロピー符号化)でごく短く書かれます。この最後の段階は再び可逆です。

ブロックノイズとリンギングの正体

品質を大きく下げると、各ブロックには平均値と低周波が少し残るだけになります。ブロックはそれぞれ独立に近似されるため、隣との境目が合わなくなり8×8の格子が浮き出ます。青空や壁のなだらかなグラデーションが階段状に見えるのがこれです。

文字や線のような鋭い境界は、本来たくさんの高周波成分がないと描けません。そこを切り落とすと境界のまわりに波紋のようなモヤ、つまりリンギングが出ます。スクリーンショットをJPEGで保存すると文字のまわりが汚れて見える理由です。

JPEGをもう一度JPEGで保存すると、既存のブロックノイズの上に新しい量子化誤差が加わります。品質100で保存し直しても元には戻らず、むしろ古いノイズまで「細部」として残そうとしてファイルが大きくなることがあります。

PNG:差分を記録してdeflateでまとめる

PNGは1990年代半ば、特許問題を抱えたGIFの代わりとして作られました。2025年6月には第3版がW3C勧告になっています。圧縮は二段階です。

一段目はフィルターです。行ごとに五種類から一つを選び、各バイトを近くのピクセルとの差に置き換えます。何もしないNone、左との差のSub、上との差のUp、左と上の平均との差のAverage、そして左・上・左上の三つから予測するPaethです。単色の背景やなめらかなグラデーションは、0や小さな数に変わります。

二段目はdeflateです。ZIPと同じ系統の圧縮(最大32KBの窓で繰り返しを探すLZ77とハフマン符号化)で、フィルター後のデータをまとめます。0の連続はほとんど場所を取りません。

だからPNGは、スクリーンショット、UI、ロゴ、図表のように色が少なく同じ値が繰り返される画像に強い形式です。写真はその逆で、ノイズのせいで隣との差もばらばらになり、フィルターがほとんど効きません。同じ写真をPNGにするとJPEGの数倍になるのが普通です。

同じ画像のPNGでも、行ごとにどのフィルターを選ぶか、deflateでどこまで粘って一致を探すかでサイズが変わります。専用の最適化ツールがPNGを可逆のまま小さくできるのも、ブラウザ内蔵のエンコーダーで保存し直すと元より大きくなることがあるのも、これが理由です。

WebP:動画コーデック生まれの写真形式

Googleは2010年9月30日、ChromiumブログでWebPを発表しました。非可逆WebPは動画コーデックVP8のキーフレーム圧縮を流用したもので、JPEGと同じDCTと量子化の骨組みに二つの仕組みを足しています。

ブロック予測:すでに処理した周りのブロックから現在のブロックを予測し、予測と実際の差(残差)だけを変換して保存します。
適応的なビット配分と算術符号化:画像を領域に分け、単調な所には少なく、複雑な所には多くビットを割り当てます。

可逆WebPはPNGとはまったく別の設計で、空間予測、色チャンネル間の相関除去、パレット、LZ77の後方参照、最近使った色のキャッシュなどを組み合わせています。Googleの資料では、同等の見た目でWebPはPNGやJPEGより約30%小さく、透過PNGを非可逆+アルファのWebPに置き換えると平均60〜70%小さくなったとしています。非可逆でありながら透明度を持てる点が、JPEGとのいちばん大きな違いです。

AVIF:AV1動画コーデックの静止画

AVIFは、Alliance for Open Media(AOMedia)が策定した動画コーデックAV1で圧縮した画像を、HEIFコンテナ(ISOベースメディアファイル形式が土台)に収めた形式です。大きく可変のブロック、多方向の予測、強力なフィルターのおかげで、低容量ではブロック状に崩れるより、なめらかにぼやける方向へ劣化します。HDRや広色域、10・12ビットの色深度も扱えます。

代償はエンコード時間です。JPEGやWebPよりずっと時間がかかり、ブラウザのcanvasからAVIFを書き出せる環境も限られます。品質の数字の意味も違い、AVIFの50がJPEGの80と同じくらいに見えることはよくあります。形式をまたいで品質値をそのまま比べてはいけません。

ブラウザの対応時期

Can I useによる、完全対応が始まったバージョンは次のとおりです。

ブラウザ	WebP	AVIF
Chrome	32	85
Firefox	65	93
Safari	16.0(14〜15.6は一部対応)	16.4(iOSは16.0から)
Edge	18	121

WebPはChromeが先行し、FirefoxとSafariがかなり遅れて追いついたため、しばらく「iPhoneで表示されない形式」という印象がありました。いまはどちらも世界のブラウザ利用の95%以上で表示できます。ただし表示(デコード)と保存(エンコード)は別の機能です。AVIFを表示できるブラウザでも、canvasからAVIFファイルを作れるとは限りません。

どれを選ぶか

場面	おすすめ	理由
Webに載せる普通の写真	WebPかAVIF、互換性が心配ならJPEG	非可逆圧縮の効果が最も大きい
スクリーンショット、書類、図表	PNG、または品質90以上のWebP	文字のリンギングと色にじみを防ぐ
透過背景のロゴ・アイコン	配信は高品質WebP、原本はPNG(できればSVG)	JPEGは透明度を持てない
今後も編集する原本	PNGかカメラの元ファイル	保存のたびに劣化が積み重ならないように
古いシステム、メール添付	JPEG	どこでも開ける

もう一つ覚えておきたいのは、品質より解像度のほうが効くということです。ファイルサイズはおおむねピクセル数に比例するので、4000pxの写真を2000pxにすればピクセルは4分の1になります。幅1000pxで表示する写真を4000pxのまま載せて品質を40まで下げるより、先に画像リサイズで適切な大きさにして品質は余裕を持たせたほうが、小さくてきれいなファイルになります。

どの品質で容量カーブが折れ曲がるかは写真ごとに違います。画像圧縮ツールは複数の品質で実際にエンコードしてその点を選び、たくさんのファイルの形式をまとめて変えたいときは画像変換ツールが使えます。