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

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

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

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

検証用のPhotoshopで作成したバナー。春スキーももうすぐ終わり？

以前、以下のブログ記事で検証しましたが、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%

それぞれの画像はこちら

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

Photoshop画質100

Photoshop画質100にLightFile(画質優先)で処理。これが最もオススメな処理結果。

Photoshop画質80

Photoshop画質80にLightFile(容量優先)で処理。これが最も軽量。

最後に

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

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

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

https://core.lightfile.net/

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

Photo by Anton Tevajärvi on Unsplash
https://unsplash.com/search/photos/ski

メール無料相談

お聞きになりたいことはありませんか？この記事の筆者グロースハッカー能勢がまずはメールで疑問やお悩みを伺います！フォームよりお気軽にお寄せください。

グロースハッカー能勢

ウェブサイトやウェブサービスの成長請負人です。グロース手法を日々探して、どうやって数字を上げていくのかに情熱を注いでいます。数字を追いかけつつ、技術面の勉強を怠らず、ビジュアル面にもこだわり、ユーザー満足度も向上させたい。ということで、毎日がんばってます。飲みものはビール、食べ物はそば。デザートはショートケーキ。
担当サービス画像最適化ツール LightFile