JPEGで画像を保存するとき、多くのツールに「品質」や「クオリティ」というスライダーがあります。この数字を下げるほどファイルは小さくなりますが、下げすぎると画質が崩れます。では、どこまで下げても大丈夫なのか？ 感覚ではなく、実際に測って確かめてみました。
測定方法
風景写真に近い、なめらかな階調と細かいディテールを含む 1200×800px の検証用画像 を1枚用意し、それをブラウザの機能（canvas.toBlob）で品質100%から20%まで書き出して、それぞれのファイルサイズを計測しました。測定は Google Chrome（2026年7月）で行っています。同じ元画像から書き出しているので、純粋に「品質設定だけ」でサイズがどう変わるかが分かります。
実測結果：品質とファイルサイズ
| 品質 | ファイルサイズ | 品質100%との比 |
|---|---|---|
| PNG（可逆・参考） | 約 1.75 MB | — |
| 100% | 約 868 KB | 100% |
| 90% | 約 292 KB | 約 34% |
| 80% | 約 162 KB | 約 19% |
| 60% | 約 78 KB | 約 9% |
| 40% | 約 46 KB | 約 5% |
| 20% | 約 16 KB | 約 2% |
注目すべきは、品質を100%から90%に下げるだけで、サイズが約3分の1（868KB→292KB）になることです。見た目はほとんど変わらないのに、これだけ軽くなります。さらに80%まで下げると約162KB。ここまでは、写真としての印象を保ったまま大きく削減できる「おいしいゾーン」です。
一方、60%より下では削減幅が小さくなっていきます。80%（162KB）から40%（46KB）まで下げても、減るのは116KBほど。品質を大きく犠牲にする割に、得られるサイズ削減は逓減していくのが数字から読み取れます。
どこから画質が崩れて見えるか
サイズだけでなく、見た目も確認しましょう。下は同じ画像の一部を切り出し、品質90%と品質25%で書き出して並べたものです。
品質90%
品質25%
品質90%では、空のグラデーションも草地の細部も自然です。一方、品質25%では、本来なめらかなはずの空に 四角いブロック状のノイズ が浮き、境界がにじんでいます。これはJPEGが8×8ピクセルのブロック単位で圧縮する仕組みによるもので、品質を下げるほど目立ちます。特に空・肌・グラデーションといった「なめらかな面」で崩れが分かりやすくなります。
用途別のおすすめ品質
実測とあわせて、実用上の目安をまとめます。
- 印刷・納品用の写真：95〜100%。サイズは大きいが、劣化を最小限に。
- Web・ブログ・SNS掲載：80〜85%。見た目はほぼ無劣化で、サイズは大幅減。最も使う設定。
- サムネイル・小さく表示する画像：60〜70%。多少粗くても、表示が小さければ気づきにくい。
- 50%以下：ブロックノイズが目立ち始めるゾーン。原則、常用は避ける。
迷ったら 80% から始めるのが安全です。実測でも、品質80%は「印象を保ったまま元の約2割のサイズ」という好バランスでした。
品質を下げる前に試したいこと
実は、品質を下げる以外にもサイズを減らす方法があります。効果が大きいのは 解像度（画素数）を下げることです。画像の幅・高さが半分になると、画素数は4分の1になり、サイズも大きく減ります。ブログ本文に4000px幅の写真を貼る必要はほとんどなく、1200〜1600px幅で十分です。
「解像度を適切に落としてから、品質80%前後で保存する」——これが、画質とサイズのバランスを取る王道です。形式ごとの違いは 画像形式の選び方 完全ガイド でも詳しく解説しています。
まとめ
- 品質100%→90%で、見た目を保ったままサイズは約3分の1になる。
- Web用途は品質80%前後が好バランス（元の約2割のサイズ）。
- 50%以下はブロックノイズが目立つため常用は避ける。
- 品質を下げる前に、解像度を用途に合わせて下げるとより効果的。
実際に圧縮するには、 画像圧縮ツール をどうぞ。品質スライダーを動かしながら、サイズと見た目のバランスをその場で確認できます。画像はサーバーに送信されず、すべてブラウザ内で処理されます。