東京はまだ積雪はしませんが、雪国は今年は雪が多いみたいですね！東京からスキーやスノボにいく新潟の湯沢あたりはかなり雪が降っているとか。フカフカのパウダースノーで、一番上から一番下まで一気に滑走したいですね！

さて今回は、JPGダイエット対決 vol.07として、Photoshopとの対決です。実際にウェブサイトで利用されている画像に近い条件で、それぞれどのくらいのファイル容量になるのかを対決します。また、各比較データはZIPファイルでダウンロードいただけます。

今回以外の対決シリーズはこちらのページにまとめています。

• JPGダイエットまとめ｜どうして画像最適化をするの？それは、コストダウンや表示の高速化ができるから！

今回の対戦相手はAdobe Photoshop、メインバナーの容量軽量化の対決

いつもは写真をオリジナルデータとして対決しています。写真以外にも、広告用のバナーも画像ファイルとして作成されています。今回は、ウェブサイトのトップページによくあるメインバナーをオリジナル素材として用います。PC用のバナーとしたので、表示サイズも横1200px 縦540pxと大きめなものにしています。

• Adobe Photoshop

Photoshopの説明はいらないくらい有名なアプリです。今回はWeb制作のようにPhotoshopでバナーを作成し、そのバナーを書き出したものを利用します。参考のためにPNGでも書き出してみました。Photoshopは非常に高機能なツールであり、Web業界ではデファクトスタンダードなツールです。Javascriptも動作できるので、単なる制作ツールの枠を超えた感じもあります。

利用した素材はこちら

今回の素材はこちら！ゲレンデといえば、リフト！麓の方のリフトよりも、頂上付近や山を超えるタイプのリフトはワクワクしますね！

• https://unsplash.com/photos/yV8hguKKMq0
  Photo by Pamela Saunders on Unsplash

メインバナーはスキーの旅行を提案するタイプ

仮想の旅行会社アイデアマンズトラベルが、北海道のスキー旅行を提案するためのバナーという設定としました。バナー制作はこんな感じで行いました。

1. 1200×540のキャンバスを作成
2. 素材画像を横幅いっぱいで配置（アスペクト比を保持）
3. ロゴマークのアイコンを配置
4. ロゴマーク下にテキストを配置
5. 右下に社名を配置
6. 上下にグラデーションを配置（上部は明るく、下部は暗く）

出来上がったバナーはこちら。シンプルな感じですね。

Photoshopの各画質設定と、画質100で書き出したバナーをLightFileで最適化した結果

わかりやすく表にまとめました。ファイルサイズの単位はB（バイト）です。

Photoshopの画質100を基準として、それぞれの削減量と削減割合を表示しています。こうしてみると、いかにPNG画像が巨大なのか、よくわかります。基準データと比較して実に約2.2倍、LightFileの処理済みと比較して約6倍ものファイルサイズとなっています。実はPhotoshopは、PNG画像の書き出しが非常に簡単にでき、ついついPNGで書き出してしまうことがあると思います。「PNGの方が画像が綺麗だから」なんてコメントをつけることも多いかもしれませんが、果たしてこのファイルサイズを補うほどの効果があるかどうか考えてみたいですね。

Photoshopの画質80ですと、基準データに比べて約半分のファイルサイズになります。ファイルサイズは半分になると、あきらかに体感する事ができるレベルです。Photoshopは画質設定値を記憶しているので、一度80に設定してしまえば、しばらくは設定を変えない限りファイルサイズが小さい状態で書き出すことができます。

LightFileとの比較ですが、LightFileは今回の基準データに対して各画質で処理をかけましたが、すべて同じ書き出しとなりました。ファイルサイズは、Photoshopの画質70とほぼ同等のファイルサイズとなります。約65%の削減なので、あきらかに体感できるほどの軽量化となります。

最も軽量化できたのは、Photoshopの画質60でした。この設定値は、Photoshopでも「やや高画質」となっており、一応高画質の部類に入ります。画質を確認しても大きなモアレなどは目立たず、文字周りがちょっとノイズが入っている感じでした。これが気になるのなら、もう少し画質を上げて書き出すほうが良いですね。

実際に書き出されたバナー

どこまで画質を気にするかですが、大きく気になるレベルの劣化にはならないのではないかと思います。実際の比較データは、下部のZIPファイルをダウンロードください。LightFileはSSIMという画像評価指数を元にして、劣化を最小限に抑えるようになっています。そのため、大きく画質が落ちるということはありません。

Photoshop画質75のバナー

LightFileの画質最高のバナー

比較データのダウンロードはこちらから

• 2018-01-16-photoshop.zip

最後に

やはり画質設定は重要な項目です。きれいな画像がよいのは普通のことであり、画質を保ったままどこまで軽量化することができるか。いかに閲覧者に負担をかけないようにするか。遅い回線で大きなファイルを読み込むのは、本当にストレスを感じることが多いです。離脱率にも影響があるので、自動化して常にファイルの軽量化を行うことが重要です。

もっとファイルを軽量化した！とか、まだ軽量化に取り掛かっていない！という方は、最小限の劣化・最大限のファイルサイズの削減ができるLightFileも検討してみてください！トライアルは無料でお申し込みいただけます！

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

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

https://core.lightfile.net/

PNG画像の使いすぎには、十分注意しましょうね！