JPG・PNG・WebPはどれを選ぶ？

最初に結論

透明が必要ならPNGまたはWebP、透明が不要ならJPGも候補です。容量だけで形式を決めず、用途と実際の出力を確認します。今回のfixtureではWebPがPNGより小さくなりましたが、すべての画像へ一般化しません。

今回の検証条件

透明・半透明・既知色を含む640×480のPNG（8,146 B）を、既存のCanvas変換結果で比較します。

透明と見た目を比較

チェック柄はCSS背景であり、画像へ焼き込んでいません。

PNG

640×480 / 8,146 B / 透明・半透明を維持

JPEG

640×480 / 7,937 B / 透明を維持しない

WebP

640×480 / 2,086 B / 透明・半透明を維持

容量の実測

この結果は今回のfixture・ブラウザCanvas・設定に限る実測です。WebPが常に最小になることを示しません。

同じ画像でも形式で違う

dimensionsは同じでも、形式によりbyte数と透明の扱いが変わりました。画像サイズとファイル容量の違いも参照してください。

形式ごとの特徴

JPG：lossy compressionを使い透明を保持できません。今回7,937 Bでした。

PNG：透明・半透明を扱え、UI・図・文字等でも使われます。今回8,146 Bでした。

WebP：lossy / lossless双方と透明に対応します。今回2,086 Bで、PNGより小さくなりました。

どれを選ぶ？

1. 透明が必要ならPNG / WebPを比較。
2. 透明不要ならJPG / WebPも候補。
3. Web掲載では容量・見た目・対応環境で判断。

Convert · Info · Compress · Color Picker

よくある質問

透明背景ならどの形式？

今回の比較ではPNGとWebPが透明・半透明を維持し、JPEGは維持しませんでした。

WebPなら必ず小さくなる？

いいえ。今回のfixtureでは小さくなりましたが、すべての画像で同じとは限りません。