完全なアルファチャンネルの透過に対応し、しかもどこでも開ける形式は、長らくPNGだけでした。だからこそロゴやアイコン、背景を透明にした画像の標準になったのです。WebPはその前提を変えました。半透明も輪郭のアンチエイリアスも含めて完全なアルファチャンネルに対応し、そのうえファイルは目に見えて小さくなります。2026年現在、どちらを選ぶかは主に画像の使い道で決まります。
項目別に比較
| 項目 | PNG | WebP |
|---|---|---|
| 透過（アルファチャンネル） | ✅ 完全なアルファチャンネル | ✅ 完全なアルファチャンネル |
| 半透明 | ✅ 256段階 | ✅ 256段階 |
| 可逆圧縮（ロスレス） | ✅ 対応（標準） | ✅ 対応（明示的に指定） |
| 非可逆圧縮（ロッシー） | ❌ 非対応 | ✅ 対応（写真向け） |
| ファイルサイズ（シンプルなロゴ） | 基準（1×） | 20〜30%小さい |
| ブラウザの対応 | 100% | >97% (2026) |
| メールでの対応 | ✅ ほぼすべて | ⚠️ 不完全 |
| Office／Word／PowerPointでの対応 | ✅ 全面対応 | ⚠️ 一部（新しいバージョンのみ） |
| 古いソフトでの対応 | ✅ ほぼすべて | ⚠️ まちまち |
| 拡大縮小に強いのはSVG？ | PNGは拡大に弱い | WebPは拡大に弱い |
実際のサイズ差はどれくらいか
背景が透明なシンプルなロゴやアイコンでは、ロスレスWebPがPNGに対して稼げる差は、画像の複雑さに応じて15〜40%ほどです。色数が少なく細部の少ないロゴほど、WebPの優位は大きくなります。
輪郭の細かい商品切り抜き写真のように、透過がより複雑な画像では、アルファチャンネル付きの非可逆WebPがさらに効きます。見た目の劣化を感じさせないまま、同等のPNGより50〜70%小さくなることもあります。
📌 現代的なサイトのロゴなら、SVGが両者より優れています。 SVGはベクター形式なので、どんなサイズに拡大してもぼやけず、CSSから編集もできます。PNGとWebPはラスター形式で、解像度が固定されます。サイトのロゴには可能な限りSVGを使い、SVGが受け付けられない場所だけPNGかWebPにしてください。詳しくは SVG vs PNG をご覧ください。
PNGを使う場面
- メールマーケティングのロゴやアイコン（確実に表示される）
- Word、PowerPoint、Googleドキュメントに貼り込む画像
- WebPを認識できない環境で開かれる可能性があるとき
- LINEスタンプ（透過PNGが必須）
- 古いプラットフォームにアップロードするロゴ
透過WebPを使う場面
- 現代的なサイトやWebアプリのロゴ・アイコン
- ECサイトの切り抜き商品写真（Shopify、WooCommerceなど）
- バナーやサイト内セクションで使う透過画像
- PNGを選びたくなる用途のうち、公開先が現代的なウェブである場合すべて
透過WebPはあらゆる場面でPNGの代わりになりますか？
現代のウェブで使う分には代わりになります。ただし、メールやOffice、古いソフトとの互換性が問われる場面では、PNGのほうが安全です。サイト用にWebP、それ以外の用途にPNGと、両方のバージョンを持っておくのが実務的です。
WebPの透過はPNGと同じように機能しますか？
はい。WebPはPNGと同じ8ビットのアルファチャンネルに対応し、256段階の不透明度を扱えます。半透明も、輪郭のなめらかなアンチエイリアスも同様です。透過の見た目に関して、両者に技術的な差はありません。
WebPのほうが効率的なのに、なぜ今もPNGが使われるのですか？
大きな理由は惰性と互換性です。PNGは1996年から存在し、あらゆるソフトとプラットフォームで確実に開けます。WebPはブラウザ対応こそ優秀ですが、メールや古いソフトではまだ穴があります。さらに、WebPがPNGと同じ透過に対応していること自体を知らない人が多い、という事情もあります。