PhotoshopでWEB用に保存する2通りの方法とその違いの比較

home-office-336581_1280

こんにちは。ノッツです(^o^)/

私はブログに写真を載せる場合に、Photoshopの機能を使ってWeb用に最適な画像として保存してから載せています。

Photoshop CC 2014からバージョンアップしたPhotoshop CC 2015では、Web用に保存する方法が新しくなりました。

そのことについて書いていこうと思います。

ちなみに、PhotoshopはCreative Cloudに申し込むことで使うことができます。

スポンサーリンク

Photoshop CC 2014とPhotoshop CC 2015のWEB用保存の違い

Adobeのブログでは、Photoshop CC 2014とPhotoshop CC 2015でのWEB用に保存する機能の違いを以下のように説明しています。

1999年に販売したPhotoshop 5.5に「Web用に保存」が搭載されましたが、これはImageReady(現在は販売終了)から移植された機能です。高画素の写真をWeb掲載するために最適化したり、アニメーションGIFを作成したり。ただ、新しい機能を開発するにあたって、このコードは古いものとなってしまいました。

そこでアドビは新しくAdobe Generator (生成)、Photoshopから画像を書き出すために、より現代的で効率的な作業を考えた機能を搭載し、さらに約2年の歳月をかけて、「書き出し形式」や「Device Preview」の機能を開発しました。

「書き出し形式」ではPNG、JPEG、PNG-8、GIF、SVGのファイル形式に対応しています。ファイルメニューから、書き出し/環境設定を書き出し、を選択すれば、好みのファイル形式と保存場所の設定ができます。この設定が、「クイック書き出し」の設定に反映されます。今まで「Web用に保存」を開いて、逐次ウィンドウを開いて、保存ボタンを押す。。。というような作業は必要なくなりました。特に大きなポイントは、JPEG圧縮技術自体も向上し、JPEGの最高画質を選択した時、従来の「Web用に保存」と比較して、最終画像が半分のファイルサイズになる場合もあります。(これは写真によって結果が異なることは事前に了承ください)

従来の保存の方法と新しくなった保存の方法とでは、ファイルサイズに半分近くの差がでるとはすごいですね。

スポンサーリンク

Photoshop CC 2014までの従来のWEB用に保存する方法

従来の方法でのWeb用に保存の仕方です。

【ファイル】⇒ 「書き出し」 ⇒ 「Web用に保存(従来)」からできます。

2014から2015になり「(従来)」が付け加えられています。この従来でのWeb保存は、いつか消されそうですね。

ps_web1

保存形式やサイズなどを設定し、「保存」をクリックすることでWeb用に最適な画像として保存されます。

保存形式は、PNG、JPEG、GIF、WBMPから選択できます。

ps_web2

Photoshop CC 2015からのWEB用に保存する方法

新しくなった方法でのWeb用に保存の仕方です。

【ファイル】⇒ 「書き出し」 ⇒ 「書き出し形式」からできます。

PNG形式で保存する場合は、「PNDとしてクリック書き出し」から直ぐにPNG形式で保存することができます。

ps_web4

保存形式やサイズなどを設定し、「保存」をクリックすることでWeb用に最適な画像として保存されます。

従来と比べて、設定する項目が少なくなっています。

保存形式は、PNG、JPEG、GIF、SVGから選択できます。

ps_web5

従来のWEB保存と新しくなったWEB保存の比較

従来のWEB保存と新しくなったWEB保存でのファイルサイズなどを比較してみます。

4つの画像で比較します。

設定

以下のように画質やサイズを同じに設定します。

  • 保存形式:JPEG
  • 画質:50
  • 画像サイズ:横1000px

従来のWEB保存

従来のWEB保存の設定例です。

ps_web6

新しくなったWEB保存

新しくなったWEB保存の設定例です。

ps_web7

結果

左が従来での方法、右が新しい方法でのWeb用に保存した画像(スマホ表示では上が従来、下が新)です。

縮小してあるので、右クリックして「新しいタブで画像を開く」をクリックするなどをして、大きいサイズで開かないと違いが分からないと思います。

実際に比べてみると、新しい方法のほうが若干画質が劣っているような気がします。

特に、スクリーンショットではそれが顕著に分かります。

ps_old1ps_new1

ps_old2ps_new2

ps_old4ps_new4

ps_old3ps_new3

画像サイズを比較した表です。

Adobeが言っているように、半分近くの違いが現れました。

従来 従来との比較
スイカ 70KB 39KB 56%
ひまわり 70KB 41KB 59%
スクリーンショット上 110KB 68KB 62%
スクリーンショット下 56KB 35KB 62%

結論

従来と新しい方法を比べると、ファイルサイズに半分近くの差が現れました。

ただ、新しい方法で保存した画像は、従来の方法に比べて画質が悪く感じました。

そのため、従来と同じような画質にするためには、保存する際の設定においての画質の設定を少し高くする必要があると感じました。

でも、それほど大きな違いではないので、ブログに載せる画像においては、それほど気にしなくてもいいかもしれません。

ちなみに、保存する際の設定の画質を100にした場合においても、同じような結果が得られました。

さいごに

Photoshopでの従来の保存方法と、新しくなった保存方法について見てきましたが、ファイルサイズなどに大きな差が現れました。

Web用に保存する際は、アクション機能を使って設定しておくことで更に便利に使うことができますよ。

アクション機能については、以下に書いています。

Photoshopでよく使う作業をアクションに登録して効率よく利用する方法
どうも。ノッツです(^o^)/ 言わずと知れた画像編集ソフトとして「Photoshop」があります。 私はブログに写真を載せるときの編集やWeb用に書き出すときなどに使っています。 昔は数...

ということで、今後は新しくなったWeb用保存の方法で、ブログで使用する画像を生成していこうと思います。