最適な解像度は？

Question

いつもお世話になっています。

現在、photoshopを使って商品画像や商品ページの画像を作っているのですが、
最適な解像度はいくつなのでしょうか。
必要最低限、最適、これだけあればどんなディスプレイでも十分対応可能
の３パターン教えてもらえると助かります。

解像度についての理解としては、数字が小さいと荒く、大きいとデータが重くなると認識しています。

ちなみに先日作ったデータで、300ppiで作ったのですが、
文字が5ptで作るとiPad Retinaディスプレイで見た時に若干荒く感じました。
画像はリサイズせずに縦横とも100%で使っています。
普通のPCディスプレイで見ると気にはならないのですが…。

Answer

ECマスターズの田中です。

商品画像や商品ページ用の画像については、
解像度（密度）より、実際のサイズ（縦◯ピクセル(pixel)、横◯ピクセル）を
念頭に置いてください。

印刷するときの紙など、
決まったサイズ（25.7cm×18.2cm等）に対して出力する時は
サイズに対する密度の高さによって
見た目の粗さが決まりますが、

PCやスマートフォンなどのディスプレイは、
各ディスプレイ毎に
サイズ（4.3インチ、5インチ、17インチ等）、および
縦横のピクセル数（1280x720、1960x1080等）が
固定されているため、
密度はそれぞれのディスプレイの設定に依存し、
画像ファイルの設定で操作することはできません。

Photoshopにおいては、pixel単位で
カンバスの縦横幅を決めることができますので、
既にお作りいただいた画像と比較して
画像のサイズを決定していただけますでしょうか。

なお、iPad Retinaディスプレイで粗く感じたのは、
デバイスピクセル比の違いが原因である可能性があります。

Retinaディスプレイはデバイスピクセル比が２のため、
例えば、Webページ上で横幅320ピクセルで表示されている画像が、
iPad上では横幅640ピクセルで表示されている、
という現象が起こっております。
この場合、画像ファイル自体が横幅640ピクセルであれば
本来の綺麗なサイズで表示されます。

デバイスピクセル比についての解説は下記URLの記事を、
http://www.atmarkit.co.jp/ait/articles/1308/29/news004.html
実際に対策する方法については下記URLの記事をご参照ください。
http://www.atmarkit.co.jp/ait/articles/1309/26/news058.html

Answer

田中様

ありがとうございます。

＞PCやスマートフォンなどのディスプレイは、
＞密度はそれぞれのディスプレイの設定に依存し、
＞画像ファイルの設定で操作することはできません。

つまり、WEBで画像を表示するだけであれば、解像度は関係ないということですね。

＞Photoshopにおいては、pixel単位で
＞カンバスの縦横幅を決めることができますので、
＞既にお作りいただいた画像と比較して
＞画像のサイズを決定していただけますでしょうか。

縦横幅は毎回その画像に合わせて変えていましたので、ここは大丈夫だと思います。

＞Retinaディスプレイはデバイスピクセル比が２のため、
＞例えば、Webページ上で横幅320ピクセルで表示されている画像が、
＞iPad上では横幅640ピクセルで表示されている、
＞という現象が起こっております。
＞この場合、画像ファイル自体が横幅640ピクセルであれば
＞本来の綺麗なサイズで表示されます。

確かに、これが原因だと思われますね。
参考URLを読みました。倍のサイズで作ったら綺麗に表示されるんですね。
ただ楽天のR-Cabinetの仕様上、画像サイズが決まってますよね。
可能な限りは大きく作りたいと思いますが、無理な場合は諦めるしかないですね…。
２つめのURLの対策方法は、ちょっとややこしいですし…。

とりあえず、今後はできるだけ大きく作るということで対応していきたいと思います。
ありがとうございました。