Q&A
回答ありがとうございます。
仰る通り、レイアウトは論理ピクセル、最終的な画面への描画は物理ピクセルと難しく考える必要はありませんが、なぜサイズが異なる画像が同じ大きさで表示されるのか知りたいです。
実際に制作する上で困ることはありませんが、どのようになっているのか興味があります。
細かいところなので、ブラウザのコードを読むしか方法はないのかもしれませんが...
#私の理解と解釈
高精細ディスプレイ向けのWebサイトを制作するときに2・3倍の画像を用意して表示すると綺麗に表示されるかと思います。
実際に2種類のサイズ（1倍・2倍）の画像を用意してiPhone（高精細ディスプレイ）で表示すると、同じ大きさで表示され、2倍の画像の方が綺麗に表示されます。
なぜ2倍の画像の方が綺麗に表示さるのでしょうか？
また、なぜ同じ大きさで表示されるのでしょうか？
今回、質問するにあたり、ピクセルやviewportなどに関して調べました。
先に私がどのように理解しているのか述べた後に質問致します。
####デバイスピクセルとCSSピクセル
Retinaディスプレイなどの高精細ディスプレイが登場するまでは、ドットバイドットの環境でした。
デバイス（物理）ピクセルとCSS（論理）ピクセルが1対1の関係です。
しかし、高精細ディスプレイでは今までのデバイスピクセルの数が2倍以上になり、デバイスピクセルとCSSピクセルは1対1の関係ではなくなりました。
このようなドットバイドットの環境ではない場合、制作するときにデバイスピクセルを意識することはほぼありません。
なぜならCSSピクセルを基準にするからです。
####Visual Viewport と Layout Viewport
表示に関してですが、Visual Viewport と Layout Viewport の2つあります。
これらは、デバイスピクセルではなくCSSピクセルで測定されます。
Visual Viewport とは現在表示されている部分のことです。
Layout Viewport とはページ全体のことです。
Layout Viewport のサイズは、ブラウザによって異なり、iPhone safari の場合は 980px です。
<meta name="viewport" content="width=device-width">と指定した場合、Layout Viewport のサイズに影響を与えます。
例えば、iPhone6/6s/7 の場合は、デバイスピクセル（750 * 1334）の半分の 375 * 667 が指定されます。
Layout Viewport の横幅は 375 になります。
※質問とは関係なく、ただの私感ですが device-width だとデイバイスピクセルを連想する気がするから別の名前の方がよい気がしなくもない...
####ブラウザのレンダリング
ブラウザのレンダリングについては、ちゃんと理解できていません(´･ω･`)
大まか流れはわかります。
下記の通りです。
DOM → CSSOM → Render Tree → Layout → Paint
サイズに関しては Layout の段階で計算されます。
metaタグのviewportを指定した場合、Layout の計算に影響を与えます。
参考サイト：Understanding the Critical Rendering Path
####ドットバイドットの世界とは、もはや別世界
ドットバイドットの世界と、device-widthを指定した世界はもはや別世界で、私たちが1pxと指定したものはデバイスピクセル上では2pxで指定される世界です。
下記の通りです。
私の理解については上記の通りです。
もし誤りがあれば、ご指摘ください((_ _ (´ω｀ )ﾍﾟｺ
#質問
実際に下記のHTMLファイルを用意してiPhone6で表示しました。
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>iPhone - test</title> </head> <body> <p><img src="w300px.jpg" width="300" height="195"></p> <p><img src="w600px.jpg" width="300" height="195"></p> </body> </html>
iPhone6で表示したものをキャプチャしたものです。
※見やすように画像は加工しています。左が300pxの画像で、右が600pxの画像です。
上記の画像は加工しているためわかりませんが、両方の画像は同じ大きさで表示され、600pxの画像の方が綺麗に表示されます。
疑問点とはしては2つございます。
####なぜ2倍のサイズの画像（600px）方が綺麗に表示さるのか？
なぜ2倍の方が綺麗なのか、私の推測では、まずコードのpx値はCSSピクセルです。
300 と指定しても、デバイスピクセルでは 600 で表示されます。
そのため、600pxの画像の方が綺麗に表示されるのではないかというのが私の推測です。
私の推測に誤りはありますか？
####なぜ2種類の違う画像サイズが同じ大きさで表示されるのか？
なぜ同じ大きさなのか？については見当がつきません。
ブラウザ側（もしくはデバイス側？）では、それぞれ大きさが異なる画像をどのようにレンダリング（処理）しているのでしょうか？
どこかで同じ大きさで表示するように処理しているのかと思いますが、どのタイミングでどのように処理することで、同じ大きさになっているのか大体で結構ですので知りたいです。
ここからは私のモヤモヤしたところといいますか、理解できていないところなので、うまく言語化できていないかもしれません。
この前提に誤りあるかもしれませんが、仮に300pxの画像は2倍にして600物理ピクセルで表示しているということであれば、汚く表示されるのは納得できます。
拡大すれば汚くなるからです。
その前提を600pxの画像に当てはめるとどうなるか。2倍にすると1200物理ピクセルで表示されることになりますが、実際には上記と同じ大きさ表示されていますので、600物理ピクセルで表示されています。
レンダリングする流れの中で、実際は1200で一度計算したあとに、600物理ピクセルに変換して表示しているのかな？と実際の画像のサイズ、HTMLでの指定サイズ、実際に画面表示されるサイズのここらへんについて全然理解できていません。
私がCSSピクセルをどのようにデバイスピクセルに変換して表示しているのかを理解していないこと、画像をどのようにレンダリングしているかの知識が乏しいことが原因かと思います。
ググりましたが、そこに言及している記事が見つけられません(´･ω･`)
直接的な回答じゃなくても、参考になるサイトでも結構ですので、教えていただけると嬉しいです。
ご存じの方いれば、ご教示ください((_ _ (´ω｀ )ﾍﾟｺ
回答2件
0
ベストアンサー
同じ大きさで表示されるのはおなじおおきさで表示される仕組みですが、HTMLでそのようにコーディングしているからです。
単純に
html
1<img src="300.jpg"> 2<img src="600.jpg">
と書いた場合、これはもちろん300.jpgは300のサイズで描画され、600.jpgは600のサイズで描画されます。
html
1<img width="300" height="300" src="300.jpg"> 2<img width="300" height="300" src="600.jpg">
こうすることで、同じサイズで描画されるというのがわかりますが、もちろんこれだと2つの画像がそれぞれ表示されてしまいますので、srcset属性を使って一つの<img>にまとめます。
html
1<img width="300" height="300" src="300.jpg" srcset="300.jpg 1x, 600.jpg 2x">
これで、devicePixelRatio(以下DPR)が1の場合は300.jpgをDPRが2の場合は600.jpgを同じ300x300のサイズで表示されます。この1x とか 2xという指定方法はDPRにほぼ直接基づいていますので少々問題となる場合があります。ですので、wという単位を用います。wという単位はCSSでのピクセルではなくデバイスのピクセルで設定しますので、DPRに依存せずに画面サイズによって画像を選択し表示させることができます。
html
1<img width="300" height="300" src="300.jpg" srcset="300.jpg 600w, 600.jpg 800w">
投稿2017/02/06 02:14
編集2017/02/06 02:18
総合スコア4267
0
（私見ですが）難しく考えることはなく、画像というかたぶんすべてにおいて、レイアウトは論理ピクセルが使用され、レンダリングは物理ピクセルベースで行っているからだと思うのですが。
投稿2017/02/05 13:24
編集2017/02/05 13:26総合スコア4267
それは、単純に内部で
<img width="レイアウト上の幅" height="レイアウト上の高さ" src="300x300.jpg">
<img width="レイアウト上の幅" height="レイアウト上の高さ" src="600x600.jpg">
と同等のことをやってるのだと思うのですが。
あと、このレイアウト上の幅や高さに関しては、window.devicePixelRatioから算出されると思います。(もしくは逆かもしれませんが)。例えば、Retinaではないディスプレイはほとんどの場合window.devicePixelRatioは1となり、Retinaディスプレイはwindow.devicePixelRatioは2となります。(モバイルデバイスによっては3などもありますが)
同じ大きさでというところはコードを伴いますので回答として返答します。
ご返信ありがとうございますm(__)m
iPhone6/6s/7 の場合と仮定します。
300pxの画像（画像ファイルも300px）は最終的には600物理ピクセルで表示されるかと思います。
このときは画像の1pxを2物理ピクセルに拡大して表示しているのでしょうか？
実際にCSSで1pxの線を指定し、iPhone6で表示した画面をマイクロスコープで撮影したときは2物理ピクセルで表示されていました。
300pxの画像は倍の600物理ピクセルのサイズに拡大されて表示されているのではないかと考えております。
上記の通りだった場合、600pxの画像はどのように表示（処理）しているのかという疑問があります。
同じように倍にすると1200物理ピクセルになりますが、実際にiPhone6は横1200物理ピクセルはありませんし、画像がはみ出して一部だけ表示されるということもありません。
下記のようにwidth="300"と指定しているので、一度倍の1200で計算されるが、レイアウト上の300（600物理ピクセル）に収まるようにサイズが調整されているのでしょうか？
<img src="600px.jpg" width="300">
どのように計算するとこで、同じ大きさ（600物理ピクセル）で表示するのか知りたいです。
理解できていないため、うまく言語化できず意味がわからない文章になっているかもしれません><;
私の文章で意味不明なところがあれば、ご指摘くださいm(__)m
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/02/07 13:49