解像度についていろいろと調べてみました。
解像度の表し方が分野によって異なることが調べていて分かったので、本記事ではPCやスマートフォンのディスプレイにおける解像度についてだけ取り扱います。
なお、本記事は各用語の大まかな意味を理解することを重視しているため、正確でない表現がある可能性があります。
ただ、説明として明確に誤っている内容がありましたらご教示いただけますと幸いです🙇♂️
ドットとピクセル
解像度の話の前に、その基本となるドットとピクセルについて説明します。
この2つの用語が同じ意味で使われていることが混乱を生んでいると感じたので、これらの意味の違いと、これらが同じ意味で使われている理由を最初に整理しておきます。
ドット
コトバンクによると、ドットは「コンピューターの表示装置や印字装置において、文字や記号を表す構成要素となる点」のことです。
要するに、出力の最小単位ということです。
ピクセル
コトバンクによると、ピクセルは「デジタル画像を構成する最小の要素で、画素とも呼ぶ」のことです。
デジタル画像を構成する最小の要素とは、色情報のことです。
ピクセルを理解する上でポイントとなることは、ピクセルは元々の意味として大きさを持つものではないことだと個人的には思います。
ディスプレイにおけるドットとピクセルの関係
ディスプレイの表面のガラス板をよく見ると、多数の格子があります。この格子1つ1つがドットにあたります。
また、ディスプレイの裏には光源があり、光源とガラス板の間には光の三原色である赤・緑・青のカラーフィルターがあります。このカラーフィルターがピクセルにあたります。
このカラーフィルターは格子1つに対して3色1組で収まるように配列されます。つまり、ディスプレイではドットとピクセルは一対になっています。
このことにより、ディスプレイにおいてはドットとピクセルが同じ意味で使われています。
以降の説明では、ピクセルを使っていきます。
解像度
解像度は分野によって表し方が異なりますが、精細さを表す指標である点は共通しています。
ディスプレイにおける解像度は、画面の中の横方向と縦方向に配列されているピクセル数のことです。他の分野の解像度と区別するために画面解像度と呼ばれることもあります。
ディスプレイのスペック表で「1,920 × 1,080」などの表記を見たことがあるかと思いますが、これは「横方向に1,920ピクセル、縦方向に1,080ピクセルが画面の中に配列されている」という意味です。
ただ、ディスプレイの精細さは解像度だけでは決まらず、ディスプレイサイズも関係してきます。
例えば、ディスプレイサイズが同じで解像度が高くなった場合は精細さは増しますが、解像度が同じでディスプレイサイズが大きくなった場合は精細さは失われます。
高解像度ディスプレイとスケーリング
従来のディスプレイは上記の内容で説明できるのですが、最近のディスプレイは高解像度のものが多いです。
Apple社製品のRetinaディスプレイやマイクロソフト社製のSurface Bookのディスプレイなどが高解像度ディスプレイの代表的な例として挙げられます。
このような高解像度ディスプレイではスケーリングによって精細な表示を実現しています。
スケーリングは文字通り「拡大・縮小」の機能ことです。
物理ピクセルと論理ピクセル
スケーリングの仕組みを理解するために、物理ピクセルと論理ピクセルについて説明します。
物理ピクセルは、ここまで説明してきたディスプレイのピクセルそのもののことです。デバイスピクセルとも呼ばれます。
論理ピクセルは、複数の物理ピクセルを擬似的に1つのピクセルであるとみなしたピクセルのことです。
論理ピクセルは少し分かりづらいと思うので、具体例を挙げて説明します。
16インチモデルのMacbook Proのディスプレイの解像度は3,072 × 1,920です。
一方、システムの環境設定を見ると、以下の5つの解像度(スケーリング解像度や疑似解像度と呼ばれます)が選択できるようになっています。
- 2,048 × 1,280
- 1,792 × 1,120
- 1,536 × 960
- 1,344 × 840
- 1,152 × 720
分かりやすい値として真ん中の1,536 × 960に注目すると、これは先ほどの3,072 × 1,920をそれぞれ2で割った値と等しくなっています。
この解像度を選択すると、OSによってディスプレイの2×2=4物理ピクセルが1論理ピクセルとして扱われるようになります。
これを200%スケーリングと表現したりします。
高解像度ディスプレイにおけるコンテンツの表示
ここまでの説明では低解像度ディスプレイと比較して何が変わるのか分からづらいと思います。
高解像度ディスプレイでスケーリングの効果が表れるのは、文字やコンテンツを表示するときです。
こちらも具体例を挙げて説明します。
以下に128 × 128と256 × 256のロゴ画像があります。ご覧の通り、同じサイズにすると256 × 256の画像の方が精細であることが分かります。
スケーリングによって擬似的に解像度を変更したディスプレイでは、OSやブラウザによってその解像度に適したコンテンツが表示されるようになります。
(Webサイトなどでは、運営者がその解像度に対応したコンテンツを用意していることが前提となりますが)
この画像を表示する場合、例えば先ほどの1,536 × 960のディスプレイでは128 × 128の画像が表示され、3,072 × 1,920(200%スケーリング)のディスプレイでは256 × 256の画像が表示されます。
これによって、コンテンツを精細に表示することを可能にしています。
以上となります。
本記事を読んで、ディスプレイにおける解像度について少しでも理解が深まれば幸いです。
