Web制作の必須アプリ！みんな大好きPhotoshop！書き出すファイルのファイルサイズは画質設定次第、意外と画質60でも...[JPGダイエット対決 vol.05]
今回は、グラフィックアプリケーションのデファクトスタンダードであるAdobe Photoshopとの対決です！フォトショの名称で愛される、Webの初期から活躍、そして進化を続けるアプリケーションです。WindowsでもMacでも利用できます。
Webデザインをされている日本人の方は、ほぼ100%利用経験があるのではないでしょうか。最近は、自分はAffinity製品のお世話になっていますが、Adobeさんのプロダクトは大好きです。Macromediaも大好きでした。
今回の素材
今回の素材はこちら！虎です。シマシマ模様がカッコイイですね！
Photoshopのダウンロード
Photoshopは有償のツールです。無償のトライアル版もあります。単体での契約のほか、Adobe製品をまるごと利用できるようなサブスクリプションプランも用意されています。
効果測定の結果
今回は、Photoshopの「ファイル」＞「Web用に保存」で書き出したファイルを測定します。また、画質は以下の5パターンで書き出してみました。このあたりは、みなさんどのような設定でやっているのでしょう？
- 画質100
- 画質95
- 画質90
- 画質85
- 画質80
- 画質60
レイヤーからPNGを書き出しこともできるし、レイヤーごとに書き出すこともできるのは本当に便利ですよね。スライスをたくさん切る場合もあるかもですが、レイヤー書き出しは便利です。
今回も出力結果を表にまとめました。ファイルサイズの単位はB（バイト）です。
| ファイル名 | ファイルサイズ | 削減容量 | 削減割合 |
|---|---|---|---|
| 元画像 | 1864212 | - | - |
| Photoshop 画質100 | 1,287,064 | 577,148 | 30.96% |
| Photoshop 画質95 | 1,034,618 | 829,594 | 44.50% |
| Photoshop 画質90 | 869,038 | 995,174 | 53.38% |
| Photoshop 画質85 | 693,760 | 1,170,452 | 62.79% |
| Photoshop 画質80 | 576,935 | 1,287,277 | 69.05% |
| Photoshop 画質60 | 317,016 | 1,547,196 | 82.99% |
| LFC最高画質 | 435,157 | 1,429,055 | 76.66% |
| LFC高画質 | 435,157 | 1,429,055 | 76.66% |
| LFC標準画質 | 435,157 | 1,429,055 | 76.66% |
| LFC低画質 | 155,259 | 1,708,953 | 91.67% |
Photoshopに限った話ではないですが、画質を落とすほどファイルサイズは軽量化されます。気になるのは、その画質です。Photoshopは画質を90より低くするとかなり軽量化に傾くのが確認できます。画質90でも50%以上の軽量はできています。画像の種類にもよると思いますが、画像によっては画質の設定を細かく変えると最適化ができそうです。
オリジナル画像
Photoshop 画質80
Photoshop 画質60
目視で確認している限りでは、画質80でも画質60でもほぼかわりがなさそうです。これは被写体の輪郭がくっきりしていないので、差がわかりづらいせいもあると思います。こういう画像の時は、画質60で書き出すほうがより軽量化できています。
LightFIle Core 画質最高
LightFile Core 画質低
LightFile Coreの画質低の場合、目の輝き部分が少しぼやけているのがわかります。Photoshopの画質60よりもすこしぼやけています。しかし、たぶん指摘されなければほぼ違いがわからないレベルです。
今回比較した画像は、こちらからダウンロードいただけます。
Photoshopの画質60のJPGをLightFile Core画質低で処理すると、さらに50%以上軽くなる！
余談ですが、Photoshopで画質60で書き出したJPGファイルを、LightFile Coreで処理します。そうすると、標準画質と低画質ではさらに最適化が行われます。画質の劣化もほぼ確認ができないレベルです。
Photoshopで画像を軽量化しているといっても、標準機能だけではまだまだ改善の余地が残っていることがわかります。
| ファイル名 | ファイルサイズ | 削減容量 | 削減割合 |
|---|---|---|---|
| Photoshop 画質60 | 317,016 | ||
| LFC標準画質 | 279,844 | 37,172 | 11.73% |
| LFC低画質 | 149,813 | 167,203 | 52.74% |
Photoshopで画質60で書き出したものに、LightFile Coreの画質低で処理を行ったもの。それでも劣化は確認が難しい。
最後に
今回の画像は、毛並みの輪郭がくっきりしている画像ではなく、もともとすこじぼやけたような画像でした。輪郭がくっきりとしている画像や、Photoshopならではのグラデーションが効いた画像だと結果はまた変わってくるはずです。これは次回に持ち越しします。
Photoshopですが、画質設定をいくつにするかで出力されるファイルサイズが変わってきます。画質60というとかなり下げている印象がありますが、それでも画質はよいです。その分、ファイルサイズも削減しきれていない気がします。
Photoshopでファイル最適化をするには、JPEGminiからでているPhotoshop拡張機能を入れるのがよさそうです。ローカルPCにインストールする形にはなりますが、他のツールをはさまずに利用できるのはメリットが大きいと思います。
LightFile Coreは、画質の劣化を最小限に抑えて、ファイルサイズを最大限軽くします。また、手動ではなく自動処理にすることができるので、人が操作をする必要はありません。
JPGの最適化は、LightFile Core | 画像の最適化でページ表示を高速に！
自動でJPEGファイルを容量削減し、表示の高速化/転送量の削減を実現します。
無料トライアルも受付中です！画像の最適化をおこなって、ページ表示を高速化しましょう！
メール無料相談
お聞きになりたいことはありませんか？ この記事の筆者 グロースハッカー能勢 がまずはメールで疑問やお悩みを伺います！ フォームよりお気軽にお寄せください。
担当サービス 画像最適化ツール LightFile
フォローしませんか？
次へ