こんにちは。ノッツです(^o^)/
私はブログに写真を載せる場合に、Photoshop CCの機能を使ってWeb用に最適な画像として保存してから載せています。
Photoshop CC 2014からバージョンアップしたPhotoshop CC 2015では、Web用に保存する方法が新しくなりました。
そのことについて書いていこうと思います。
ちなみに、Photoshop CCは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保存は、いつか消されそうですね。
保存形式やサイズなどを設定し、「保存」をクリックすることでWeb用に最適な画像として保存されます。
保存形式は、PNG、JPEG、GIF、WBMPから選択できます。
Photoshop CC 2015からのWEB用に保存する方法
新しくなった方法でのWeb用に保存の仕方です。
【ファイル】⇒ 「書き出し」 ⇒ 「書き出し形式」からできます。
PNG形式で保存する場合は、「PNDとしてクリック書き出し」から直ぐにPNG形式で保存することができます。
保存形式やサイズなどを設定し、「保存」をクリックすることでWeb用に最適な画像として保存されます。
従来と比べて、設定する項目が少なくなっています。
保存形式は、PNG、JPEG、GIF、SVGから選択できます。
従来のWEB保存と新しくなったWEB保存の比較
従来のWEB保存と新しくなったWEB保存でのファイルサイズなどを比較してみます。
4つの画像で比較します。
設定
以下のように画質やサイズを同じに設定します。
- 保存形式:JPEG
- 画質:50
- 画像サイズ:横1000px
従来のWEB保存
従来のWEB保存の設定例です。
新しくなったWEB保存
新しくなったWEB保存の設定例です。
結果
左が従来での方法、右が新しい方法でのWeb用に保存した画像(スマホ表示では上が従来、下が新)です。
縮小してあるので、右クリックして「新しいタブで画像を開く」をクリックするなどをして、大きいサイズで開かないと違いが分からないと思います。
実際に比べてみると、新しい方法のほうが若干画質が劣っているような気がします。
特に、スクリーンショットではそれが顕著に分かります。
画像サイズを比較した表です。
Adobeが言っているように、半分近くの違いが現れました。
従来 | 新 | 従来との比較 | |
---|---|---|---|
スイカ | 70KB | 39KB | 56% |
ひまわり | 70KB | 41KB | 59% |
スクリーンショット上 | 110KB | 68KB | 62% |
スクリーンショット下 | 56KB | 35KB | 62% |
結論
従来と新しい方法を比べると、ファイルサイズに半分近くの差が現れました。
ただ、新しい方法で保存した画像は、従来の方法に比べて画質が悪く感じました。
そのため、従来と同じような画質にするためには、保存する際の設定においての画質の設定を少し高くする必要があると感じました。
でも、それほど大きな違いではないので、ブログに載せる画像においては、それほど気にしなくてもいいかもしれません。
ちなみに、保存する際の設定の画質を100にした場合においても、同じような結果が得られました。
さいごに
Photoshop CCでの従来の保存方法と、新しくなった保存方法について見てきましたが、ファイルサイズなどに大きな差が現れました。
Web用に保存する際は、アクション機能を使って設定しておくことで更に便利に使うことができますよ。
アクション機能については、以下に書いています。

ということで、今後は新しくなったWeb用保存の方法で、ブログで使用する画像を生成していこうと思います。
Photoshop CCは、体験期間を利用することで一定期間無料で使うことができます。
Photoshop CCの体験版はこちら。
Photoshop CCについてはこちらから。
⇒ Photoshop CC
Photoshop CCを一つ利用したい場合はCreative Cloudの単体プランとなり月額2,180円かかります。
Photoshop CCの他に、Lightroom CCやLightroom Classic
CCを利用したい場合は、Creative Cloudのフォトプラン
というPhotoshop CCとLightroom CC、Lightroom Classic CCがセットに使える月額980円のプランもありますので、3つ使いたい場合はこちらのプランを使うといいと思います。こっちのほうが安いです。
フォトプランの体験版はこちらから。
フォトプランについてはこちらから。
⇒ フォトプラン
フォトプランは単体プランと比べると、オンラインストレージが20GB(単体プランは100GB)となったり、Typekitが使えないなどといったことがありますが、安く使えるのでそれほど気にすることではないでしょう。
Photoshop CCやLightroom CC、Lightroom Classic CCの他に、Illustrator CCやInDesign
CCなども使いたい場合は、Creative Cloudのコンプリートプランという月額4,980円のたくさんのソフトが使用できるプランを使うといいでしょう。
プラン違いは、Creative Cloudのプラン比較表に書かれているのでこちらを御覧ください。
コメント