みなさんはAdobe Photoshopでどのように画像を書き出してますか？ 最新のPhotoshopではさまざまな画像書き出し機能が搭載されていますが、どれを選択するかで手間や画像の品質が異なります。 本記事ではPhotoshop CCの最新の画像書き出し機能を紹介し、最適な画像書き出し方法を検証します。
この記事のポイント
- 「Web用に書き出し（従来）」はJPEGの容量が大きくなるので、新しい画像保存方式を使うべき
- 新しい画像保存方式は手間が少ないので作業効率も良い
- ただし、アニメGIF保存やスライス書き出しは「Web用に書き出し（従来）」を使わなければできません
Photoshopの画像書き出し方法一覧
Photoshop CC 2015において、画像を書き出す方法は分けて6種類あります。
新画像書き出し
Photoshop CC 2015から実装された、新しい画像書き出し方法。[ファイル]→[書き出し]→[書き出し形式]より実行できます。
画質の設定や最適化が行えるのは従来と同じですが、設定項目が少なくなっています。従来ではできなかった、レイヤーごとの画像書き出しやSVGの書き出しにも対応。
クイック書き出し
あらかじめ保存しておいた設定を使って、新画像書き出し機能を実行します。前述の新画像書き出しと違って書き出すまでに表示されるダイアログが少ないため、素早く画像を書き出すことができます。
[ファイル]→[書き出し]→[〜として書き出し]より実行できます。設定は[環境設定]→[書き出し]より行えます。
画像アセットの抽出
レイヤーに更新がある度に、自動で画像が書き出される機能。[ファイル]→[生成]→[画像アセット]を選択することで有効化できます。レイヤー名に~.png等の名前を指定することで、自動に画像が書き出されるため、もっとも手間がかからない書き出し方法です。
画質の設定、レスポンシブWebデザイン向けの画像サイズ指定など、細かな設定も可能。詳しくは記事「Photoshop CCの『画像アセット』」を参照するとよいでしょう。
Web用に保存（従来）
その名の通り、Photoshop CC 2015以前からのWeb用画像の書き出し方法です。[ファイル]→[書き出し]→[Web用に保存（従来）]で実行できます。
画質の設定や最適化等の設定を詳細に行うことができます。アニメGIF、スライスの書き出しができることが特徴です。
Creative Cloud Extract
クラウド上にアップロードしたPSDファイルから、自動的にレイヤー別の画像やCSSコードを書き出すことができる機能。詳しくは記事「HTML／CSSコーディング時間を激減させる『Creative Cloud Extract』」を参照するとよいでしょう。
保存／別名で保存
フォーマットを指定して保存します。この方法ではウェブ用途以外のファイル形式も選べます。
書き出す手間が少ないのはどれか？
さて、上記で紹介した方法のうち、書き出す手間が少ない方式はどれでしょうか？ 最新のPhotoshop CCの画像書き出しでは、新機能「アートボード」別やレイヤー別に画像を切り出すことが可能です。この機能を使えば、従来のスライス機能による画像書き出しの手間が省けます。
また、「クイック書き出し」や「画像アセット機能」などは書き出しまでのダイアログ表示回数も少なく、素早く画像が得られます。とくに、「画像アセット機能」はレイヤーの更新の度に画像が自動で書き出されるため、書き出す手間が一番少ないと言えるでしょう。
| 書き出し方法 | 全体書き出し | アートボード・ レイヤー別書き出し | 書き出しまでの ダイアログ数 | 画像更新時の 手間 | |
|---|---|---|---|---|---|
| 新 | 新画像書き出し | ○ | ○ | 2 | 多い（再度書き出し） |
| クイック書き出し | ○ | ○ | 1 | 多い（再度書き出し） | |
| 画像アセット機能 （Generator） | ○ | ○ | 0 | 無し（自動） | |
| Creative Cloud Extract | × | ○ | 0 | 多い （クラウドにアップロード後、 ブラウザを更新） | |
| 旧 | Web用に保存 （従来） | ○ | × | 2 | 多い（再度書き出し） |
| 別名で保存 | ○ | × | 2 | 多い（再度保存） |
書き出し方によって画質やファイルサイズに違いは出るのか？
手間が小さければ新方式を選びたいところですが、書き出し方法によって画像の品質に違いは出るのでしょうか？ ウェブ制作でよく使用されるJPEG、PNG形式について、それぞれの書き出し方法別にファイルサイズと画質を比べてみました。
JPEG画像の書き出し方法別の画質・ファイルサイズの違いは？
JPEG画像の書き出しを見てみます。幅960px、高さ640px、解像度72dpiの写真を用いて、書き出し方法別にファイルサイズの違いを調べました。以下の表が調査結果ですが、新しく搭載された書き出し機能が高い圧縮率となっていることがわかります。
| 書き出し方法 | ファイルサイズ | 設定 | |
|---|---|---|---|
| 新 | 新画像書き出し | 356KB | 画質90 |
| クイック書き出し | 356KB | 画質90 | |
| 画像アセット機能 （Generator） | 356KB | レイヤー名に「~.jpg90%」を指定(画質90) | |
| Creative Cloud Extract | 356KB | 画質90 | |
| 旧 | Web用に保存 （従来） | 574KB | 画質90 「最適化」にチェック |
| 別名で保存 | 606KB | 画質11（最高は12） ベースライン（最適化） |
最新の画像書き出し機能では、画質が担保されながらもファイルサイズが従来小さくなっています。この理由はアドビのUST番組「Creative Cloud 道場 ― CC2015特集フォト 04 ぼかしが超リアルに、JPEGが超コンパクトに」に解説がありました。「Web用に保存（従来）」は17年前のPhotoshop 5.5（CSではありません）で実装された古いテクノロジーであり、進化したJPEGエンコードエンジンと共に見なおした成果によるものとのことです。
PNG画像の書き出し方法別の画質やファイルサイズの違いは？
PNG画像の書き出しを見てみます。幅960px、高さ540px、解像度72dpiの背景透過画像を用いて、書き出し方法別にファイルサイズの違いを調べてました。結果は以下の表ですが、新しい画像書き出し方法の方がファイルサイズがわずかに小さくなることがわかります。
| 書き出し方法 | ファイルサイズ | 設定 | |
|---|---|---|---|
| 新 | 新画像書き出し | 147KB | 形式：PNG 透明部分のチェックを入れる |
| クイック書き出し | 147KB | 形式：PNG 透明部分のチェックを入れる | |
| 画像アセット機能 （Generator） | 147KB | レイヤー名に「~.png」を指定 | |
| Creative Cloud Extract | - | （背景透過画像のため、画像全体の書き出しは不可能） | |
| 旧 | Web用に保存 （従来） | 171KB | PNG-24 透明部分のチェックを入れる |
| 別名で保存 | 182KB | 圧縮:最小／低速 |
最後に
Adobe 公式のFAQによると「Web用に保存（従来）」は、将来的には無くなる技術とのこと。Photoshop CCのアートボードやレイヤー書き出しにも対応していないため、手間や品質の面から従来方式の「Web用に保存」を使うメリットは少ないといえます。手間がかからず、品質も担保された新しい画像書き出し機能に移行するのが妥当ではないでしょうか。今回の記事が、画像書き出し作業の効率化へと繋がれば幸いです。