Retina対応は2倍の画像…じゃあ、Androidは？物理ピクセルと論理ピクセルについて
物理ピクセル表示と論理ピクセル表示について、説明できますか？
高精細ディスプレイの普及によって、表示サイズと実際のファイルサイズが違うようになってきました。
Apple の高精細ディスプレイ「 Retina ディスプレイ」を筆頭に、高精細ディスプレイの普及は進んでいます。
高精細ディスプレイの普及は、ますます進むことでしょう。それにより、物理的な表示と論理的な表示についての認識が必要になります。
日本では Apple 製品の普及率が高く、iPhone ユーザーが多いため「とりあえず画像は2倍」で通用するのも事実です。
グローバルサイトを制作する際にその国のデバイス普及率により対応デバイスを決めることが多いため、グローバルサイト制作のニーズも少しづつ上がっている近年では Android の単位「 dp 」についてなどの知識についても知っていて損はありません。
画面上の 1px と、CSS の 1px は違う
画面上の 1px は物理ピクセル、ハードウェア・ピクセル、デバイス・ピクセル ( dpx ) 、物理解像度と呼ばれます。
CSS で表現される 1px については、論理ピクセル、CSS ピクセル ( csspx ) 、論理解像度と呼ばれます。
今回は、この 2 つを「物理ピクセル」と「論理ピクセル」と呼び説明していきます。
物理ピクセルと論理ピクセル
物理ピクセルは、単純に画像データのオリジナルサイズのピクセルです。
論理ピクセルは、画面解像度によって左右されます。
どういうことかというと、論理ピクセルは端末それぞれの解像度に基づいて表示されたピクセルのことを意味しています。
端末の本来表示可能な解像度を基準に、端末が自動でスケーリングを行います。その結果、表示されているのが論理ピクセルです。
px という単位を構成しているのは、dpi や ppi と呼ばれる更に小さな単位です。
これは、ピクセル密度として説明されます。
dpi と ppi
dpi は DTP のときに使用する印刷を基準とした単位、ppi は Web で使用することを基準とした単位です。厳密には違いますが、考え方は自体は大体同じと思ってください。
補足すると、dpi は DTP での必要知識です。説明すると長くなるので、これは PPI と DPI は何が違うのでしょう？を参照してください。
1px を構成する粒度については、ピクセル比 ( Device Pixel Ratio ) として定義され、基本のピクセル比は 1:1 をベースに計算されています。つまり 1 : 1 は、1px = 1ppi として計算されます。
ピクセル比が 2:1 になったとき、物理ピクセルは「 2 × 2 」のマスになるよう分割されます。
ピクセル比が 3:1 なら「 3 × 3 」のマスに変わると考えてください。ピクセル比は基本的にこの考え方です。
例えば、1px を 4:1 で表示する場合はこのようになります。
赤色の範囲が論理ピクセルで、青くなっているところが本来の 1px です。
黄色の範囲は、4:1 の表示になったときの物理ピクセルの範囲です。
▲ 1px が 4:1 のピクセルの場合
1px が 2:1 ピクセル比のとき
物理ピクセル： 1/4px ( 0.25px ) = 1ppi
論理ピクセル： 1px1px が 3:1 ピクセル比のとき
物理ピクセル： 1/9px ( 0.1111…px ) = 1ppi
論理ピクセル： 1px1px が 4:1 ピクセル比のとき
物理ピクセル： 1/16px ( 0.625px ) = 1ppi
論理ピクセル： 1px
ピクセル密度とピクセル比は違う
ピクセル密度を表すには、1 インチを基準にした ppi 表記も使われています。
この表記の多様化により、より一層理解しづらくなっています。
Web にも解像度はありますが概念が違います。先に結論を告げると、ppi は Web には関係ありませんが、DTP に慣れている方であれば、時々会話に出る事もあるので説明しています。
インチの説明を少しだけします。
印刷に使用する、「インチ」という単位はアメリカの単位です。
印刷物で 1 インチを表現している、1 インチよりも小さい単位の dpi で換算すると、300dpi から 400dpi が主に使われています。
大判や微細な色の違いを表現する必要のある印刷物以外では 350dpi を使用していることが多いです。
dpi の数はどのように決まっているのか
印刷で使われる、350dpi という数字はどこからくるのか？
印刷機の出力機械が 350dpi 前後の出力にしか対応していないから、350dpi 以上を「データ上で表現しても出力できない」ため、「 350dpi でいいよね！」という機械の機能上の都合で決まっています。
400dpi の出力が可能であれば、400dpi 必要になります。出力する機械によって適切な数値を決めています。
Web で置き換えた場合、出力される機械はディスプレイです。
しかし、従来の 72ppi や 96ppi に加え高精細ディスプレイが普及されてきたことで「 Window は 96ppiで、 Mac が 72ppi 」のような決まりきった数値はなくなりました。
同じサイズの画面でも、インチ数が違うディスプレイがたくさん出てきました。これにより、ひとえに ppi の数を定義することが難しくなりました。
Web 上での制作はディスプレイ普及の傾向から、現在は ppi をベースに考えるとどうしても複雑になります。
正確に説明すると関係がないわけではありませんが、Web で ppi を考え得たとき以前のような定数化ができないため、物理ピクセルと論理ピクセルで考えるほうがわかりやすいのではないかと感じています。
その他
余談なので読み流しても大丈夫です。こんなのもあるよというご紹介です。
dppx
CSS3 では、dppx というピクセル比に似た単位があります。
CSS3 の image-resolution で定義されている画像解像度の基準は 96ppi とされていますが、考え方はピクセル比の対比に近いです。
ディスプレイの ppi の基準が定まっていた頃は Window が 96ppi で、Mac が 72ppi とされていました。仕様とされている 1dppx = 96ppi は、高精細ディスプレイ普及前の標準規格で想定された仕様なのだと考えられます。高精細ディスプレイの普及が広がっているこの数年は、更新もされてないので仕様に関しての懸念点もあり積極的には使わない技術です。
挙動についての情報もあまりなかったので未確認ですが、webkit系のブラウザサポートが追いついておらずwebkitの独自開発のプロパティ min-device-pixel-ratio と min-resolution の併用により論理上は実装可能です。
例：ピクセル比が、1:2 以上になったら 2 倍の px 数の画像に差し替える条件分岐
@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 2dppx) {
.class {
background-image: url(image2x.png);
}
}
Android の独自ピクセル「 dp 」
Android アプリ開発に使用される単位で、「 dp 」「 dip 」が使用されています。
Android が多種多様なデバイスに対応できるように、最終的に Android が表示サイズを調整してくれます。
これは、従来の密度の依存しないため「密度非依存ピクセル ( density-independent pixels ) 」と呼ばれます。単位は、
density-independent pixels の略ですね。
▲ 通常の表示
▲ Android のランク分けにより調整された結果の表示
Android では、画面解像度ごとに 6 つのランクが定義されており、本来は基準のランクからランクごとの倍率を考慮する必要がありますが dp では、論理ピクセルのような働きをしますが論理ピクセルとは違います。
これは、Android ネイティブアプリの制作で使用することになりますが、Web 制作ではそうそう使うことはないかもしれません。
参考
ピクセル比の調べ方
ピクセル比は調べ方が、少し厄介です。
画面サイズから計算する方法だけでは違いがあることもあり、画面サイズは同じでデバイス比が違うこともあります。
JavaScript で取得することが可能ですが、 window.devicePixelRatio はブラウザごとの挙動の違いなどもあり、正確な値を返してくれるとは限らないようです。
ブラウザの対応状況はこちらを参照してください。
その他 参考リンク
ディスプレイのシェア率に関しては、2017年版｜スマホ画面解像度シェア&HP制作に最適なサイズとは？がまとめてくれています。
日本で日本でシェア率の高いAppleデバイスは、図解しているサイトやiPhone/iPad/Apple Watch解像度(画面サイズ)早見表も参考にしてください。
現在見ているデバイスのdpi/dppxを割り出すツールもあります。
まとめ
記事を書くときはキーワード選定をしてから書きますが、今回の記事で説明したワード「物理ピクセル」や「論理ピクセル」は検索件数も少なく、認知度が高くない言葉も定まっていない印象を受けました。
現場では「 CSS で拡大するから…」「 Retina だから」といった会話になりがちで、実際は現場で働いていても「物理ピクセル」「論理ピクセル」という言葉で聞くことはありません。
1px が従来通りの 1px として表示させるのではないなら、物理ピクセルと論理ピクセルのどちらについて話しているのかの認識を合わせてコミュニケーションを取るように気をつけてください。
1px についての定義が行き違って、デザイナーが作ったデザインカンプをエンジニアがコーディングする際にコミュニケーションロスが起きることがあります。
デザイナーが作った環境では等倍の表示で制作されているかもしれませんが、実装者側では高精細ディスプレイを使用していることも起こりえるため、デザインソフト上でも 1px の認識が違ってることもあります。
データのやり取りをする場合、実装する側が目で合わせるのかデザイナーの指定した数値を守るのかなどについてもお互いに確認しておくといいでしょう。