「画像が重いから圧縮したい。でも品質を落とすと汚くなるのでは？」——ここで迷って、結局品質100%で保存し直して、かえってファイルを大きくしてしまうことがあります。実際にどれくらい変わるのかは、測ってみないと分かりません。この記事では同じ写真1枚を、画像圧縮とまったく同じ経路（ブラウザのcanvas）で品質10段階・3形式に書き出し、実バイト数を測りました。

測り方

当サイトのサンプル画像（800×600px のJPEG、39.3 KB＝40275 バイト）を1枚だけ使います。これを canvas に描き、canvas.toBlob(type, quality) で書き出したBlobのサイズをそのまま記録しました。ブラウザは Chromium です。元画像がすでにJPEGである点が重要で、以下はすべて「JPEGを再エンコードした結果」です。

品質を下げるとどこまで減るか

品質（quality）は 0〜1 の指定で、ここでは%で表記します。「元比」は元の 39.3 KB に対する割合、「JPEG比」は同じ品質のJPEGに対するWebPの割合です。

品質JPEG元比WebPJPEG比
100%90.6 KB230%83.0 KB92%
95%35.5 KB90%17.4 KB49%
90%23.8 KB61%11.3 KB47%
85%18.0 KB46%9.0 KB50%
80%15.5 KB39%7.8 KB50%
70%12.4 KB32%6.2 KB50%
60%10.5 KB27%5.7 KB55%
50%9.4 KB24%5.3 KB56%
40%8.5 KB22%4.8 KB56%
30%7.6 KB19%4.2 KB56%

読み取れることが3つあります。

1. 品質100%は「無劣化」ではなく、ただ重い

品質100%のJPEGは 90.6 KB。元の 39.3 KB に対して 230%、つまり2倍以上に増えました。JPEGは品質100%でも非可逆圧縮で、元画像が既にJPEGなら、失われた情報は戻らないまま容量だけ膨らみます。参考に、まったく劣化させないPNGで書き出すと 136.6 KB（元の 347%）でした。写真をPNGにするのは容量の面では不利です。

2. 品質80%あたりから先は、下げても減りにくい

品質80%で 15.5 KB（元の 39%）。ここから品質30%まで落としても 7.6 KB（元の 19%）で、減るのは 7.9 KB だけです。一方で画質の劣化は加速していきます。品質を削る旨みは80%前後で尽きる、というのが実測から言えることです。

3. WebPは同じ品質指定でおおむね半分

品質80%で JPEG 15.5 KB に対し WebP 7.8 KB（50%）。品質を振っても比率はおおむね5割前後で安定していました。画像形式変換で形式を変えるだけでも効果があります。ただし、メール添付や古いソフトでは開けない場合があるので、配布先を確認してください。

品質より「縮小」が効く場面

表示に必要な大きさより画像が大きいなら、品質をいじるより寸法を縮めるほうが確実に効きます。同じ写真を 400×300px（幅を半分）に縮めてから書き出すと次のようになりました。

品質JPEG元比WebP元比
90%9.9 KB25%5.3 KB14%
80%7.1 KB18%3.7 KB9%
70%5.7 KB14%3.0 KB8%

幅を半分にして品質80%なら 7.1 KB（元の 18%）。等倍で品質30%まで落とした 7.6 KB より小さく、しかも縮小後の見た目は等倍・低品質より整っています（ブロックノイズが出るより、単に小さいほうが破綻が見えにくい）。面積が4分の1になるのでデータ量も大きく減ります。手順は 画像リサイズ →（必要なら）画像圧縮 の順です。

実務での使い分け

  • 写真をWebに載せる：表示サイズまでリサイズしてから、JPEG品質80%前後。可能ならWebP。
  • ロゴ・図・文字入り：品質を下げると輪郭がにじむので85〜90%、またはPNG。色数が少ない図はPNGのほうが小さくなることもあります。
  • すでに圧縮済みの画像：品質を下げれば小さくはなりますが、劣化は前回の分に上積みされます（同じ画像を何度もJPEGで保存し直すと戻せません）。逆に高い品質で保存し直すと、上の表のとおり容量だけ増えることがあります。まず寸法を見直してください。
  • メール添付：受け取る相手の環境が分からないならJPEGが安全です。

注意：測った条件でしか成り立たない

ここの数値はこの1枚の写真をChromiumで再エンコードした結果です。画像の内容（平坦な空か細かい木の葉か）、元の圧縮履歴、ブラウザのエンコーダ実装で数値は変わります。傾向（100%は増える／80%以降は減りにくい／WebPは約半分／縮小が効く）は再現しやすい一方、絶対値はご自身の画像で確かめてください。画像圧縮は品質を動かしながら結果のサイズをその場で表示するので、手元の画像で同じ実験ができます。

よくある質問

品質は何%にすればいいですか？
写真なら80%前後が実用的な出発点です。実測では元の39%（15.5 KB）まで下がります。ロゴや文字が入った画像は輪郭のにじみが目立つので85〜90%、または可逆のPNGを選んでください。
品質100%にすれば劣化しませんか？
いいえ。JPEGは品質100%でも非可逆で、しかも実測では元の39.3 KB が 90.6 KB（230%）に増えました。一度JPEGで保存された画像を再エンコードすると、失われた情報は戻らないまま容量だけ増えます。
WebPに変えるだけで軽くなりますか？
同じ品質指定なら実測でJPEGの約半分になりました（品質80%で 15.5 KB → 7.8 KB）。ただしメールの添付や一部の古い環境では開けないことがあるため、配布先を確認してください。
圧縮した画像はサーバーに送られますか？
いいえ。Benri.devの画像ツールはブラウザ内のcanvasで処理し、画像を当サイトのサーバーへ送信しません。この記事の実測値も、同じcanvas経路でブラウザ内で測ったものです。

本記事の数値は、当サイト同梱のサンプル画像1枚（800×600px・39.3 KB）を Chromium の canvas.toBlob() で再エンコードして測った実測値です。2026-07-30 時点。画像・測定はいずれもブラウザ内で完結し、当サイトのサーバーへ送信していません。