高解像度のスマートフォン対応サイト作成について

質問

いろいろ調べたのですが、どうもしっくり理解できないので、
教えてください。

スマートフォンサイトを作成していますが、解像度が高くなった機種
（たとえばiphone4）だと、これまでiphone3Gなどのスマホで
ポートレート表示（320px）で作ってきたものが、
画像が荒れてしまうという現象が起きます。

解像度が上がるということは、実寸（たとえば1インチ×1インチ内）に
ピクセルがいっぱい入ってる、というイメージなのですが、それで正しいですか？

ということは、例えば30px×30pxの写真を載せたとき、高解像度だと
小さく表示されますよね？
この、小さく表示されてしまうのが困るので、大きく表示させると
荒れてしまう、ということなのでしょうか？

小さく表示されてしまうのが困るので、大きく表示させる、というのは
どこで設定するものでしょうか？
width=device-widthではだめなのでしょうか？

高解像度だから、小さい解像度の写真が荒れてしまうのであれば、
高解像度にする意味って、どこにあるのでしょう？
かえって面倒なだけじゃないのでしょうか…？

変な疑問ですみません！
よろしくお願いいたします。

回答No.2

ORUKA1951 · ベストアンサー

画像自体のサイズ、ディスプレイで表示されるサイズ、それぞれの解像度・・・・をきちんと理解しておかないと混乱しますね。
　インターネットで標準的な画像フォーマットはjpeg,GIF,PNGのラスターイメージと、SVGというベクトル画像があります。
　解像度が問題になるのは、ラスター/ビットマップ画像で、これらは画像の座標で示された点の位置ごとに彩度や明度を持っています。当然、座標の数が増えると画像のサイズ自体も大きくなります。
　一方、ディスプレイはWindowsなどでは、96dpiと表現されるように、一インチ当たり96個の点で表示しますが、実際のディスプレイの解像度はそれよりも高いです。言い換えれば、いったん96dpiで計算して各座標の色を決めたのち、ディスプレイの解像度に合わせて拡大します。たとえば一インチ当たり120個あれば、そのスキマを埋めますし、足りなければ間引きます。

　画像の解像度とディスプレイの解像度は別物と考えてください。

　一方の表示サイズですが、これは、ピクセルについては
px: pixel units — 1px is equal to 0.75pt.( http://www.w3.org/TR/CSS2/syndata.html#length-units )
とされていて、CSS2.1では、
「（あまりにも多くの既存のコンテンツは、96dpiの仮定に依存しており、その前提を壊すことは、コンテンツを破るため、この変更が行われました。） 参照画素は、96dpiの画素密度と腕の長さのリーダーからの距離を持つデバイス上の1画素の視覚角度です。 28インチの公称腕の長さについては、視野角は従って約0.0213度である。腕の長さで読み取るために、1pxのは、このように約0.26ミリメートル（1/96インチ）に対応しています。 下の画像は、参照画素のサイズに距離を表示するための効果を示しています：71センチ（28インチ）0.26ミリメートルの参照画素の結果の読み取り距離を、で3.5メートル（12フィート）の結果の読み取り距離ながら、 1.3ミリメートルの参照画素。 」
　詳しい説明が、
4.3.2 Lengths ( http://www.w3.org/TR/CSS2/syndata.html#length-units )
　の下の方に図入りで説明されています。

　これが最もよくわかるのは、出力デバイスをプリンターにしたときです。たとえばHTMLで
<img src="[1080px×720pxの画像]" width=""360" height="240">
<img src="360px×240pxの画像" width=""360" height="240">
として、表示させると、画面には0.26mm×360=93.6mm程度に表示されるはずです。印刷したときにも、ほぼこのサイズで印刷されますが、画像に360px×240pxを指定したほうは、随分と荒く印刷されるはずです。なぜなら、プリンターの解像度は通常200dpi以上あるからです。

　解像度が高いほうが、同じサイズに表示される画像であっても、元画像の画素数が多いときれいに表示されるはずですが、これにはブラウザの計算処理も関わってくるので一概には言えません。

　なお、SVGで描かれた画像はいくら解像度を上げても凸凹にはなりません。

お礼

お礼が遅くなり、すみませんでした！
多くの説明を書いていただき、ほんとうにありがとうございます。

>言い換えれば、いったん96dpiで計算して各座標の色を決めたのち、
>ディスプレイの解像度に合わせて拡大します。
>たとえば一インチ当たり120個あれば、そのスキマを埋めますし、足りなければ間引きます。

ずいぶん昔に習った気がしてきました。
当時よく理解してなかったような気も…(~_~;)

大変よくわかりました。ありがとうございました！

回答No.1

dscripty

> 解像度が上がるということは、実寸（たとえば1インチ×1インチ内）に
> ピクセルがいっぱい入ってる、というイメージなのですが、それで正しいですか？

Yes。

> ということは、例えば30px×30pxの写真を載せたとき、高解像度だと
> 小さく表示されますよね？

Yes。

> この、小さく表示されてしまうのが困るので、大きく表示させると
> 荒れてしまう、ということなのでしょうか？

Yes。

> 小さく表示されてしまうのが困るので、大きく表示させる、というのは
> どこで設定するものでしょうか？

原画を大きくして、<img width="…" height="…" ……/> で指定する width と height を原画の数分の一にして、小さく表示させてバランスをとる。
または、
原画の解像度を上げて使う。通常は 72dpi から 96dip あたりで保存していると思うけど、この数倍にする。

かな？(未確認なので)

> width=device-widthではだめなのでしょうか？

だめ、高解像度だと、文字が小さすぎて目がつらい。
PC サイトを見せるためなら丁度いい。
ユーザがダブルタップかピンチアウトでスケールを変えて見るはずだから。

> 高解像度だから、小さい解像度の写真が荒れてしまうのであれば、
> 高解像度にする意味って、どこにあるのでしょう？

高解像度の写真がそのままきれいに表示される。
同じ大きさ(例えば 3mm)の文字もより多くのピクセルで描画されるから鮮明。
ベクター画像などの図形やグラデーションもより滑らか。

ユーザにとって、とにかくいいことずくし。

> かえって面倒なだけじゃないのでしょうか…？

そこは作成者のがんばりどころ！

お礼

お礼が遅くなり、すみません！

>原画を大きくして、<img width="…" height="…" ……/> で指定する >width と height を原画の数分の一にして、小さく表示させてバランスをとる。
>または、
>原画の解像度を上げて使う。通常は 72dpi から 96dip あたりで保存している>と思うけど、この数倍にする。

この説明で、イメージがつきました。
画像解像度、密度、ディスプレイ解像度の違い、ですね。
ありがとうございます！！