画像が重いと言われると、まず品質スライダーで調整しようとしないでしょうか。 リサイズ・形式・品質・容量指定の4つを測り直すと、効いた順は「リサイズ ＞ 形式 ＞ 品質」でした。 LPの11枚も、この順で2.09MBが261.8KBになっています。
- 元画像 … 6000×4000px / 4,500KB のJPG写真（筆者が撮影したものです）
- 計測方法 … PixForgeの画像圧縮ツールと同じ処理で書き出し、バイト数を記録（ブラウザの
canvas.toBlob()） - 容量指定 … ツールと同じ二分探索で品質を探索
- 計測日 … 2026年8月3日（Chromium系ブラウザ）
- !注意 … 数値はこの写真1枚の結果です。絵柄によって圧縮の効きは変わるため、傾向の目安として読んでください
01圧縮より先にリサイズ。ここで9割が決まる
結論原寸のまま圧縮しても48%減にしかならない。幅を1600pxに縮めるだけで96.6%減(約30分の1)になる。
| 書き出し幅 | 実寸 | 容量 | 元画像(4,500KB)比 |
|---|---|---|---|
| 原寸のまま | 6000×4000 | 2,335.2 KB | −48.1% |
| 2400px | 2400×1600 | 326.3 KB | −92.7% |
| 1600px | 1600×1067 | 152.7 KB | −96.6% |
| 1200px | 1200×800 | 90.7 KB | −98.0% |
| 800px | 800×533 | 44.0 KB | −99.0% |
1行目を見てください。原寸のままだと、4,500KBが2,335KBにしか減りません。たった48%減です。 ところが幅を1600pxにするだけで152.7KB。約30分の1になります。
容量はほぼ画素数に比例します。6000px幅は1600px幅の約14倍の画素です。 そしてWebで6000px幅が必要になる場面は、まずありません。 表示幅600pxの枠に4000pxの画像を置いても、ブラウザが縮めるだけです。 「画像が重い」と言われたら、品質より先に縮めます。
marudee
支給された写真が原寸のまま入ってるサイト、本当によく見ます。まずここを疑うと早いです。
02品質は0.80で固定する
結論0.95→0.80で229KB減るが、0.80→0.60ではわずか58KB。見た目の差も0.80までは分からない。だから毎回探さず0.80に固定する。
| 品質 | JPG | WebP | WebPの削減率 |
|---|---|---|---|
| 0.95 | 381.9 KB | 264.6 KB | −31% |
| 0.90 | 245.1 KB | 174.2 KB | −29% |
| 0.85 | 185.6 KB | 125.0 KB | −33% |
| 0.80 | 152.7 KB | 100.3 KB | −34% |
| 0.75 | 130.1 KB | 81.7 KB | −37% |
| 0.70 | 116.4 KB | 75.5 KB | −35% |
| 0.60 | 94.3 KB | 67.6 KB | −28% |
| 0.50 | 80.6 KB | 59.3 KB | −26% |
| 0.40 | 68.1 KB | 50.3 KB | −26% |
| 0.30 | 55.6 KB | 41.5 KB | −25% |
この表で大事なのは減り方が一定ではないことです。0.95から0.80へ下げると229KB減りますが、 0.80から0.60まで下げても58KBしか減りません。 下げれば下げるほど、失う画質のわりに得られる容量が小さくなります。
0.95と0.80の差は、並べても分かりません。それでいて容量は229KBも違います。 一方、0.50から下は葉の輪郭のまわりに独特のノイズ（モスキートノイズ）が出て、はっきり劣化が見えます。
0.80は、空のような滑らかな面でも、葉のような細部でも破綻しにくい値です。 写真ごとに最適値を探す必要がありません。
毎回スライダーを動かして探すのをやめ、基準値を1つ決めて固定するだけで、判断にかかる時間がなくなります。
03WebPにすると、さらに25〜37%小さくなる
結論品質はそのままでWebPに変えるだけで25〜37%小さくなる。実務でよく使う0.80では152.7KB→100.3KB(34%減)。
先ほどの表のWebP列を見てください。同じ品質のまま形式を変えるだけで小さくなります。
0.80での100.3KBは、JPGなら品質を0.65あたりまで落とさないと届きません。 画質を削って得るはずだった分を、削らずに得られます。 冒頭のLP案件で11枚が8分の1になったのも、元のPNGをWebPに変えたことが大きく効いています。
!ただしWebPは、古いメールソフトや一部の業務システムでは開けないことがあります。 Web掲載用から先に切り替え、メール添付や印刷入稿用は従来形式のままが安全です。 詳しくはWebP変換で表示速度を上げるにまとめています。
04容量指定の案件で、品質スライダーを手で探ってはいけない
結論同じ「200KB以内」でも、手で安全圏を選ぶと94KB。自動に任せると品質0.86で196KB。上限の98%を画質に回せる。
広告の入稿やCMSの制限で「1枚200KB以内」と容量の上限を指定される案件があります。 品質スライダーで合わせようとすると、0.80で超過、0.70でまだ超過…と書き出し直しの繰り返しです。
marudee
これが面倒で、私は昔「確実に収まる」ところまで一気に下げてました。上限を余らせたまま、粗い画像を納品してたわけです。
順番が逆でした。「品質を決めて容量を見る」のではなく、「容量の上限を決めて、その中に収まる最高の品質を使う」のが本来のやり方です。
そこで圧縮ツールには目標容量を入力するモードを用意しました。 品質0.95から始めて、上限に収まる最大の品質を二分探索で探します（下限0.30・最大10回）。
| 指定した上限 | 自動で選ばれた品質 | 実際の容量 | 上限の使用率 |
|---|---|---|---|
| 300 KB | 0.92 | 274.6 KB | 91.5% |
| 200 KB | 0.86 | 196.5 KB | 98.3% |
| 150 KB | 0.79 | 147.8 KB | 98.5% |
| 100 KB | 0.62 | 98.2 KB | 98.2% |
「200KB以内」という同じ条件でも、結果はまったく違います。 手で安全圏として品質0.60を選ぶと94.3KB。上限の半分以下しか使っていません。 一方、容量指定に任せると品質0.86・196.5KBで、上限の98%まで使い切って画質に回せます。
05「JPGは保存し直すたびに劣化する」は正確ではない
結論同じ品質で10回保存し直しても劣化しない。危ないのは保存の繰り返しではなく、編集を挟んで保存を繰り返すこと。
以前メンバーに画像の修正を依頼したときのことです。 JPGのまま修正と保存を繰り返した結果、明らかに画質が落ちて戻ってきました。 本当に再保存で劣化するのか、2パターンで測りました。
パターンA：同じ品質で開いて保存し直すだけ
| 回数 | 1回目 | 3回目 | 5回目 | 10回目 |
|---|---|---|---|---|
| 容量 | 153.0 KB | 152.8 KB | 152.8 KB | 152.8 KB |
ほとんど変化しませんでした。 一度その品質で捨てた情報を、もう一度同じ基準で捨て直しても結果は変わらないためです。
パターンB：編集を挟んで保存し直す
保存のたびに加工（拡大・縮小など、画素の再計算をともなう操作）を挟んでから、 同じ品質0.80で保存し直した場合です。
| 回数 | 1回目 | 2回目 | 5回目 | 10回目 |
|---|---|---|---|---|
| 容量 | 153.0 KB | 132.7 KB | 120.9 KB | 116.8 KB |
品質設定は0.80のまま変えていないのに、容量がどんどん減っていきます。 画像が良くなったのではなく、細部が失われた結果です。
!つまり危ないのは「保存し直すこと」そのものではなく、「編集を挟んで保存を繰り返すこと」です。 修正作業をJPGのまま往復させると、この劣化が積み上がります。対策は次の2つです。
- 編集は原本で行い、JPG/WebPは書き出し専用にする … 原本から書き出し直せば、劣化は積み上がりません。
- 修正を人に依頼するときは、書き出し済みのJPGではなく原本を渡す … 私が失敗したのはここでした。渡すデータを間違えると、相手がどれだけ丁寧に作業しても画質は落ちていきます。
06まとめ：実務の手順
順番を守れば、判断に迷う場面はほとんどありません。 冒頭のLP案件も、次の手順をそのまま適用しただけです。1枚あたりの平均は約195KB → 約24KBになりました。
- 1. 表示に必要なサイズまでリサイズする … 削減の9割はここで決まります。圧縮より先。
- 2. 形式をWebPにする … 画質を落とさず25〜37%減。Web掲載用から優先的に。
- 3. 品質は0.80固定 … 上げても見た目は変わらず、下げても容量は減りません。毎回探さない。
- 4. 容量指定の案件だけ、目標容量を入力するモードに切り替える … 手で安全圏まで下げると、使える画質を捨てます。
- 5. 編集は原本で行い、JPG/WebPは書き出し専用にする … 人に渡すときも原本を渡す。元画像は上書きしない。
この記事の実測はすべて、PixForgeの画像圧縮ツールと同じ処理で行っています。 リサイズは画像リサイズ・変換ツール、WebP変換はWebP一括最適化ツールで、 いずれもフォルダごとまとめて処理できます。すべてブラウザ内で完結するため、画像が外部に送信されることはありません。