JPEG・PNG・WebP、画像形式は結局どれを使うべきか

画像形式についての実務的な疑問は、突き詰めればすべて一つの分かれ道に行き着きます。その画像は、誰も気に留めないような情報を捨てても構わないのか、それとも可逆圧縮でそのまま生き残る必要があるのか、という点です。JPEGは非可逆形式です。人間の目では統計的にほぼ気づかれない細部を切り捨てることで圧縮しており、写真では驚くほどうまく機能する一方、輪郭のはっきりした線や単色の塗りは目に見えて劣化します。PNGは可逆形式です。ピクセルデータの中にある本物の冗長性を見つけて取り除くことで圧縮し、何も情報を捨てないため、シャープな輪郭や単色の塗りを完璧に再現できますが、写真的な細部をそこまで大きくは縮小できません。WebPが変わっているのは、この両方のモードを一つの形式でサポートしている点で、これこそがWebPが存在する最大の理由です。JPEGやPNGと同じ土俵で競う第三の選択肢というより、より新しい圧縮アルゴリズムを使って両者を得意分野で打ち負かそうとする試みなのです。

この使い分けを取り違えるのが、画像形式に関する最もありがちな失敗です。写真をPNGとして保存すると、見た目の恩恵が何もないまま無駄に巨大なファイルができあがります。可逆圧縮では、写真いっぱいに存在する細かく非反復的なディテールを意味のあるレベルまで縮小できないからです。逆にスクリーンショットやロゴをJPEGとして保存すると、PNGより小さいファイルにはなりますが、その代償としてすべての鋭い輪郭の周りに見た目にもわかるぼやけたアーティファクトが生じ、本来均一であるべき色もわずかに濁ります — これはまさにJPEGの圧縮が最も苦手とする2つの弱点です。

写真はピクセルレベルで見ると、その大部分が連続的なグラデーションと不規則で細かいディテールでできています — なめらかに変化する肌の色合い、微妙に異なる何千もの緑を含む葉、地平線から天頂にかけてゆるやかに色が変わる空などです。JPEGの圧縮アルゴリズムは、まさにこの種のコンテンツを利用するように設計されています。周波数領域で処理を行い、画像を大まかな色のパターンと細かいディテールに実質的に分離した上で、見る人がほぼ意識的には気づかないであろう細部の一部を捨てつつ、写真の視覚情報の大半を担う大まかなパターンは保持します。その結果、妥当な品質設定であれば元画像とほぼ見分けがつかないまま、非圧縮時のごく一部のサイズにまで写真を縮小できる形式が生まれます — 写真というコンテンツの性質にとって、これは本当に良いトレードオフです。

同じ圧縮アプローチこそが、写真以外のあらゆるコンテンツに対してJPEGを不向きにしている原因でもあります。文字の輪郭、ロゴの縁取り、UIのスクリーンショットにあるくっきりした線といった、鋭くコントラストの高いエッジは、まさにJPEGの圧縮が捨てる傾向にある高周波のディテールそのものであり、その結果として、本来くっきりしているはずの輪郭の周りにやわらかく、わずかに滲んだようなハローが目に見える形で現れます。これは技術的な原因を知らなくても多くの人が気づける、いわゆる「JPEGのアーティファクト」です。形式の欠陥というわけではなく、設計されたとおりの働きが、本来想定されていなかったコンテンツに適用された結果に過ぎません。

PNGはピクセルデータの中にある文字どおりの冗長性 — 同じ色の連続や予測可能なパターン — を見つけて取り除く汎用アルゴリズムで可逆圧縮を行い、JPEGのように情報を捨てることは一切ありません。単色のUIとくっきりしたテキストで埋まったスクリーンショット、少数の単色で構成されたロゴ、あるいはクリーンな線と塗りでできた図表は、まさに冗長性ベースの圧縮が得意とするコンテンツです。なぜなら、見つけ出せる文字どおりの繰り返しが本当に大量にあるからです。真っ白な背景は同じ値が何百万回も繰り返されているだけなので、元データを一ビットも失うことなく極めて効率よく圧縮できます。

PNGはまた、本物の透明度が重要になる場面でも頼るべき形式です — 色つきの背景の上に重ねる必要があるロゴや、さまざまなUIテーマに溶け込む必要があるアイコンなどです。PNGはピクセル単位の透明度を持つ本物のアルファチャンネルに対応していますが、JPEGにはそのための仕組みが一切ありません。その代償として、PNGを実写真に適用すると、視覚的な恩恵がほとんどないままJPEGよりも劇的に大きなファイルになります。写真にはPNGのアルゴリズムが探しているような利用可能な冗長性がそもそもほとんど含まれていないからです。隣り合うピクセルはどれも微妙に異なっているため、情報を一切捨てずに圧縮できる部分は比較的少なく、そしてそれこそがPNGの設計上、決して行わないと決めていることなのです。

WebPは、旧世代の形式が設計された後に開発された圧縮技術を使って、JPEGとPNGの両方をそれぞれの得意分野で打ち負かすことを目的として作られました。非可逆モードでは、同じ写真において、視覚的な品質が同等のJPEGと比べて典型的には25〜35パーセント小さいファイルを生成します。これは、動画コーデックの圧縮研究から派生した基盤アルゴリズムが、画像内の隣接ブロック間の冗長性をJPEGの古い手法よりも効果的にモデル化しているためです。可逆モードでも、同じスクリーンショットやロゴにおいてPNGを同程度の差で上回ります。理由は同じで、より新しく洗練された冗長性検出が、古いアルゴリズムでは見つけられなかった節約分を見つけ出すからです。

長年、WebPに対する実務上の反対理由はブラウザやソフトウェアの互換性でした — 古いブラウザ、一部の画像編集ソフト、さまざまなコンテンツ管理システムが単純に開けなかったのです。しかしその差はすでに大きく縮まっています。主要な最新ブラウザはどれも何年も前からWebPに対応しており、残っている互換性の問題は、主流の懸念というよりも、ますますまれな例外に近づいています。それでもJPEGやPNGに頼らざるを得ない正当な理由が残るとすれば、それは特定の後工程のツールやワークフロー — 古いデスクトップソフト、印刷用のパイプライン、クライアントが既に使っている既存のコンテンツシステムなど — が本当にまだWebPを扱えない場合です。これは現実に、そして今もよくある制約ですが、以前よりはずっと狭い範囲に限定されています。

Web向けの本物の写真 — 商品写真、ブログのヘッダー画像、フォトギャラリーなど — であれば、配信先が対応している限り非可逆モードのWebPが最良の既定選択で、対応していない環境ではJPEGを予備として使います。PNGは本物の写真コンテンツに対してはほぼ常に不適切な選択です。ファイルサイズという代償に見合うだけの画質向上は、うまく調整された非可逆形式との比較では得られないからです。スクリーンショット、ロゴ、アイコン、あるいは単色やくっきりしたテキスト、透明度が必要なコンテンツであれば、PNGか可逆モードのWebPが正解です。JPEGはそうしたコンテンツにありがちな鋭い輪郭の周りに、目に見えるアーティファクトを生み出してしまうからです。メールクライアント、古いコンテンツシステム、特定の印刷用ワークフローなど、厳格な互換性要件がある用途に向けたものであれば、両者のうちより古く、どこでも確実に扱える形式(写真ならJPEG、グラフィックならPNG)にとどめておくのが、地味ではあっても安全な選択であり続けます。

JPEGは圧縮のたびに情報を捨てていくため、同じJPEGファイルを繰り返し保存し直す行為 — ファイルを開いて少し編集し、再びJPEGとして保存するというサイクルを、ファイルの寿命の中で何度も繰り返すこと — は、世代劣化と呼ばれる本物の、しかも蓄積していく画質の低下を引き起こします。保存のたびに、すでに元のディテールの一部を失っている画像の上に、さらに非可逆圧縮を重ねて適用することになるからです。これは1〜2回の保存では目に見えませんが、何度も繰り返すうちに本当に目立つようになります。だからこそ、繰り返し編集する予定の画像は非圧縮または可逆圧縮のマスターコピーとして保持し、JPEGへの書き出しは最終ステップとしてのみ行うことで、見落とされがちな本物の画質劣化の原因を避けることができます。