[PR] 大手アパレルECサイトが導入する月額1万円〜ファイル数無制限の画像軽量化ツール「LightFile」

Web制作の必須アプリ!みんな大好きPhotoshop!書き出すファイルのファイルサイズは画質設定次第、意外と画質60でも...[JPGダイエット対決 vol.05]

今回は、グラフィックアプリケーションのデファクトスタンダードであるAdobe Photoshopとの対決です!フォトショの名称で愛される、Webの初期から活躍、そして進化を続けるアプリケーションです。WindowsでもMacでも利用できます。

Webデザインをされている日本人の方は、ほぼ100%利用経験があるのではないでしょうか。最近は、自分はAffinity製品のお世話になっていますが、Adobeさんのプロダクトは大好きです。Macromediaも大好きでした。

今回の素材

2017-12-06-lfc-low.jpg

今回の素材はこちら!虎です。シマシマ模様がカッコイイですね!

Photoshopのダウンロード

Photoshopは有償のツールです。無償のトライアル版もあります。単体での契約のほか、Adobe製品をまるごと利用できるようなサブスクリプションプランも用意されています。

効果測定の結果

今回は、Photoshopの「ファイル」>「Web用に保存」で書き出したファイルを測定します。また、画質は以下の5パターンで書き出してみました。このあたりは、みなさんどのような設定でやっているのでしょう?

  1. 画質100
  2. 画質95
  3. 画質90
  4. 画質85
  5. 画質80
  6. 画質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%以上の軽量はできています。画像の種類にもよると思いますが、画像によっては画質の設定を細かく変えると最適化ができそうです。

2017-12-06-origin.jpgオリジナル画像

2017-12-06-ps080.jpgPhotoshop 画質80

2017-12-06-ps060.jpgPhotoshop 画質60

目視で確認している限りでは、画質80でも画質60でもほぼかわりがなさそうです。これは被写体の輪郭がくっきりしていないので、差がわかりづらいせいもあると思います。こういう画像の時は、画質60で書き出すほうがより軽量化できています。

2017-12-06-lfc-best.jpgLightFIle Core 画質最高

2017-12-06-lfc-low.jpgLightFile 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%

2017-12-06-ps60-lfc-low.jpgPhotoshopで画質60で書き出したものに、LightFile Coreの画質低で処理を行ったもの。それでも劣化は確認が難しい。

最後に

今回の画像は、毛並みの輪郭がくっきりしている画像ではなく、もともとすこじぼやけたような画像でした。輪郭がくっきりとしている画像や、Photoshopならではのグラデーションが効いた画像だと結果はまた変わってくるはずです。これは次回に持ち越しします。

Photoshopですが、画質設定をいくつにするかで出力されるファイルサイズが変わってきます。画質60というとかなり下げている印象がありますが、それでも画質はよいです。その分、ファイルサイズも削減しきれていない気がします。

Photoshopでファイル最適化をするには、JPEGminiからでているPhotoshop拡張機能を入れるのがよさそうです。ローカルPCにインストールする形にはなりますが、他のツールをはさまずに利用できるのはメリットが大きいと思います。

LightFile Coreは、画質の劣化を最小限に抑えて、ファイルサイズを最大限軽くします。また、手動ではなく自動処理にすることができるので、人が操作をする必要はありません。

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

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

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

無料トライアルも受付中です!画像の最適化をおこなって、ページ表示を高速化しましょう!

前へ

画像の差分をみてみよう!変化がわかると、違いがわかる!比べてわかるクオリティと差分の関係。

次へ

JPGダイエット対決!LightFileと画像軽量化サービスとの戦いは終わらない。コストダウンや表示高速化のメリットも。