Netablog

デザインしたりとWebマーケティングしたりするときにネタになることまとめているネタブログです。

Photoshopの書き出しの違いで画像の質を比較

f:id:nekonkeo:20151219222805j:plain

Photoshopにて、ホームページに使う画像をつくるとき、
ずーーーーっと
Web用に保存
を使って作成しておりました。

Adobe Creative Cloudになってから、Web用保存が多様化しております。
さらに、
「もうWeb用保存なんて古いよwww( ・ω・) 」
などと言わんばかりに、メニュー表示に
(従来)
とかいう嫌味な一言をつけてきやがりました(゚Д゚)

f:id:nekonkeo:20151219222958j:plain



そこまでいうなら、新しい機能使ってやろうやないかい(*゚д゚) !!
とはいうものの、画像の質が心配なので、比較してみます。



まずは基本画像を用意

f:id:nekonkeo:20151219223351j:plain

Photo-acさんから借りてます。

画像サイズは、解像度72pixel/inch・幅1200px・縦798pxです。



画像作成方法と比較ポイント


画質と容量を以下の方法で比較します。とりあえずすべてjpgにします。

f:id:nekonkeo:20151219224905j:plain




A.基本ファイル:Web用保存
最高画質・バイキュービック法

f:id:nekonkeo:20151219224919j:plain




B.jpegとしてクイック書き出し
この設定は、ファイルメニューの環境設定を書き出し…てとこから調整できます。
(環境設定を書き出しって日本語おかしくないすか?)

f:id:nekonkeo:20151219225247j:plain

 

C.書き出し形式…

画質100%のバイキュービック法です。

f:id:nekonkeo:20151219225333j:plain

 


D.レイヤーからファイル

画質は最高の12です。

f:id:nekonkeo:20151219225602j:plain



書き出し後の画質

 

300%拡大表示してます。

A.Web用保存 vs B.jpegとしてクイック書き出し

f:id:nekonkeo:20151219230029j:plain



A.Web用保存 vs C.書き出し形式…

f:id:nekonkeo:20151219230118j:plain



A.Web用保存 vs D.レイヤーからファイル

f:id:nekonkeo:20151219230156j:plain

 

画質については、どの方法でも質は遜色ないですね(*´ω`)ノ 



ファイルサイズ

f:id:nekonkeo:20151219230413j:plain



A.Web用保存
545KB

B.jpegとしてクイック書き出し
875KB

C.書き出し形式…
208KB

D.レイヤーからファイル
627KB


Cの書き出し形式はかなり軽くなるんですね!
Dのレイヤーからファイルは、同一ファイルの複数レイヤーを同時に書き出すときに便利なんですが、ちょっとだけWeb用保存よりおもくなるのが気になります。

単純に一枚画像をjpegに書き出したいときは、書き出し形式でよさそうです!


PNGならどうでしょうか?


Cの書き出し形式がWeb用保存にかわる方法としていい感じなので、PNGではどうでしょう。

画質はjpegのとき同様、目立った差はないです。

f:id:nekonkeo:20151219230734j:plain


ファイルサイズはjpegのときと逆で、C.書き出し形式…が少し重くなっちゃいました。

f:id:nekonkeo:20151219231015j:plain

 


ん〜、jpegなら書き出し形式使っとけって感じですかね〜。でもPNGはやっぱちゃんと書き出さないと重くなっちゃうってことですかねー。