この検証では WebP が 268,434 バイトで最小、JPG が 287,599、PNG が 3,449,964 でした。WebP が常に勝つ、PNG が悪いという意味ではありません。細部の多いこの風景は、可逆圧縮の PNG より写真向けの非可逆圧縮に適していました。
操作手順
- 同じ元画像から始め、各試行で寸法を維持します。
- 目標容量と最大幅を 0、開始品質を 82 にし、JPG・PNG・WebP を別々に出力します。
- 正確なバイト数、文字、透過、グラデーションを比較し、実際の利用先で開けるか確認します。
条件を揃えた比較
水、雲、木、屋根、滑らかな色変化を含む海岸風景 PNG を使いました。元は 1536 × 1024、2,976,317 バイト。目標容量と最大幅は 0 にし、形式だけを変えました。非可逆形式の開始品質は 82 です。
WebP は JPG より 19,165 バイト、JPG を基準に約 6.66% 小さくなりました。PNG は再エンコードが元より非効率で、473,647 バイト増えました。形式名だけで容量削減は保証されません。
| 出力 | 正確な容量 | 元画像との比較 | 主な用途 |
|---|---|---|---|
| JPG | 287,599 バイト | 90.34% 減 | 写真の互換性 |
| PNG | 3,449,964 バイト | 15.91% 増 | 可逆圧縮と透過 |
| WebP | 268,434 バイト | 90.98% 減 | 軽量な Web 配信 |
この画像で PNG が大きくなった理由
PNG は JPG やこの WebP のように知覚上の情報を省略せず保存します。透過図形、図解、鮮明な文字には有用ですが、細かな質感と滑らかな色変化のある風景では多くの容量を使います。
PNG に一定の容量ペナルティがあるわけではありません。少数の単色で構成されたロゴなら PNG の方が小さい場合もあります。この測定はこの元画像に対する結果です。
JPG を選ぶ場面
古いソフト、事務システム、印刷工程、対応形式の少ないフォームで写真を使う場合に向いています。透過は維持できず、編集と保存を繰り返すと劣化が積み重なる場合があります。
この例で WebP との差はわずか 19,165 バイトでした。JPG 指定の利用先や受信者のソフトが分からない場合は、その差を受け入れる価値があります。
PNG を選ぶ場面
透過、画面のスクリーンショット、線画、正確な輪郭が必要な図形に使います。背景を付ける意図がなければ、透過ロゴを JPG にしないでください。
再保存した PNG が大きくなったら元を残します。エンコード完了と容量削減は別です。PNG モードは、PNG そのものが必要な場合に選びます。
WebP を選ぶ場面
WebP に対応する Web サイトやアプリで、写真の配信量を減らしたい場合に比較します。透過も使えますが、図形を非可逆 WebP にする場合は見た目の確認が必要です。
検証画面は 262 KB、実容量は 268,434 バイトでした。この例では最小でしたが、内容と設定が変われば順位も変わり得ます。
公平に比較する手順
毎回同じ元画像を使い、幅と高さを固定し、非可逆形式の開始品質を揃えます。丸められた KB 表示だけでなくバイト数を記録します。
透過、文字、グラデーション、輪郭を 100% で確認し、実際のサイト、フォーム、ソフトで使ってみます。編集用の原本は別に保管し、配信用形式は画像ごとに決めます。
よくある質問
WebP は必ず JPG より小さいですか？
いいえ。画像内容と設定で逆転する場合があります。利用先の WebP 対応も必要です。
圧縮した PNG が大きくなるのはなぜ？
可逆エンコーダーによって必要な容量が異なり、詳細な写真には多くのバイトを使う場合があります。増えたら元画像を残します。
透過ロゴにはどれを使いますか？
PNG は堅実な選択肢です。WebP も透過できますが、アルファ情報と互換性を確認します。JPG は透過非対応です。
サイトの全画像を WebP にすべきですか？
一律に変える必要はありません。画面、透過アイコン、写真では条件が異なります。編集用原本を維持し、画像ごとに選びます。