Web用保存は古い!?  JPEG画質が改善したPhotoshop CC 2015の新方式の画像保存機能まとめ

Web用保存は古い!? JPEG画質が改善したPhotoshop CC 2015の新方式の画像保存機能まとめ

※この記事が公開されたのは1年前ですが、 2016年3月30日に内容をメンテナンスしています。

この記事は「WebデザインTips」の連載の一部です。

みなさんはAdobe Photoshopでどのように画像の書き出しをしていますか? 最新のPhotoshopではさまざまな画像書き出し機能が搭載されており、どれを選択するかで書き出し時の手間や画像の品質が大きく異なります。 本記事ではPhotoshop CCの最新の画像書き出し機能を紹介し、最適な画像書き出し方法を検証していきます。

Photoshopの画像書き出し方法一覧

Photoshop CC 2015において、画像を書き出す方法は大きく分けて6種類あります。

新画像書き出し

Photoshop CCの最新バージョン2015から実装された、新しい画像書き出し方法です。特に名前がついていないので、この記事では便宜上「新画像書き出し機能」と呼びます。[ファイル]→[書き出し]→[書き出し形式]より実行できます。画質の設定や最適化が行えるのは従来と同じですが、設定項目が少なくなっています。また、従来では不可能だったレイヤーごとの画像書き出しやSVGの書き出しにも対応しています。

新画像書き出し

〜としてクイック書き出し

予め保存しておいた設定を使って、新画像書き出し機能を実行します。前述の新画像書き出しと違って書き出すまでに表示されるダイアログが少ないため、素早く画像を書き出すことができます。[ファイル]→[書き出し]→[〜として書き出し]より実行できます。設定は[環境設定]→[書き出し]より行えます。

PNGとしてクイック書き出し

画像アセットの抽出

レイヤーに更新がある度に、自動で画像が書き出される機能です。更新の度に書き出しステップを行う必要がないため、画像生成の時間が短縮される大きなメリットがあります。[環境設定]→[プラグイン]→[Generatorを有効にする]、[ファイル]→[生成]→[画像アセット]をそれぞれ選択します。レイヤー名に「~.png」等の名前を指定することで、自動に画像が書き出されます。画質の設定、レスポンシブWebデザイン向けの画像の大きさ指定など、細かな設定も可能です。詳しくは記事「この進化はズルイ!Generatorテクノロジーを使ったPhotoshop CCの『画像アセット』」を参照するとよいでしょう。

画像アセット抽出

Creative Cloud Extract

クラウド上にアップしたPSDファイルから、自動的にレイヤー別の画像やCSSコードを書き出すことができる機能です。クラウド前提の機能ではあるものの、エディターのAdobe Bracketsと連携して高速なHTMLコーディングが可能になります。詳しくは記事「HTML/CSSコーディング時間を激減させる『Creative Cloud Extract』と、その真価を引きだすための10のポイント」を参照するとよいでしょう。

Creative Cloud Extract

Web用に保存(従来)

その名の通り、Photoshop CC 2015以前からのWeb用画像の書き出し方法です。[ファイル]→[書き出し]→[Web用に保存(従来)]で実行できます。画質の設定や最適化等の設定を詳細に行うことができます。アニメGIF、スライスごとの書き出しなども可能です。

Web用に保存(従来)

保存/別名で保存

PSDファイルをフォーマットを指定して保存します。

書き出す手間が少ないのはどれか?

さて、上記で紹介した方法のうち、書き出す手間が少ない方式はどれでしょうか? 最新のPhotoshop CCの画像書き出しでは、新機能「アートボード」別やレイヤー別に画像を切り出すことが可能です。これは、従来のスライス機能による画像書き出しの手間を大きく省きます。また、「クイック書き出し」や「画像アセット機能」などは書き出しまでのダイアログ表示回数も少なく、素早く画像を書き出すことが可能です。特に、「画像アセット機能」はレイヤーの更新の度に画像が自動で書き出されるため、書き出す手間が一番少ないと言えます。

書き出し方法全体書き出しアートボード・
レイヤー別書き出し
書き出しまでの
ダイアログ数
画像更新時の
手間
新画像書き出し2多い(再度書き出し)
クイック書き出し1多い(再度書き出し)
画像アセット機能
(Generator)
0無し(自動)
Creative Cloud
Extract
0多い (クラウドにアップロード後、 ブラウザを更新)
Web用に保存 (従来)2多い(再度書き出し)
別名で保存2多い(再度保存)

書き出し方によって画質やファイルサイズに違いは出るのか?

書き出しの手間が小さければ新方式を選びたいところですが、書き出し方法によって画像の品質に違いは出るのでしょうか? Web制作でよく使用されるJPEG、PNG形式について、それぞれの書き出し方法別にファイルサイズと画質を比べてみました。

JPEG画像の書き出し方法別の画質・ファイルサイズの違いは?

JPEG画像の書き出しを見てみます。幅960px、高さ640px、解像度72dpiの写真画像を用いて、書き出し方法別にファイルサイズの違いがあるかを調べてみました。結果は以下の通りです。新しく搭載された書き出し機能が高い圧縮率となっていることがわかります。また、書きだされたファイルサイズから見て、新方式で全て内部的に新画像書き出しが使われているのではないかと予想できます。画質も大きな違いは見られませんでした。

書き出し方法ファイルサイズ設定
新画像書き出し356KB画質90
クイック書き出し356KB画質90
画像アセット機能 (Generator)356KBレイヤー名に「~.jpg90%」を指定(画質90)
Creative Cloud Extract356KB画質90
Web用に保存 (従来)574KB画質90 「最適化」にチェック
別名で保存606KB画質11(最高は12) ベースライン(最適化)

JPG画像書き出し比較1

JPG画像書き出し比較2

JPG画像書き出し比較3

最新の画像書き出し機能では、画質が担保されながらもファイルサイズが従来より小さくなっています。この理由はアドビのUST番組「Creative Cloud 道場 ― CC2015特集フォト 04 ぼかしが超リアルに、JPEGが超コンパクトに」に解説がありました。「Web用に保存(従来)」は17年前のPhotoshop 5.5(CSではありません)で実装された古いテクノロジーであり、進化したJPEGエンコードエンジンと共に見なおした成果によるものとのことでした。

PNG画像の書き出し方法別の画質やファイルサイズの違いは?

つづいて、PNG画像の書き出しを見てみます。幅960px、高さ540px、解像度72dpiの背景透過画像を用いて、書き出し方法別にファイルサイズの違いがあるかを調べてみました。こちらも、新しい画像書き出し方法の方がファイルサイズがわずかに小さくなることがわかりました(※)。JPEGと同様、画質の差異は見られませんでした。 ※ 画像や書き出し設定によって結果が異なる場合があります。

書き出し方法ファイルサイズ設定
新画像書き出し147KB形式:PNG 透明部分のチェックを入れる
クイック書き出し147KB 形式:PNG 透明部分のチェックを入れる
画像アセット機能 (Generator)147KBレイヤー名に「~.png」を指定
Creative Cloud Extract(背景透過画像のため、画像全体の書き出しは不可能)
Web用に保存 (従来)171KBPNG-24 透明部分のチェックを入れる
別名で保存182KB圧縮:最小/低速

PNG画像書き出し比較

最後に

Adobe 公式のFAQによると「Web用に保存(従来)」は、将来的には無くなる技術とのことです(※)。Photoshop CC 2015の目玉機能の1つであるアートボードや、Webパーツの書き出しに便利なレイヤー書き出しにも対応していないため、手間や品質の面から言って従来方式の「Web用に保存」を使うメリットは少ないと言えます。手間がかからず、品質も担保された新しい画像書き出し機能に慣れていくのがよいでしょう。今回の記事が、画像書き出し作業の効率化へと繋がれば幸いです。 なお、Web制作・アプリ開発における作業効率化や最新技術情報はQiitaTwitterでも積極的に発信しています。よろしければ私のアカウントをフォローくださいませ。
※ Q. Does “legacy” mean that you are going to remove Save for Web in the future? A. Perhaps. But rest assured that we will not remove Save for Web without providing those capabilities in a new and improved workflow.


     最新記事の一覧へ 
公開 / 更新
鹿野 壮

鹿野 壮

ICS所属のインタラクションデザイナー。九州大学芸術工学部音響設計学科でインタラクティブコンテンツを学ぶ。AIR・Swiftを使ったアプリ開発とHTML5・CSS3・JavaScriptを使ったリッチなWebページ制作が得意。豚骨ラーメンが大好きです。QiitaTwitterでも情報発信中!