JPEG・PNG・WebPのどれで保存するか。写真と図で答えが変わる理由

同じ画像を、JPEGで保存するかPNGで保存するかで、ファイルサイズが数倍変わることがあります。
どちらが軽いかは画像によって逆転するので、「PNGは重い」といった覚え方では外します。

判断は、写真か図か、透過が要るかどうかで決まります。

写真はJPEG、図はPNG

JPEGは、隣り合った色の差を大きく削ります。
写真は色がなだらかに変化するので、多少削っても目には気づきにくく、よく縮みます。

一方、図やスクリーンショットのように、はっきりした線と均一な色面でできた画像では、削った部分が目立ちます。
文字の輪郭がにじみ、線の周りに影のようなものが出ます。

PNGは逆です。同じ色が続く部分をまとめて記録するので、均一な色面の多い図でよく縮みます。
写真のように全画素が違う色だと、まとめる余地がなく、大きいまま残ります。

透過が必要ならPNGかWebP

背景を透明にしたい場合、JPEGは選べません。透過を記録する仕組みを持っていないためです。

透過が要るならPNGか、WebPになります。

WebPは両方できる

WebPは、JPEGのような削り方と、PNGのような記録の仕方の両方を持っています。透過にも対応します。

同じ見た目であれば、JPEGよりもPNGよりも小さくなることが多い形式です。
Web上で使うなら、まずWebPを試して問題がなければそれでよい、という判断で足ります。

注意点は、受け取る側のソフトが対応しているかどうかです。
ブラウザはほぼ対応していますが、古いソフトや、社内の決まった業務システムに投げる場合は、開けないことがあります。相手が決まっている場面では、事前に確認しておくほうが安全です。

GIFはアニメーション専用と考える

もうひとつGIFがありますが、静止画で選ぶ理由はほぼありません。
扱える色数が256色までなので、写真では色が足りず、図でもPNGのほうが小さく収まります。

動くものを1ファイルで渡したいとき。用途はそこに絞って構いません。

迷ったときの決め方

順番に見ると迷いません。

透過が要るか。要るならJPEGは外れます。
写真か図か。写真ならJPEGかWebP、図ならPNGかWebP。
相手が決まっているか。決まっていて対応が不明ならWebPは避ける。

この3つで、たいていは決まります。
どちらでもよさそうなら、両方で保存して小さいほうを採る、という決め方でも構いません。