PNG・JPEG・WEBP比較：写真・スクリーンショット・ロゴで実際に変換した結果
画像形式は「どれが一番良いか」ではなく、画像に何が写っているかで選びます。写真、文字の多い画面キャプチャ、透過背景のロゴは、同じ設定で保存しても結果がまったく異なります。本記事では3種類の画像を当サイトの画像変換ツールと同じ方法でPNG・JPEG・WEBPに保存し、容量と画質を比較しました。
先に結論
- 写真をWebに載せたりメッセージで送るならWEBP 85%が最も効率的でした。同じ品質値のJPEGより38%小さく、画質の数値はほぼ同じです。
- 文字のある画面キャプチャもWEBPのほうがJPEGより小さくきれいでした。再編集やマニュアル用の原本はPNGで保管してください。
- 透過背景のロゴはPNGかWEBPで保存します。JPEGは透明部分を白で塗りつぶします。
- WEBPを受け付けないソフトやフォームに出すときだけJPEGを使えば十分です。
用途別の選び方
| 用途 | おすすめ形式 | 理由 |
|---|---|---|
| ブログ・ショップの商品写真 | WEBP 85% | 写真では容量あたりの画質が最も良かった |
| WEBP非対応のフォーム | JPEG 85% | ほぼすべてのソフトで開ける |
| マニュアル・報告書用のキャプチャ | PNG（原本） | 文字の輪郭がそのまま残る |
| Webページに載せるキャプチャ | WEBP 85% | PNGの約1/12、JPEGより文字のにじみが少ない |
| 透過ロゴ・アイコン | PNGまたはWEBP | JPEGは透過を保存できない |
| 写真の長期保管 | カメラの原本 | 変換のたびにメタデータや画質が変わりうる |
テスト方法
原本は3種類です。①テスト用に生成した2048×1536の写真風画像（木目、ミルクの泡、ぼけた背景を含む）、②当サイトのお問い合わせページを1024×768で実際にキャプチャした画面、③縁と影が半透明の1024×1024透過ロゴ。
変換は画像変換ツールと同じくブラウザのcanvasエンコーダーで行いました。リサイズと背景除去はオフ、JPEG・WEBPはツールの3段階（70%・85%・95%）で保存し、JPEGはツール同様に白背景へ合成してから保存しました。環境は2026年9月、WindowsのChromium 152です。
画質はPSNRで比べました。原本PNGとの画素値の差をdBで表したもので、高いほど原本に近くなります。一般に40dB前後からは画面上で違いを見つけにくいことが多いものの、人の目の判断と常に一致するわけではないため、下の拡大図と合わせてご覧ください。KiBは1024バイト単位です。
結果1 — 写真：WEBPが最も効率的
| 形式 | 容量 | PSNR |
|---|---|---|
| PNG | 5,808.9 KiB | 原本 |
| JPEG 70% / 85% / 95% | 261.3 / 391.1 / 726.1 KiB | 38.6 / 40.9 / 44.1 dB |
| WEBP 70% / 85% / 95% | 144.4 / 241.8 / 559.4 KiB | 37.8 / 40.5 / 44.4 dB |
PNGは5.8MBで、写真に使う理由はほとんどありません。WEBP 85%はPNGの1/24、同じ85%のJPEG（391.1 KiB）より38%小さく、PSNRの差は0.4dBでした。70%でもWEBPはJPEGの半分強の容量です。
拡大すると劣化の仕方が異なります。JPEGは8×8ブロック単位で圧縮するため小さな泡が四角くつぶれ、WEBPは質感をなめらかにならす傾向があります。100%表示ではどちらも違いを見つけにくい程度でした。質感が大事な写真を大きく見せるなら85%以上をおすすめします。
結果2 — 文字のあるキャプチャ：JPEGのにじみが最も目立つ
| 形式 | 容量 | PSNR |
|---|---|---|
| PNG | 300.9 KiB | 原本 |
| JPEG 70% / 85% / 95% | 41.1 / 55.1 / 86.7 KiB | 38.3 / 41.6 / 44.4 dB |
| WEBP 70% / 85% / 95% | 20.1 / 26.0 / 40.6 KiB | 40.9 / 43.2 / 44.5 dB |
写真と違い、キャプチャではWEBPがすべての品質段階でJPEGより小さく、PSNRも高い結果でした。WEBP 85%（26.0 KiB）はJPEG 85%（55.1 KiB）の半分以下なのに数値は上です。JPEGは色が急に変わる文字の輪郭が苦手で、拡大すると周りにもやが出ます。
それでもPNGが必要な場面はあります。後で切り抜いたり注釈を書き込んだりする予定なら、非可逆形式で保存するたびに劣化が重なります。原本はPNGで残し、Web用のコピーだけWEBPにしましょう。なお、このキャプチャは背景に半透明効果とグラデーションがあるためPNGが300 KiBになりました。白地に文字だけの画面ならPNGはずっと小さくなります。
結果3 — 透過ロゴ：JPEGは白い四角になる
JPEGには透過を保存する仕組みがないため、本ツールは透明部分を白で塗って保存します。白いWebページでは目立ちませんが、暗い背景や色付きバナーに載せると白い四角が現れ、半透明の影も灰色の塊になります。
ここではWEBP 85%（38.9 KiB）がJPEG 85%（22.6 KiB）より大きくなりました。WEBPは透過情報も一緒に保存するためで、欠点ではなく機能の代償です。PNGは342.3 KiBでしたが、再編集や使い回しをするロゴの原本はPNGが最も安全です。Webに載せるコピーだけWEBPに変えましょう。
品質70%・85%・95%の選び方
数値を上げるほど容量は急に増えます。写真のJPEGでは95%が70%の2.8倍でしたが、PSNRの増加は5.5dBでした。多くの場合は85%が無難な基準です。
- 70%：メッセージで送る写真、一覧の小さなサムネイル
- 85%：ブログや商品ページなど一般的なWeb掲載
- 95%：印刷所や他の編集者に渡す中間ファイル。可能なら原本を渡すほうが良い
85%は「原本画質の85%が残る」という意味ではなく、エンコーダーに渡す設定値です。形式が違えば同じ数値でも画質は同じになりません。
よくある失敗
- JPEGをPNGにすれば画質が良くなると考える：失われた情報は戻らず、容量が増えるだけです。
- JPEGを開いて修正し、JPEGで上書きを繰り返す：保存のたびに劣化が重なります。作業中はPNGで保存し、最後に1回だけ変換しましょう。
- 透過ロゴをJPEGで保存する：白い背景ができます。
- アニメーションGIFを変換する：本ツールは1フレームだけを静止画にします。動きを残すには動画変換ツールでMP4かWEBMにしてください。
- どこにでもWEBPを上げる：古いソフトや一部のフォームはWEBPを受け付けません。拒否されたらJPEGで保存し直しましょう。
本ツールの動作と限界
画像をブラウザで描き直して再保存するため、撮影日時・位置・カラープロファイル（EXIF・ICC）などのメタデータが保持される保証はありません。写真の原本は別に保管してください。SVGをPNGなどで保存すると、拡大しても鮮明なベクターではなくピクセル画像になります。BMP出力も透明部分を白で塗り、容量が大きくなります。
背景除去は画像の縁につながる似た色を消す方式で、白背景の単色ロゴに向いています。被写体が背景と同色だったり写真の背景が複雑だったりすると、必要な部分まで消えることがあります。人物や髪を認識するAI分離ではありません。
上の数値はこの3つの原本とChromium 152エンコーダーによる結果です。ブラウザの種類やバージョン、画像の内容で順位が変わることがあるため、大切な画像はツールで3形式を保存して比べてみてください。