公開日:

元画像に近いのは画質99まで!Photoshopの画質設定を100から80まで試してみた結果、画質80でいいんじゃない?と思った話

Authors
  • author image
    Name
    グロースハッカー能勢

Photoshopの「Web用に保存」で設定する値を、最高画質〜高画質でどのくらいの変化があるのか調べてみました。前回と同様に、ファイルサイズと画像の差分で見ていきます。すべての差分画像を載せることはできないので、もし調査画像一式ほしいという方は、FacebookTwitterからご連絡くださいませ。

前回の記事はこちら。

今回利用する素材はこちらです。そろそろイチゴの季節ですね!

2017-12-22-origin.jpg

画質の設定は、数値指定で100-80まで

2017-12-22-ps-panel01.jpg

Photoshopの画質の設定は、今回は数値で入力しました。高画質といっても99-80まであるので、20パターン存在します。数値入力は、スライダーでも調整が可能です。

JPGの差分は、ImageMagickのcompareコマンドで調べる

今回も、ImageMagickのcompareコマンドで調べてみます。以前も同じようにして調べていますので、興味のある方は参考にしてください。

今回も、グラフィカルにわかるように、差分を画像として出力します

比較は画質100の最高品質から、高画質の画質80まで

早速結果です。まずは、ファイルサイズなどをまとめていきます。ファイルサイズの単位は、byteです。最高品質100は、利用する機会あるのかしら?

画質Photoshopでの表記ファイルサイズ削減量削減割合一つ上との削減割合の差
オリジナル最高画質989,755---
100高画質947,17642,5794.30%-
99高画質935,30454,4515.50%1.20pt
98高画質921,21268,5436.93%1.42pt
97高画質892,99496,7619.78%2.85pt
96高画質865,486124,26912.56%2.78pt
95高画質840,485149,27015.08%2.53pt
94高画質784,792204,96320.71%5.63pt
93高画質763,865225,89022.82%2.11pt
92高画質686,649303,10630.62%7.80pt
91高画質680,106309,64931.29%0.66pt
90高画質644,149345,60634.92%3.63pt
89高画質631,384358,37136.21%1.29pt
88高画質601,127388,62839.27%3.06pt
87高画質576,243413,51241.78%2.51pt
86高画質559,931429,82443.43%1.65pt
85高画質533,680456,07546.08%2.65pt
84高画質525,272464,48346.93%0.85pt
83高画質490,948490,94849.60%2.67pt
82高画質486,699503,05650.83%1.22pt
81高画質455,790533,96553.95%3.12pt
80高画質449,783539,97254.56%0.61pt

画質を1つづつ落としていくと、比例してファイルサイズが落ちていきます。2箇所ほど1つ手前よりも5pt以上削減されるところがあります。これは表示されている画像の内容によると思いますので、あまり数値とは関係ないような気がします。同じ高画質といえど、一番上と下では大きくファイルサイズが異なることがわかります。

  • 画質99 935,304byte
  • 画質80 449,783byte(497,393byteの差)

compareコマンドで比較する

今回のコマンドはこちらです。ImageMagickはものすごい高機能であり、画像ライブラリとしてはデファクトスタンダードです。

$ compare -metric AE /path/to/origin.jpg /path/to/hoge.jpg /path/to/diff-hoge.jpg

画像を3つ指定していますが、最後の画像パスは差分結果の画像ファイルとなります。それでは、それぞれの差分結果です。差分がある部分は赤くなり、差分がないところは白になります

2017-12-22-origin.jpg
オリジナル画像(989,755Byte)
2017-12-22-c-origin.jpg
オリジナル画像同士の比較
2017-12-22-ps100.jpg
画質100(947,176Byte)
2017-12-22-c-ps100.jpg
オリジナル画像との比較 (約-42KBの削減、約4%軽量化)
2017-12-22-ps099.jpg
画質99(935,304Byte)
2017-12-22-c-ps099.jpg
オリジナル画像との比較 (約-54KBの削減、約6%軽量化)
2017-12-22-ps095.jpg
画質95(840,485Byte)
2017-12-22-c-ps095.jpg
オリジナル画像との比較 (約-149KBの削減、約15%軽量化)
2017-12-22-ps090.jpg
画質90(644,149Byte)
2017-12-22-c-ps090.jpg
オリジナル画像との比較 (約-346KBの削減、約35%軽量化)
2017-12-22-ps085.jpg
画質85(533,680Byte)
2017-12-22-c-ps085.jpg
オリジナル画像との比較 (約-456KBの削減、約46%軽量化)
2017-12-22-ps080.jpg
画質80(449,783Byte)
2017-12-22-c-ps080.jpg
オリジナル画像との比較 (約-540KBの削減、約55%軽量化)

画質100や99だと、まだ白っぽいところが多い状態です。そのため、差分もそんなに多くありません。画質95になると、イチゴの部分がだいぶ赤くなっています。左下のイチゴのシズル感の部分が、この後の画質で赤く染まっていきます。画質80ではシズル感の部分も真っ赤になっていますね。画像を見ていただくと、シズル感の輪郭がぼやけていっているのがわかります。このように、食べ物系の画像は画質を下げていくと、シズル感が失われてしまい、美味しそうな画像に見えなくなっていくことがよくわかります。

LightFile Coreでも試してみました。最高画質での処理でも、Photoshopの高画質を凌駕するファイルの最適化をみせています。

画質Photoshopでの表記ファイルサイズ削減量削減割合
オリジナル最高画質989,755--
100高画質947,17642,5794.30%
99高画質935,30454,4515.50%
80高画質449,783539,97254.56%
LFC最高画質-355,191634,56464.11%
LFC画質優先-177,125812,63082.10%

画像の差分をとると、部分的にではなく画像全体に対して処理をかけているのがわかります。

2017-12-22-lfc-best.jpg
LightFile Coreの高画質処理後(355,191Byte)
2017-12-22-c-lfc-best.jpg
オリジナル画像との比較 (約-635KBの削減、約64%軽量化)
2017-12-22-lfc-low.jpg
LightFile Coreの画質優先処理後(177,125Byte)
2017-12-22-c-lfc-low.jpg
オリジナル画像との比較 (約-813KBの削減、約82%軽量化)

LightFile Coreの特徴である独自アルゴリズム

LightFile Coreでは、SSIMという画像評価指数を元に、独自のアルゴリズムで画像最適化を行なっています。これは、複数枚の画像を生成した後に、その中からもっとも劣化が少なく、最も軽いファイルを選び出すことが可能になっています。一度処理をして終わりではなく、比較して選び出すことで、最も最適化が行われた画像を選び出すことが可能なので。

JPGの最適化は、LightFile Core | 画像の最適化でページ表示を高速に!

JPGの最適化は、LightFile Core | 画像の最適化でページ表示を高速に!

自動でJPEGファイルを容量削減し、表示の高速化/転送量の削減を実現します。

無料トライアルも受付中ですので、お問い合せお待ちしてます!

最後に

いかがでしたでしょうか?普段気にすることが少ないPhotoshopの画質設定ですが、大きくファイルサイズに関わる項目です。こまめに設定して、ファイルを軽くしましょう。面倒と感じる方は、LightFile Coreでサーバ側で自動で処理しちゃいましょう!

Photoshopの画質ごとの差分ファイル一覧

イチゴがどんどん赤く染まっていくのがよくわかります。画質98からイチゴが大きく赤くなるので、元画像と全くかえたくない!という場合は、画質99までの設定にしたほうがよさそうです。


画質100

画質99

画質98

画質97

画質96

画質95

画質94

画質93

画質92

画質91

画質90

画質89

画質88

画質87

画質86

画質85

画質84

画質83

画質82

画質81

画質80