PNGかJPGか？ 10年使っている判断の一問

PNGとJPGは、20年以上にわたって「この画像を保存」の二つのデフォルトの答えでした。そして多くの人は、その選択をなんとなくで済ませています —— 書き出しダイアログが最初に選んでいたほう、というだけで。それでも困らないのは、誰かに9MBのスクリーンショットをメールする日、あるいはロゴのまわりに醜い灰色の縁をつけたまま出してしまう日まで。そこで急に、選択が意味を持ち始めます。

ただ、実はこの判断は本当にシンプルです。約10年間ずっと問い続けている一つの質問に行き着き、そしてこれまで一度も外したことがありません。

その一問

この画像は、輪郭でできているか、それとも光でできているか。

これだけです。文字、ロゴ、アイコン、スクリーンショット、図表、線画 —— くっきりした境界と平坦な色の面を持つものは、すべて「輪郭」です。写真、グラデーション、なめらかに連続した階調と何千もの微妙な色の移り変わりを持つものは、すべて「光」です。

輪郭はPNGを求め、光はJPGを求めます。ほぼすべてが、そこから導かれます。

輪郭がPNGを求める理由

PNGは可逆です。保存した画素は、何度開き直しても、正確に、永遠にそのまま返ってきます。圧縮は同じ色の連なりを見つけることで行われ、それはまさに輪郭ベースの画像に満ちているもの —— 単色のボタン、白い背景、黒い線。PNGはそれを難なく飲み込み、かみそりのように鋭いまま保ちます。

アルファチャンネルも持つので、本当の意味で透明にできます。だから、色のついた背景に載せたいロゴはすべてPNGであるべきなのです。JPGには透明が一切なく、その領域を白で埋めます —— 醜い縁は、そこから生まれます。

破綻するのは写真です。写真をPNGで保存すると、センサーノイズの一粒一粒も、微細なグラデーションも、律儀にフル解像度で記録し、ファイルは膨れ上がります。PNGが無駄なのは、悪いからではありません。あなたの目なら喜んで見逃すディテールについて、正直すぎるからです。

光がJPGを求める理由

JPGは非可逆です。目が気づきにくい情報 —— 細かな色の変化、高周波のディテール —— を捨て、しかも写真ではそれを見事にやってのけます。写真には、まさにそういう余分な情報がたっぷりあるからです。結果はごく一部のサイズのファイルで、何が欠けたのかは見えません。

ところがJPGを輪郭に向けると、崩れます。くっきりした境界のまわり —— とくに文字のまわり —— にぼんやりしたノイズを塗り広げます。鋭い輪郭こそ、JPGが捨てるよう設計された高周波のディテールそのものだからです。コードのJPGスクリーンショットは、どの文字のまわりも少し汚れて見えます。モニターのせいではありません。間違った入力に対して、形式が設計どおりに働いているだけです。

決着をつけるサイズ表

同じ2枚の元画像を、適切な設定で両方の形式で保存しました。

両方向から読んでください。写真はJPGにすると約5分の1のサイズになり、見た目の劣化はありません。ところがスクリーンショットとロゴは、JPGにするとむしろ大きくなり —— しかも縁取りやぼやけで見た目も悪くなります。どちらが小さいかは、画像の中身によって完全に逆転します。3行に詰まった教訓のすべてです。

特殊なケース（知る価値があるのは二つだけ）

透明はPNGを強制します。 画像のどこかが透けている必要があるなら、中身に関係なくJPGは選択肢から外れます。物理的にアルファチャンネルを保存できないからです。透明な背景に切り抜いた写真ですら、PNG（またはWebP）にするしかありません。

写真の上の文字は、判断が分かれます。 キャプションを焼き込んだ写真は、半分が光、半分が輪郭です。ほぼ写真ならJPGにして少し甘い文字を受け入れ、文字をくっきり保つ必要があってサイズに余裕があるならPNGにします。きれいな勝者はいません。どちらの欠点を引き受けるかを選ぶことになります。

すでに間違ったほうを持っている場合

たいていの場合、あなたは書き出しで選んでいるのではなく、誰かがすでに間違って保存したファイルを押しつけられています。カメラマンから14MBのPNGが届く。デザイナーから縁取りの出たJPGでロゴが送られてくる。それはもう、ただの変換です。

賢い方向に進むこと —— 重すぎる写真ならPNG→JPG —— は明確な勝ちで、ここのブラウザ内で動くのでファイルは端末から出ません。逆方向 —— JPG→PNG —— は正直ですが限界があります。ここから先を可逆にするだけで、それは編集前に望むことではあるものの、JPGがすでに焼き込んだノイズを取り除くことはできません。非可逆は一方通行の扉です。PNGへの変換は、その扉を逆にくぐらせてくれるわけではなく、これ以上失うのを止めるだけです。

例の一問 —— 輪郭か、光か —— を問えば、ほぼ毎回正解できます。今でも書き出しのたびに問うています。0.5秒しかかからず、それがどれだけ多くの灰色の縁から救ってくれたことか。