ブログ
勉強して学びを得たときの疑問や改善点などを日々記録しています。
是非ご参考までに覗いてみてください。
-
kimi -
前職はＳＥ。今は講師のお仕事をしています！分かりやすい授業を目指して日々勉強中です。クールに見えるといわれますがしゃべるとボロがでるので、普段は黙ってます(-×-)
画像がぼやけて見える理由かも？！デバイスピクセル比を理解しよう
Webサイトを製作しているとき、パソコンで見ると綺麗に見えていた画像が、スマホだとぼやけて見えてしまう…といった経験はありませんか？
それは、デバイスピクセル比に応じた画像を用意できていないことが原因かもしれません。
授業でも取り上げる内容なのですが、少しわかりにくいといった声がよく上がる部分です。この記事を読んで、デバイスピクセル比について正しく理解して頂ければと思います^^
ピクセルってなに？
「ピクセル(pixel)」とは、画面を構成する最小単位の点のことです。
スマートフォンやパソコンの画面は、何百万もの小さなピクセルでできていて、それぞれのピクセルに色がつくことで画像や文字が表示されています。
1ピクセルの大きさってどれくらい？
「1ピクセルの大きさはどのくらい？」と聞かれたらどう答えますか？
答えは…
一概には言えません！
なぜなら、ピクセルの大きさは、画面サイズや解像度によって決まるからです。
| iPhone3GS (3.5インチ/解像度：320px×480px / 約163ppi) | → | 約0.156mm |
| iPhone6 (4.7インチ/解像度：1334px×750px / 約326ppi) | → | 約0.078mm |
| iPhone14(6.1インチ/解像度：2532px×1170px / 約460ppi) | → | 約0.055mm |
このように、同じ1ピクセルでも、デバイスによってその大きさは異なっており、新しい機種ほど、ピクセルが小さくなっています。
ピクセルが小さいということは、より細かく滑らかな表示ができるということです。
このようなディスプレイは「高精細ディスプレイ」と呼ばれ、Appleでは「Retinaディスプレイ」(Appleの商標)と呼びます。
CSSでpx指定しても見た目が同じなのはなぜ？
ここで、ふと疑問がわきませんか？
デバイスごとにピクセルの大きさが違うのに、CSSでwidth:100px;と書くと、どの画面でも同じような大きさで見えるのはなぜでしょう？
実は、ピクセルには、「デバイスピクセル」と「CSSピクセル」の2種類あります。
この違いを理解すること、そしてデバイスピクセルとCSSピクセルの比率である「デバイスピクセル比」を理解することがこの疑問を解くカギになります。
ピクセルには２種類ある
１．デバイスピクセル（物理ピクセル）
実際のディスプレイ上のピクセル。（解像度=デバイスピクセルの数）
２．CSSピクセル（論理ピクセル）
CSS・HTMLで指定するピクセルのことで、すべてのデバイスで見た目のサイズがそろうように考えられた仮想的なもの。
例）cssのpxはCSSピクセルを指定している
たとえば、CSSで上の例のように書いたとします。
これは、ある画像の幅を100pxにしましょうという意味です。
でも、ここでいうpxは、100デバイスピクセルではなく、100CSSピクセルを指しています。
そのため、高精細ディスプレイでも通常のディスプレイでも、同じような見た目になるのです。
なぜ同じように見えるのか？それは、デバイスピクセル比が関係しています！
より詳しく内部的な処理を理解したい方は、以下も読み進めてみてください^^
デバイスピクセル比ってなに？
さて、ここからは「デバイスピクセル比（Device Pixel Ratio）」について詳しく解説していきます。
デバイスピクセル比(以下、DPR)とは、1CSSピクセルが何個のデバイスピクセルに相当するかを示す値です。
以前のディスプレイは、CSSピクセル≒デバイスピクセルでした。
つまり、CSSピクセルとデバイスピクセルの比が「1:1」なので、DPRは「1」となります。
しかし、iPhone4でRetinaディスプレイが登場すると、デバイスピクセル数が倍となり、DPR1で表示すると文字やボタンが小さく表示されてしまう問題が発生しました。
そのため、デバイスピクセル比に応じて調整して表示する必要がでてきたのです。
デバイスピクセル比の具体的な例
たとえば、前述したiPhone14では、iPhone3GSに比べピクセル数が3倍になっています。
つまり、CSSピクセルとデバイスピクセルの比が「1:3」なので、DPRは「3」となります。
DPR3の場合、1つのCSSピクセルを、縦横それぞれ3つのデバイスピクセルで構成し、1CSSピクセル = 3×3 = 9デバイスピクセルで表示します。
CSSピクセルとデバイスピクセルのイメージ画像
このように、ブラウザがデバイスピクセル比に応じて、1CSSピクセルを複数のデバイスピクセルで描画(スケーリング)しているため、見た目のサイズを揃えながら、高精細でキレイな表示ができるようになっています。
DPRが高いと、なぜ画像がぼやける？
CSSでwidth: 100px;と指定した画像があったとします。
この画像をDPR=3のデバイスで表示すると、実際には300px（＝100×3）分のデバイスピクセルに引き伸ばして表示されることになります。
ところが、もしこの画像の実際のサイズが100×100pxの低解像度の画像だとすると、300×300pxに拡大されて表示されるため、どうしてもぼやけて見えてしまうのです。
解決策は「高解像度画像を用意する」
この問題を防ぐには、表示サイズの2倍〜3倍の解像度をもつ画像を用意するのがポイントです。
たとえば、CSSで100×100pxに表示したい画像であれば、
| DPRが2のデバイス： | 200×200px |
| DPRが3のデバイス： | 300×300px |
といったように、高解像度の画像を用意しておき、srcset属性や@mediaクエリなどを使って、DPRに応じて画像を切り替える必要があるのです。
いかがでしたか？
これを理解しておくと、デバイスを問わず、スマホでもPCでも美しく表示されるWebページやアプリを作るための第一歩になりますよ^^