何を確かめたのか
画像を小さくするとき、JPEGの「画質」を何%にすればよいのかは迷いやすいところです。 そこで、このサイトの画像圧縮ツールやリサイズツールと同じ仕組みで、画質を変えながら保存し、 ファイルサイズと画質の落ち方を実際に測りました。
- 画質100%は95%の約3.5倍のサイズになりますが、見た目の違いはほとんどありません。
- 同じ画質の数字なら、WebPはJPEGより3〜6割小さくなりました。ただしWebPの100%は「劣化なし」の別方式になり、JPEGより大きくなります。
- 同じ画像をそのまま何度保存し直しても、画質はほぼ落ちませんでした。一方、保存のたびに少しでも切り取ると、画質は保存ごとに落ちていきました。
試し方
- 見本の画像を 1920 × 1200 ピクセルに縮小する（SNSやWebでよく使う大きさ）。
- ブラウザ（Chromium 152）の
canvas.toBlobで、JPEG と WebP を画質10%〜100%で保存する。このサイトの画像ツールと同じ保存方法です。 - 保存した画像を読み込み直し、元の画像とのずれを PSNR で数値にする。
PSNR（ピーク信号対雑音比）は、元の画像とどれだけ違うかを表す数字で、大きいほど元に近くなります。 単位は dB（デシベル）で、一般に 40 dB を超えると、並べて見比べても違いがわかりにくいとされています。 30 dB 前後では、ブロック状のノイズやもやがはっきり見えます。
見本には、Windows 11 に付属している壁紙から、写真のように作られたCG画像を3枚選びました（どのパソコンにもあり、同じ試験をやり直せるため）。 それに加えて、文字とグラフを描いた図を自作しました。
画質の「%」の意味は、保存するソフトごとに違います。ここでの数字は Chrome や Edge など Chromium 系ブラウザでの結果で、 画像編集ソフトやスマートフォンのカメラの「画質90%」とは同じにならないことがあります。
結果1：画質とファイルサイズ
風景の画像での結果です。元の画像は、劣化のないPNGで保存すると 3,268 KB ありました。
| 画質 | JPEG サイズ | JPEG 画質差 | WebP サイズ | WebP 画質差 |
|---|---|---|---|---|
| 10% | 23 KB | 31.5 dB | 17 KB | 35.0 dB |
| 30% | 46 KB | 36.2 dB | 27 KB | 36.5 dB |
| 50% | 66 KB | 37.6 dB | 40 KB | 37.9 dB |
| 70% | 95 KB | 38.9 dB | 53 KB | 38.8 dB |
| 80% | 130 KB | 40.0 dB | 75 KB | 40.1 dB |
| 90% | 237 KB | 41.8 dB | 153 KB | 42.1 dB |
| 95% | 412 KB | 43.4 dB | 272 KB | 43.2 dB |
| 100% | 1,426 KB | 56.3 dB | 1,718 KB | 劣化なし |
わかったこと
- 100%は割に合わない：95% → 100% でサイズは約3.5倍（412 KB → 1,426 KB）になりました。PSNRは大きく上がりますが、95%の時点で見た目の違いはほぼありません。
- 90% → 95% でも約1.7倍：画質を5%上げるだけで、サイズは大きく増えます。
- 70〜85%あたりが目安：80%でも PSNR 40 dB で、元のPNGの約25分の1（130 KB）になりました。このサイトの画像圧縮ツールの初期値は70%です。
- WebPの100%は別物：Chromium の WebP は、画質100%を指定すると劣化のない保存（ロスレス）に切り替わります。そのため 1,718 KB と、JPEG の100%より大きくなりました。
結果2：画像の種類による違い
4種類の画像を、どれも画質80%で保存して比べました。
| 画像 | PNG | JPEG 80% | WebP 80% | WebP の小ささ |
|---|---|---|---|---|
| 風景（空・水面・草） | 3,268 KB | 130 KB 40.0 dB | 75 KB 40.1 dB | −42% |
| 細かい質感（ざらついた面） | 1,582 KB | 148 KB 35.8 dB | 97 KB 36.6 dB | −34% |
| なめらかなグラデーション | 2,432 KB | 139 KB 39.6 dB | 77 KB 40.2 dB | −45% |
| 文字とグラフ（自作の図） | 162 KB | 92 KB 40.9 dB | 40 KB 42.1 dB | −57% |
- どの画像でも、WebP は JPEG より小さく、PSNR は同じか高くなりました。
- 細かい質感の画像は、同じ画質80%でも PSNR が低くなりました（35.8 dB）。細かい模様ほど、圧縮で失われる情報が多いためです。
- 文字や図はPNGが有利：文字とグラフの図は、PNGでも 162 KB と小さく、しかも劣化がありません。 JPEG は文字のふちに「もや」（モスキートノイズ）が出るため、スクリーンショットや資料の図は PNG か WebP が向いています。
結果3：保存し直すと、どれだけ劣化するか
「JPEGは保存し直すたびに劣化する」とよく言われます。そこで風景の画像を画質90%で10回続けて保存し、 1回目と比べてどれだけ落ちるかを調べました。
| 保存した回数 | そのまま保存し直す | 毎回1ピクセル切り取ってから保存 |
|---|---|---|
| 1回 | 41.8 dB | 41.8 dB |
| 2回 | 41.7 dB | 40.5 dB |
| 3回 | 41.7 dB | 39.7 dB |
| 5回 | 41.7 dB | 38.4 dB |
| 10回 | 41.7 dB | 36.1 dB |
- そのまま保存し直しても、ほとんど落ちない：同じ大きさ・同じ画質で保存し直すと、2回目以降はほぼ同じ画像になり、10回でも 0.1 dB しか下がりませんでした。 JPEG は画像を 8 × 8 ピクセルのブロックに分けて圧縮するため、一度圧縮されたブロックは、同じ条件ではほぼ同じ結果に戻るからです。
- 切り取りや縮小を挟むと、毎回落ちる：保存のたびに1ピクセルだけ切り取ると、ブロックの区切りがずれて毎回新しく圧縮されるため、 10回で 36.1 dB まで下がりました。これは、画質50%で1回保存したとき（37.6 dB）より悪い値です。
SNSやメッセージアプリで画像を転送し直すと劣化するのは、受け取った側で縮小や切り取りが行われ、そのたびに保存し直されるためだと考えられます。 編集するときは、一度JPEGにした画像ではなく、元の画像から作業するのが確実です。
まとめ：画質の決め方
- Webやブログの写真：JPEG 70〜85%。サイトが対応していれば WebP 70〜80% でさらに小さくできます。
- 画質100%は使わない：JPEG は 95% で十分です。WebP の 100% は劣化なしの別方式になり、かえって大きくなります。
- スクリーンショット・文字の多い図：PNG（または WebP）。
- 元の画像は残しておく：切り取りや縮小をしてからの保存を繰り返すと、画質は確実に落ちていきます。