カテゴリー

キーワード

 
> ピクセルとdpi、ppi、dppxと...

ピクセルとdpi、ppi、dppxと解像度の話


2016 年 1 月 8 日 投稿    view: 55932
このエントリーをはてなブックマークに追加

高解像度

あけましておめでとうございます。

弊社は1月5日より稼働しております。

本年もよろしくお願いいたします。

 

2016年一発目の記事は、解像度の話です。


ピクセルと解像度の話

まずは基本的なところをお話しします。

 

ピクセルとは?

ピクセル(pixel)とは『PICture』と『ELEment』を組み合わせた造語です。(『picture cell』の略とも)

 

ピクセルは画素と訳されます。

単位として表すときは『px』と表記します。

 

ピクセル、解像度、dpi

注意したい点として、ピクセルはそれだけで物理的な大きさを表す単位にはならないということが挙げられます。

 

では、ピクセルの大きさは何で決まるかというと、解像度です。

 

解像度は『 dpi 』(dots per inch)で表されます。

これは1インチ(=2.54cm)の中にどれだけのドットがあるかを示しています。

 

ドットとは『』のことです。これが集まって一つの画像を表現します。

 

ウェブ上では、基本的に1ピクセルを一つのドットで表現するので、たとえば『72dpi』なら、1ピクセルは『約0.0353cm』であると言えます。

(『300dpi』なら『約0.0085cm』です)

 

ですから、dpiの数が多ければ多いほど、より細密な画像であるということができます。

ドットが多いので細かいところまで表現できるからです。

 

といっても、1ピクセルの物理的な大きさはあまり気にされなくても大丈夫です。

あくまで相対的なものなので、dpiの数が大きければ、より細かいところまで表現している画像なんだなと思っておいてください。

 

ppiとは?

dpiとは別に、『 ppi 』(pixel per inch)という単位もあります。

 

1インチ(=2.54cm)の中に、どれだけのピクセルがあるか示したものです。

 

ウェブ上では基本的に1ピクセルを一つのドットで表現するので『dpi』と同じものだと考えてよかったのですが、現在ではこれが成り立たなくなっています。

 

なぜかということを次項で紹介します。

 

印刷物になると、話が変わってきますので要注意です。 印刷物では1つのピクセルを多数のドットで表現するからです。 ですが、今回はあくまでウェブ上の話なので、ここでは詳しく触れません。

 

高精細ディスプレイの登場で状況が変わる

以前は、前項の説明で事足りたのですが、現在、主流となりつつある高精細ディスプレイ(Retinaディスプレイなど)の登場でややこしくなりました。

 

というのも、『1ピクセル=1ドット』が成り立たなくなったからです。

 

具体例

たとえば、iPhone4で初搭載されたRetinaディスプレイは、物理的な液晶画面の横幅が640pxです。 (つまり、横に640個のドットが並んでいるということ)

 

しかし、ブラウザが表示するときに使う解像度の横幅は320pxです。

つまり、『320pxの画像』を『640個のドット』で描くということです。

 

それに加えて、縦と横がありますから、『1ピクセル × 1ピクセル』の画像を『2ドット × 2ドット』の4ドットで描くということになります。

 

1ピクセルを高精細ディスプレイで表示するときの概念図

 

そうすることで、より細密に画像を表示し、ユーザーから見て『綺麗な』画面に仕上げることが可能になりました。

 

対処法

上記、具体例で示した『1ピクセル × 1ピクセル』の画像を『2ドット × 2ドット』で描く高精細ディスプレイの場合、横幅320pxの領域に320pxの画像を表示させると画像が引き伸ばされ、ぼけたようになります。

 

対処法としては、その領域の倍の横幅640pxの画像を用意し、それをCSSで320pxとして表示させます。

 

そうすると、元々640個のピクセルが横に並んでいるので、高精細ディスプレイで640個のドット(320px)で表示させるとちょうど良いということになります。

 

対処法を具体的に示した画像

 

下図をご覧ください。

 

上が320pxの領域に640pxの画像を表示させた場合、下が320pxの領域に320pxの画像を表示させた場合です。

わかりづらいかもしれませんが、下は少しぼやけた印象になっていますね。

 

画像を並べてみる

 

Device Pixel Ratio

ちなみに、1ピクセルの画像を端末上で何ピクセルとして描画するか表した数値(比率)を『Device Pixel Ratio』(デバイスピクセル比)と呼びます。

 

iPhone4~6までは、この『Device Pixel Ratio』が『2:1』でした。

前項までの640pxと320pxの話がこれですね。

 

それがiPhone6 Plusになると『3:1』になっています。

『1px × 1px』の画像を『3ドット × 3ドット』の9ドットで描くわけです。

 

より高精細な画像を見ることができるということですが、その分、制作者は対応を迫られます。

次項で紹介します。

 

dppxの登場

こういった流れを考慮してか、CSS3では、『dppx』という単位が使えるようになりました。

dppxとは「dots per pixel unit」の略で、「1ピクセルを何ドットで描くか」を示すものです。

 

これを利用して、こういうCSSの書き方が可能になります。

メディアクエリを使って、

 

@media (min-resolution: 3dppx) {
   ~高精細ディスプレイ用のスタイルをここに書く~
}

 

これは1pxが3つ以上のドットで描かれる場合、中に書いたスタイルを適用するというCSSです。

 

ここに表示領域の3倍の横幅を持った画像を表示させるというような使い方が考えられますね。

これで十分だと思いましたが、caniuse.comを見に行くと、IEはdppxをサポートしていないことがわかります。(本稿執筆時、2016年1月7日現在)

 

また、古いFirefoxではベンダープレフィックス(-moz)が必要なようです。

 

caiuse.com メディアクエリのresolution

 

ですから、全てのブラウザに対応させるには前項で紹介した「Device Pixel Ratio」を利用して、

 

@media (min-resolution: 3dppx),(-webkit-min-device-pixel-ratio: 3) {
   ~高精細ディスプレイ用のスタイルをここに書く~
}

 

と書いてください。

 

まとめ

高精細ディスプレイの登場により、画像の処理にひと手間加えなくてはいけなくなりました。

 

ユーザーエクスペリエンスを損なわないために、画像がぼやけて見えにくいということにならないよう、しっかり対応しましょう。

 

 

最後までお読みいただき、ありがとうございました。

 

 

 

杉尾成行 顔写真

この記事を書いた人

杉尾成行

株式会社SceneLive Webマーケティング部長

ウェブマーケティングコンサルタントとして、クライアントのウェブ集客をサポートしている。
また、ウェブ制作、システム制作にも携わり、数々のサイトを手掛けている。
当ホームページ、ブログシステムも制作。

前職:ライター、小説家

ウェブマーケティングコンサルタントとしてのブログ
ウェブ参謀

個人ブログ(オリジナル小説他) ⇒ 35deFA

 


カテゴリー

この記事が気に入りましたら、是非、他の方にもシェアしてください。
このエントリーをはてなブックマークに追加
関連記事