スマホサイト作成時の解像度について教えて欲しい！

Question

スマホ専用サイトを作成しています。
超初歩的な質問で恐縮ですが、困っています！！

普段は、Retina対応するために
幅640pxの解像度72ppiでデザインデータを作成していたのですが、
他人のデータを覗いた時に、640pxの解像度144ppiでした。

恥ずかしながら、わたしはコーディングまでしていないため
根本的な理解をしてなく「倍の大きさでつくって、画面では2/1スケールで表示してる」
くらいの知識しかありません。

質問1：
すでに、倍の640pxサイズで画像を作成しているのにも関わらず
解像度まで倍の144ppiで作成している意図はなんでしょうか？

質問2：
ピクセル数と解像度の関係がいまいち理解できていません。
640pxの解像度72ppiでデータを作成する場合と、
320pxの解像度144ppiでデータ作成する場合の何が違うか説明できません。
どのように理解すればいいでしょうか？

また、皆様はスマホサイト作成時の解像度はどう作っているでしょうか？

Answer 1

100px × 100px / 1ppi の画像と 100px × 100px / 100ppi の画像を作成してみてください。どちらもブラウザには「100px × 100px の画像」として同じように表示されるはずです。（ファイルサイズもほぼ同じになると思います）

基本的に dpi/ppi は印刷時に考慮する値なので、「画像を144dpiで作って使う」としても縦横倍サイズと同じことになるわけではありません。

640pxの解像度72ppiでデータを作成する場合と、

320pxの解像度144ppiでデータ作成する場合の何が違うか説明できません。

640pxと320pxという、ピクセル情報の量が違うだけです。

---

【【単位超入門】ピクセル、ドット、PPI、DPI、解像度、メートル、インチ、ポイント - Qiita】
http://qiita.com/7968/items/61a1deff80721f412096#第4章-ピクセルとppiについて

スマートフォン（Web）におけるピクセルについては、デバイスのピクセル数を意識することになります。

【いまさら聞けないRetina対応のための「ピクセル」の話 – Rriver】
http://parashuto.com/rriver/development/pixel-related-info-for-coping-with-retina-displays

【高解像度ディスプレイへの対応 - WEBサイト制作の勉強｜フェリカテクニカルアカデミー】
http://yachin29.hatenablog.com/entry/2015/04/24/011441

Answer 2

640pxが倍だと解釈してるのが問題です。
スマートフォンはiPhone7+など、大画面でRetinaの物もあります。
それら全てに対応しようと思ったら、「上記想定機種サイズの倍ピクセル」で作成する或いは
ppiを倍にして高解像度化します。

320pxの144ppiですと640px以上の幅解像度を持つ端末でにじみます。