Photoshopで画像を配置するベストな方法は?4つの配置方法を比較しました

Photoshopで画像を配置するベストな方法は?4つの配置方法を比較しました

2020年10月28日
Webデザイン

Photoshopで画像を配置する方法は色々ありますよね。
よく使われる配置方法は以下の4つではないでしょうか。

  • 埋め込みで配置
  • リンクで配置
  • スマートオブジェクトで配置
  • CCライブラリから配置

皆さんはどの方法で画像を配置していますか?
僕は修正やレスポンシブ用に画像を書き出すことを考慮して、画像をスマートオブジェクト化して配置することが多かったです。

ただ、今回の記事を書くために色々検証した結果、CCライブラリから配置するのがベストだと思いました。

この記事では、それぞれの配置方法の特徴や使用感を解説した後、PSDファイルの容量を比較します。
特徴とファイル容量などを比較して、ぜひベストな画像の配置方法を見つけてください!

画像を埋め込みで配置する

配置方法の1つとして紹介しましたが、僕は画像を埋め込みで配置することはありません。
その理由は、画像の拡大縮小を繰り返すと画像が劣化するからです。

僕の場合、画像を小さく配置したり、思いっきり大きく配置したりと、試行錯誤しながらデザインします。
なので、サイズ変更で画像が劣化してしまう埋め込み配置は全く向いていません。

また、レスポンシブ用に画像を拡大して書き出したい場合など、埋め込み画像だと画質が悪くなります。
レスポンシブWebデザインが主流な今、画像を埋め込みで配置している方は少ない気がします。

画像をリンクで配置する

画像をリンクで配置しておけば、元画像のサイズ以上に拡大しない限り画像が劣化することはありません
修正に強く、レスポンシブWebデザインの書き出しにも対応できます。

ただ元画像の管理が少し大変です。
間違って元画像を削除や移動させてしまうとリンク切れになり、データを修正するのが難しくなります。

僕は元画像を管理するのが下手くそなので、画像をリンクで配置することはあまりありません。

画像をスマートオブジェクト化して配置する

僕が一番使っているのがこの方法です。

画像をスマートオブジェクトにしておけば、サイズ変更やレスポンシブ用の書き出しにも対応できます

しかも、レイヤーをダブルクリックすると元データを編集できるので修正作業も楽チンです。
リンク配置の様に元画像を管理する必要もありません。

ただ、詳しくは後述しますが他の配置方法に比べてファイル容量が大きくなります
正直、そこまでファイル容量が大きくなるとは思っていませんでした。
最近、僕が作るPSDデータの容量が大きいと思っていましたが、スマートオブジェクトが原因だった様です。

ファイル容量を気にしない場合は最強の配置方法だと思いますが、ファイル容量が大きいとPhotoshopの動作も重くなるし、データのやりとりも大変になるので、なるべくファイル容量は抑えたいですよね。

画像をCCライブラリから配置する

今回、4つの画像の配置方法を比較してベストだと思ったのがCCライブラリから配置する方法です。

CCライブラリに画像を登録する手間は掛かりますが、PhotoshopのCCライブラリパネルからドラッグ&ドロップで配置できます。
CCライブラリパネルで登録した画像を一覧できるので管理も楽です。

また、デザインやパーツの作成をIllustratorやXDに引き継ぐ際も、CCライブラリに登録している画像を使用することが出来ます。

修正や画像の管理のしやすさ、Illustratorなどとの連携を踏まえてベストな配置方法だと判断しました。

配置方法によるファイル容量の比較

デザインデータを制作する上で、ファイル容量は小さいに越したことはありません。
各配置方法によってファイル容量がどれくらい違うのか比較しました。

比較方法は以下の2通りです。

  • 1枚の画像を配置した場合
  • 3枚の異なる画像を配置した場合

用意した画像は以下のとおりです。

  • img_1.jpg(296KB)
  • img_2.jpg(359KB)
  • img_3.jpg(374KB)

各配置方法ごとのファイル容量をまとめたのが以下の表になります。

配置方法1枚の画像3枚の異なる画像
埋め込み3.6MB10.6MB
リンク3.6MB10.6MB
スマートオブジェクト7.1MB21.2MB
CCライブラリ3.6MB10.6MB

各配置方法のファイル容量を比較した結果、スマートオブジェクトが最もファイル容量が大きくなり、その他の配置方法はファイル容量が同一になりました。

意外だったのが、埋め込み配置とリンク配置が全く同じファイル容量だったことです。
てっきりリンク配置の方がファイル容量が軽くなると思い込んでいました。

スマートオブジェクトは他の配置方法と比べて、かなりファイル容量が大きくなりますね。
今回の比較では2倍ほどですが、画像のサイズが大きくなったり、枚数が多くなったりするとファイル容量の差はもっと大きくなると思います。

Photoshopで画像を配置するベストな方法のまとめ

埋め込み配置、リンク配置、スマートオブジェクト、CCライブラリを比較してみて、個人的にはCCライブラリから画像を配置する方法がベストだと思いました。

その理由は以下の3点です。

  • 画像のサイズを変更しても劣化しないので修正やレスポンシブ用の画像を書き出す際に便利
  • IllustratorやXDでも同じ画像を使用できる
  • ファイル容量を節約することができる

ファイル容量を気にしないのであれば、スマートオブジェクトも全然アリです。
ベストな画像の配置方法は人によって異なるので、今回の記事が少しでも役に立てば嬉しいです。

以上、Photoshopで画像を配置するベストな方法のご紹介でした。