FORMAT COMPARISON
PNG vs WebP
どちらも透過を扱えます。PNGは定番の可逆形式、WebPはWeb配信の最適化候補です。
PNGとWebP、どちらを選ぶ？
互換性と可逆性を優先するならPNG、Web配信の容量を検討するならWebPを比較します。
PNG向き
透過画像・スクリーンショット
- ロゴ
- 図版
- 透過が必要な画像
WebP向き
Web画像
- Web配信
- 写真
- 透過画像
基本情報を比較
PNGとWebPの主な違いを確認できます。
| 項目 | PNG | WebP |
|---|---|---|
| 拡張子 | .png | .webp |
| MIME Type | image/png | image/webp |
| 主な用途 | 透過画像・スクリーンショット | Web画像 |
| 圧縮 | 可逆圧縮 | 非可逆／可逆 |
| ベクター | 非対応 | 非対応 |
| 開く方法 | 標準ビューア、ブラウザ、画像編集ソフトで開けます。 | 対応ブラウザや画像ビューア、編集ソフトで開けます。 |
| 書き出し・変換 | PNGをJPEGへ変換すると透過を保持できず、背景色や合成結果を決める必要があります。JPEGとして書き出す場合は非可逆圧縮になります。WebPへ変換する場合も、透過を保つ必要と可逆・非可逆の設定を先に決めます。 | WebPからJPEGへ書き出すと透過を保持できず、非可逆圧縮になります。PNGへ書き出す場合は、静止画として出力するのか、アニメーションを別の方法で扱うのかを確認します。JPEGやPNGからWebPへ変換する場合も、可逆・非可逆、透過、アニメーションの要件を先に決めます。 |
用途別の選び方
作りたいものや使う場面から選べます。
ロゴ
透過画像・スクリーンショット
PNG向き図版
透過画像・スクリーンショット
PNG向きWeb配信
Web画像
WebP向き写真
Web画像
WebP向き確認ポイント 1
PNGは可逆圧縮
使い分け確認ポイント 2
WebPはアニメーションも扱える
使い分け