PNGとWebPロスレスの比較—どちらを使う？

UI・ロゴ・スクショの可逆配信で悩むPNGとWebPロスレス。結論から言うと、スクショ/UIはWebPロスレスが平均20–35%軽く、2〜16色の少色アイコンはPNG（インデックスカラー）が勝ちやすい。ここでは判断基準と実務フローを示します。

結論（TL;DR）

スクショ/コード画像/UIは WebPロスレスが有利（平均20–35%小）。
極端に色数が少ない（2〜16色のアイコン等）は PNG（インデックスカラー）が勝つことがある。
アルファの段差が目立つ場合はPNG、それ以外はWebPロスレスで問題なし。
互換性は主要ブラウザでWebP対応済。レガシー向けにPNGフォールバックを任意で保持。

比較表

観点	PNG（可逆）	WebP（ロスレス）
圧縮率	少色のインデックス化で強い（16〜128色で特に）	スクショ/UI/写真混在に強い（平均20–35%小）
透過	強力。ガンマ/色管理に注意	対応。可逆で段差が出にくい設計
生成速度	高速（pngquant/oxipngで最適化）	中速（エンコード時間はやや増）
互換性	最広	主要ブラウザ対応済（古い環境のみPNG）

実務フロー

まず WebPロスレス を生成（Squoosh / Sharp / cwebp）。
容量が拮抗/増加なら PNG（インデックス化＋ディザ有無）と比較。
16〜128色ならPNGが勝つことが多い。256色超・写真混在はWebPが有利。
色管理は sRGB を固定（関連： sRGB運用ガイド）。

CLI例

# pngquant（インデックス化 + ディザ）
pngquant --quality=65-95 --speed=1 --strip --force --output out.png in.png

# cwebp（ロスレス）
cwebp -lossless -z 9 -q 100 -mt -m 6 -o out.webp in.png

落とし穴と対策

PNGはガンマ/EXIFの残存で色が変わることがある→ --strip で除去。
WebPロスレスは生成がやや重い→ ビルド時生成＆キャッシュで吸収。
透過縁のにじみは形式よりも作り方の問題→ フリンジ対策を適用。

公開前チェック（8項目）

スクショ/UIはWebPロスレスで容量が下回るか確認。
少色アイコンはPNG（インデックス）と比較し、最小サイズを採用。
すべてsRGBで色管理を統一、余計なメタは除去。
透過縁に段差・にじみがない。
srcset/sizes が実表示幅に一致、過大ダウンロードなし。
CLSゼロ：width/height 明示、広告はプレースホルダで高さ確保。
互換のためPNGフォールバックを必要に応じて保持。
仕上げに /compare と /compressor で画質/容量の落とし所を確認。

まとめ：ルール化して迷いを無くす

スクショ/UI=WebPロスレス、少色アイコン=PNG（インデックス）、それ以外は実測で判断。ルールをチームに共有し、運用へ恒久化しましょう。