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

クリアな画質のまま軽くするには?Photoshop作ったバナーを、最高画質で書き出したファイルにLightFileの処理をしてみた

みんな大好きPhotoshopで作った画像は、できるだけ画質が良い状態で書き出したいですよね。

今回は、LightFileの「画質を落とさずに軽量化する」という特徴を利用して、Photoshopで書き出しの際に設定する画質をどうすればよいのか比較してみました。

Photshopの画質設定は悩みどころが多い

2018-03-15-ps80-lf-min.jpg検証用のPhotoshopで作成したバナー。春スキーももうすぐ終わり?

以前、以下のブログ記事で検証しましたが、Photoshopの書き出し時の画質設定は、悩むところが多いです。

  1. Web制作の必須アプリ!みんな大好きPhotoshop!書き出すファイルのファイルサイズは画質設定次第、意外と画質60でも...[JPGダイエット対決 vol.05]
  2. 人間の目ではなかなかわからない!Photoshopの画質設定ごとに、画像にどんな差分があるのか調べてみた。

一般的にはデフォルト値に近い「やや高画質の80」を利用されていることが多いのではないでしょうか?今回は、その「やや高画質の80」と「最高画質の100」で比較してみました。

比較した結果

ファイルサイズでは、「やや高画質の80」×LightFile(容量優先) が最も軽い結果となりました!

しかし、一度画質を下げたものをLightFileで処理するよりは、できるだけ高画質なものをLightFileで処理するほうが、高画質を保つことができます。ファイルサイズを最優先で考えるか、画質とファイルサイズをいいバランスのトレードで考えるか。好みが分かれるところです。

ファイルサイズの単位はB(バイト)です。

ファイル名ファイルサイズ削減量削減割合
①Photoshop画質100 415,890 - -
②Photoshop画質80 192,895 222,995 53.62%
①をLightFile(画質優先)で処理 149,405 266,485 64.08%
②をLightFile(画質優先)で処理 160,945 254,945 61.30%
②をLightFile(容量優先)で処理 134,978 280,912 67.54%

それぞれの画像はこちら

よっぽど細かく比較しないと、違いがわからないレベルですが、ファイルサイズは大きく異なります。なるべく軽くしましょう!

2018-03-15-ogp.jpgPhotoshop画質100

2018-03-15-ps100-lf-best.jpgPhotoshop画質100にLightFile(画質優先)で処理。これが最もオススメな処理結果。

2018-03-15-ps80.jpgPhotoshop画質80

2018-03-15-ps80-lf-min.jpgPhotoshop画質80にLightFile(容量優先)で処理。これが最も軽量。

最後に

retinaディスプレイや、今後の4Kや8Kのディスプレイをみていると、画質が荒いとどうしても汚く見えてしまいます。高解像度化は仕方がないことですが、できるだけキレイで高画質な画像をみれるようにしておきたいところですね。

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

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

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

今回利用させていただいた素材

前へ前へ

画質を保ちながら、ファイルサイズを軽くするLightFileの処理は、「比較して選ぶ」が重要なのです。

次へ次へ

実際、画像を軽量化すると本当に表示高速化されるの?LightFileの処理前後が比較できるページを公開しました。