PhotoshopからWeb用にJpegファイルを無造作に出力すると、サイズが大きくなりすぎ表示が遅くなる一因になるので注意しましょうという話です。
科学的に(SSIMで)画質を評価すると、50以下でもよさそうだという結果がでました。
ただ、いろいろなデータを逆にヒューリスティックに見比べるということは出来ていないので、**「こういうケースもあるので50以下はさすがに厳しい」**といった反論もお待ちしています。
PhotoshopのJpeg品質は45〜50でも十分？
多くのデザイナーさんは80前後を指定するのではないでしょうか？
まわりの数名に聞いたらそういう回答でしたし、自分もたまにしか使いませんが**「90は高すぎだけど、60まで下げるのは不安…」**という感覚でいました。
しかし先日、Jpegエンコーダの画質とファイルサイズについて記事を書いたときに、PhotoshopのJpeg品質がImageMagickなどのJpeg品質とずいぶん尺度が違うことに気づきました。
以下の写真画像をJpegを保存するときの品質とファイルサイズのグラフです。緑の線がPhotoshopです。Photoshopは他のエンコーダに比べて2倍程度ファイルサイズが大きく推移しています。
Photoshopは品質50までサブサンプリング4:2:0、51から4:4:4になるという、まさにデザイナー向けの画質優先エンコーダなのですが、それを加味してもファイルサイズが大きい。
では画質はどうかというと、これもPhotoshop(緑の系列)は同じ品質に対して総じて高いSSIMが出ます。
ImageMagickの品質85による画質はPhotoshopの品質45くらい
Googleの表示高速化ガイドはJpegの品質は85で十分としています。
これが代表的なImageMagickを指しているとすると、SSIM換算で品質を逆算したらPhotoshopでは45くらいになります。
PhotoshopとImageMagickの品質対応表の例
もう少し細かくPhotoshopの品質とImageMagickの対応表を作ってみます。SSIMの範囲を区切って、該当するサンプルの平均を出したものです。
あくまで特定の写真1枚におけるデータに基づくデータです。法則を示すものではありません。
| SSIM > | SSIM <= | Photoshop | サンプル数 | ImageMagick | サンプル数 |
|---|---|---|---|---|---|
| 0.995 | 1.000 | 98.50 | 4 | 99.0 | 3 |
| 0.990 | 0.995 | 92.00 | 9 | 96.5 | 2 |
| 0.985 | 0.990 | 83.50 | 8 | 94.5 | 2 |
| 0.980 | 0.985 | 76.50 | 6 | 92.0 | 3 |
| 0.975 | 0.980 | 70.00 | 7 | 90.0 | 1 |
| 0.970 | 0.975 | 64.00 | 5 | - | 0 |
| 0.965 | 0.970 | 57.00 | 9 | - | 0 |
| 0.960 | 0.965 | 51.50 | 2 | - | 0 |
| 0.955 | 0.960 | - | 0 | - | 0 |
| 0.950 | 0.955 | 49.50 | 2 | 89.0 | 1 |
| 0.945 | 0.950 | 46.50 | 4 | 87.0 | 3 |
| 0.940 | 0.945 | 41.50 | 6 | 84.0 | 3 |
| 0.935 | 0.940 | 36.00 | 5 | 80.5 | 4 |
| 0.930 | 0.935 | 30.50 | 6 | 76.0 | 5 |
| 0.925 | 0.930 | 25.00 | 5 | 70.5 | 6 |
| 0.920 | 0.925 | 21.00 | 3 | 64.0 | 7 |
| 0.915 | 0.920 | - | 0 | 56.0 | 9 |
| 0.910 | 0.915 | - | 0 | 47.5 | 8 |
| 0.905 | 0.910 | 14.50 | 10 | 40.5 | 6 |
| 0.900 | 0.905 | 8.50 | 2 | 34.5 | 6 |
| 0.895 | 0.900 | 6.50 | 2 | 29.5 | 4 |
| 0.890 | 0.895 | 4.00 | 3 | 25.5 | 4 |
| 0.885 | 0.890 | 1.50 | 2 | 22.5 | 2 |
| 0.880 | 0.885 | - | 0 | 20.5 | 2 |
| 0.875 | 0.880 | - | 0 | 18.0 | 3 |
| 0.870 | 0.875 | - | 0 | 16.0 | 1 |
| 0.865 | 0.870 | - | 0 | 15.0 | 1 |
| 0.860 | 0.865 | - | 0 | 13.5 | 2 |
| 0.855 | 0.860 | - | 0 | 12.0 | 1 |
| 0.850 | 0.855 | - | 0 | 11.0 | 1 |
諸説ありますが、SSIMは0.95までオリジナルとの区別が付きにくいと言われています。
SSIM0.945〜0.950に対しては、ImageMagick品質は87が該当します。Photoshopでは46.5です。
まとめ
公開用のJpeg画像を品質50以下で出力するのはなかなか勇気が要りそうです。
また、出力した後にサムネイルなど自動リサイズが控えている場合はここまで品質とファイルサイズを攻める必要はないと思います。
PhotoshopからのJpeg出力でファイルサイズと品質を見直し、表示高速化に繋がるネタになれば幸いです。