JPGの画質60・75・85・95は何が違う? 数字ごとに保存してみました

作成 · 更新 · 運営者(個人)

JPGで保存するとき、画質の数字をいくつにすればいいか迷いませんか。この数字は「元の何%」ではなく、どれだけ強く圧縮するかを決める値です。文字・空・細かい模様が一緒に入った絵を60・75・85・95で保存したところ、画面で見るなら85、文字が大事なら95、容量に余裕がないなら75が目安になりました。

数字は何を変える?

JPGは絵を8×8ピクセルの区画に分け、目に付きにくい細かな揺らぎから削って保存します。数字が低いほど多く削るのでファイルは小さくなり、削った跡が四角いしみや文字のまわりの波のような模様として残ります。

もう1つ変わるものがあります。ミルキットのJPG保存は、数字に合わせて色情報の解像度も決めます。保存したファイルのヘッダーを直接読むと、60と75は色情報を縦横とも半分、85は横だけ半分で保存し、95と100は色情報をそのまま残していました。明るさはいつも元の解像度のままです。

同じ絵を数字ごとに保存した結果

1600×1200の試験画像を自作しました。左上に11〜40pxの文字と赤・青の文字、右上に空のようなグラデーション、下半分に草むらのような細かい模様を入れ、PNGで1.60MBです。これをミルキットの実際の処理でJPGに保存しました。

画質60は67.3KB、75は104.5KB、85は169.1KB、95は431.4KBでした。100まで上げると1019.1KBで、85の6倍です。85から95へ10上げただけで、容量は約2.6倍になりました。数字が高いほど、1目盛りの値段が上がります。

範囲によって差の出方が違いました

元との差を範囲ごとのPSNRで測りました。大きいほど元に近い値です。

文字の範囲は、60で32.6dB、75で34.5dB、85で37.3dB、95で46.3dBでした。85と95の間で一番大きく良くなったのは、圧縮が弱くなったうえに、95からは色情報もそのまま残るため、赤い文字のまわりの色のにじみも減ったからです。拡大画像でも、60・75の赤と青の文字は縁がつぶれ、95はくっきりしていました。

空のグラデーションは60でも42.7dBと高く、85では49.8dBでした。なめらかな面は低い数字でもよく耐えましたが、60では拡大すると色が階段のように途切れる帯が見えました。細かい模様は60で33.5dB、85で35.7dB、95で39.0dBと、どの数字でも一番低い値でした。ただ、模様自体が複雑なので、目では違いが分かりにくい結果でした。

どの数字を選べばいい?

画面で見る写真なら85が無難でした。ミルキットの形式変換の初期設定も85です。もっと容量を減らしたいなら75でも十分で、85より38%小さくなり、写真の部分には大きな違いがありませんでした。

キャプチャや表、赤い文字のある案内のように文字が大事な画像は、95にするか、PNGで保存してください。60は、プレビュー用のサムネイルのように拡大して見ることのない場所だけにおすすめします。印刷する写真や、あとでまた編集する写真は95以上にしておくと安心です。

WebPの画質の数字と同じ意味?

同じ絵をWebPでも60・75・85・95で保存してみました。60は57.9KB、75は79.9KB、85は183.0KB、95は402.0KBです。60と75ではJPGより小さくなりましたが、85ではかえってJPG(169.1KB)より大きくなりました。同じ数字でも、形式ごとに圧縮のしかたと強さが違うために生まれる差です。

そのため、形式を変えるときは数字をそのまま持ち込まず、結果の容量と拡大画面を見て決め直してください。ミルキットでは保存形式を変えるとすぐに結果の容量が計算し直されるので、比べやすくなっています。

同じ数字で保存し直すと?

85で保存したJPGを開き直して85で保存しても、最初のファイルより良くなることはありません。もう一度圧縮を通るたびに、跡が少しずつ重なることがあります。何度も編集する画像はPNGで作業し、最後に一度だけJPGで保存するのがきれいです。

ミルキットで数字を決める手順

  1. 形式変換を開いて絵を追加し、保存形式でJPGを選びます。
  2. 容量の調整が「画質で調整」になっているか確かめ、画質のスライダーを好きな数字に動かします。
  3. 結果の容量が変わったら、プレビューで100%を押して文字となめらかな面を見ます。
  4. 決まった容量の上限があるなら、数字を自分で選ぶ代わりに「容量で調整」を選んで目標を入れてください。上限の中で一番高い数字をミルキットが探します。
関連するツールを開く

MiruKitで実際に確認した結果

画質容量文字のPSNRグラデーションのPSNR細かい模様のPSNR色の情報
60%67.3 KB32.6 dB42.7 dB33.5 dB縦横とも半分
75%104.5 KB34.5 dB46.1 dB34.3 dB縦横とも半分
85%169.1 KB37.3 dB49.8 dB35.7 dB横だけ半分
95%431.4 KB46.3 dB51.7 dB39.0 dBすべて維持
100%1019.1 KB67.9 dB53.0 dB50.8 dBすべて維持
WebP 60%57.9 KB———比較用
WebP 75%79.9 KB———比較用
WebP 85%183.0 KB———比較用
WebP 95%402.0 KB———比較用

文字(11〜40px)・空のグラデーション・細かい模様を1枚に入れた1600×1200のPNG(1.60 MB)を、公開中のprocessImageでJPGの画質60・75・85・95・100で保存しました。PSNRは範囲ごとのRGB値で、色情報の解像度は保存したJPGのヘッダーを直接読みました。比較用に同じ絵をWebPの60・75・85・95でも保存しました。

同じ絵の3か所を画質の数字ごとに切り出し、2倍に拡大しました。実際に保存したファイルのピクセルです。
同じ絵の3か所を画質の数字ごとに切り出し、2倍に拡大しました。実際に保存したファイルのピクセルです。
現在のツールで記事の設定を実際に適用した画面です。
現在のツールで記事の設定を実際に適用した画面です。

実測の元データを見る

知っておきたいこと

上の数字は自作の試験画像1枚の結果です。写真の内容によって、同じ画質の数字でも容量は大きく変わります。

画質の数字の計算方法はアプリごとに違います。ほかのアプリの85がミルキットの85と同じ容量や画質という意味ではありません。WebPの85もJPGの85とは違います。

すでにJPGになった写真を高い数字で保存し直しても、失われた細部は戻りません。元の画像から一度だけ保存してください。