JPEG・PNG・WebP をどう使い分けるか

2026-09-22

画像の形式選びには、覚えることがひとつしかない。その画像が写真か、そうでないかだ。ここを外すと、軽くするつもりの変換で逆にファイルが大きくなる。

同じ画像を各形式で保存して測った。1200×800の2枚を使っている。1枚は写真に近い連続階調の画像、もう1枚はスクリーンショットに近い平坦な色面の画像で、どちらも手元で生成した合成画像だ。実写ではないので絶対値は参考値だが、桁の違いは形式の仕組みから来るもので、実際の画像でも同じ方向に出る。

	PNG	JPEG q80	WebP q80	WebP 可逆	AVIF
写真に近い画像	1041.8KB	74.9KB	24.4KB	742.5KB	21.5KB
画面に近い画像	4.9KB	33.9KB	4.3KB	0.5KB	2.0KB

太字にした数字がこの記事の要点だ。平坦な画像をJPEGにすると、PNGの約7倍に膨らんだ。

なぜ逆転するのか

JPEGは画像を8×8のブロックに切り、それぞれを周波数の成分に分解して、細かい変化を表す成分を捨てる。写真のように隣の画素と少しずつ違う画像では、捨てても見た目がほとんど変わらないので、劇的に小さくなる。

平坦な色面と細い線でできた画像は、この方式と相性が悪い。色が急に切り替わる境界は高い周波数の成分になるので、捨てると輪郭が汚れる。汚さないためには捨てずに持つしかなく、結果として容量が膨らむ。しかも文字やUIの縁には、モスキートノイズと呼ばれるにじみが出る。

PNGは逆だ。同じ色の並びをまとめて記録するので、平坦な面が多いほど小さくなる。写真のように全画素が微妙に違う画像では、まとめる相手がいないので効かない。実測で1MBを超えているのはそのためだ。

JPEGは「捨てて小さくする」、PNGは「まとめて小さくする」。画像の性質がどちらに向いているかで決まる。

WebPでいい。実測ではJPEGの3分の1になった。

ただし、ここは数字の読み方に注意が必要だ。JPEGの品質80とWebPの品質80は、別の物差しの80である。同じ数字でも同じ画質を意味しない。品質を変えながら測るとこうなる。

WebPのほうが同じ数字でより強く圧縮している。見比べて決めるのが確実で、迷うならWebPは85前後から試すとよい。

JPEGを選ぶ理由が残る場面もある。相手に送る先が古いソフトだったり、印刷所に入稿したりする場合だ。迷ったら、送り先がWebPを開けるかで決める。

PNG、またはWebPの可逆モードを選ぶ。JPEGだけは選ばない。容量が増えるうえに文字がにじむので、いいことが何もない。

実測ではWebPの可逆モードが0.5KBと最小だった。PNGの10分の1で、しかも画質は完全に同じだ。

PNGかWebPを選ぶ。JPEGは透過を扱えない。

透過したPNGをJPEGに変換すると、透明だった部分が黒く塗り潰されて出ることが多い。このサイトのツールでは、JPEGを選んだときに透明部分を白で塗るようにしている。黒く出るよりは事故が少ないという判断だが、透過を残したいならJPEGを選ばないことが本筋だ。

「どれくらい捨てるか」の目盛りで、画質のパーセンテージではない。品質80は「元の80%の画質」という意味ではないし、100にしても元には戻らない。

上の表のとおり、数字を下げるほど容量は落ちるが、落ち方は一定ではない。95から85へ下げると半分以下になるのに、70から60ではあまり変わらない。高いほうを少し削るのが一番効く。 95で保存しているなら、85にするだけで半分以下になる。

JPEGとWebPの非可逆モードは、保存した時点で情報を捨てている。後からどの形式に変換しても、捨てた分は戻らない。

JPEGをPNGに変換しても画質は上がらない。容量だけが増える。実測の写真でも、JPEG 74.9KBをPNGに戻せば1MB近くまで膨らむが、中身は劣化したままだ。

編集を繰り返す予定があるなら、元データはPNGなどの可逆形式で持っておき、配布するときだけ非可逆形式に変換する。

実測ではAVIFが最小だった。写真で21.5KB、画面で2.0KBと、WebPをさらに下回る。

対応状況も悪くない。Chrome 85、Firefox 93、Safari 16.4、Edge 121 が対応していて、グローバルの対応率は95.36%だ（2026年8月時点）。

それでもWebPを勧める理由は、書き出せる場所がまだ限られているからだ。読むことはできても、手元のツールやブラウザで作れるとは限らない。このサイトのツールがJPEG・PNG・WebPの3つに絞っているのもこのためで、ブラウザの標準機能だけで確実に書き出せるのがこの3つになる。

Webサイトに載せる画像で最後の数KBまで削りたい場合は、<picture> 要素でAVIFを先に、WebPを次に、JPEGを最後に並べておくと、ブラウザが対応する中で最初のものを選んでくれる。

写真以外をJPEGにしない。 これだけ守れば、大きく外すことはない。

使ったのは Pillow 12.2.0 と、1200×800の合成画像2枚。JPEGとWebPは optimize / method=6 を有効にし、AVIFは品質50で保存した。