WebP vs PNG
どちらも写真を保存できますが、トレードオフが異なります。実際の違いと、選び方をまとめました。
Short answer
写真、あるいは写真のスクリーンショットなら、WebP は劇的に小さくなります。線画・ロゴ・ピクセル単位で正確に保ちたい文字なら、PNG のままで。
Why this comes up
この比較にたどり着く人の多くは、二つの形式を優劣で検討しているわけではありません。なぜか 4MB ある PNG を抱えていて、小さくしたいのです。この前提が重要で、その PNG がなぜ 4MB なのかが、WebP が役に立つかどうかを決めます。ときには正解が「PNG は最初から問題ではなかった」になることもあります。
項目別の比較
| 項目 | WebP | PNG |
|---|---|---|
| 圧縮方式 | 非可逆 | 可逆 |
| 透過 | 対応 | 対応 |
| 一般的なファイルサイズ | 同等の JPEG のおよそ 65-75% | 同等の JPEG のおよそ 300-500% |
| 互換性 | 現行のすべてのブラウザとほとんどのアプリが対応 | 数十年前のソフトも含め、どこでも開けます |
| 主な入手元 | ページ容量を最適化しているウェブサイト | スクリーンショット、ロゴ、図版 |
What actually differs
PNG は定義上可逆、WebP はたいてい違う
PNG は与えられた画素をそのまま保存します。だから劣化せず、だから大きいのです。WebP には非可逆と可逆の両モードがあり、人が引用する容量の数字はほぼ常に非可逆のほうです。モードを言わずに「WebP」と PNG を比べるのは、別物どうしを比べていることになります。可逆 WebP は PNG よりおおむね 25% ほど、非可逆 WebP は 80% 以上小さくなります。
写真で PNG が巨大になるのには構造的な理由がある
PNG は画素の行の中の繰り返しを見つけて圧縮します。設定画面のスクリーンショットは大半が繰り返しの平坦な色なので、見事に縮みます。写真には厳密な繰り返しがほとんどなく、どの画素も隣とわずかに違うため、PNG はほぼ全部をそのまま保存し、ファイルは JPEG の 3〜5 倍に膨れます。これは欠陥ではなく、ノイズのあるデータに対して「可逆」が意味することそのものです。
透過は両方できるので、そこは決め手にならない
これは明記する価値があります。この思い込みこそ、多くの人を反射的に PNG に向かわせるからです。WebP は非可逆・可逆の両モードで完全な 8 ビットのアルファチャンネルに対応しています。透明背景のロゴは、透明を保つために PNG である必要はありません。ピクセル単位の正確さが要るときに PNG が必要なのです。
Which to use
Use WebP for
写真、写真中心のスクリーンショット、そして「見られる」だけで「さらに編集されない」ウェブ配信。
Use PNG for
文字や UI のスクリーンショット、ロゴと線画、もう一度編集工程に入るもの、そして何度保存しても変わってはいけないファイル。
One thing that catches people out
文字のスクリーンショットに非可逆 WebP は悪手
非可逆圧縮は写真的な細部に合わせて調整されており、白地に黒の硬い輪郭は苦手です。字形のまわりに灰色のにじみが出て、細い線は潰れます。ターミナルやコードエディターのスクリーンショットが最悪のケースです。大きくて文字だらけのファイルなら、可逆 WebP を使うか PNG のままに。節約は小さくなりますが、文字は読めるまま残ります。