WEBサイト制作の勉強

WEBサイト制作の勉強の為の解説ブログです。

フェリカテクニカルアカデミー

解像度とピクセルの関係

f:id:yachin29:20160307020120p:plain



ピクセル(英: pixel、px)
ピクセル(英: pixel)、または画素とは、コンピュータで画像を扱うときの単位。640×480ピクセルの画像は、横640個、縦480個の点を並べて表現されていることを示す。ディスプレイなどのデバイスにおいては、ピクセルを単位として画像を表示する。


解像度(ppi
画像はすべて、点が集まって表示されていて、1インチ(2.54cmあたり)あたりにどれだけの密度で点が集まっているかを指す数値を『解像度』といいます。
ちなみに単位となっている「ppi」というのはpixel per inch(ピクセル パー インチ)の略です。
画像を綺麗に出力させる為には用途に応じたppiを選ぶ必要があります。

webの場合  72ppi
印刷物の場合 300~350ppi

 

1pxは何センチ(ミリ)?
ピクセルはセンチやミリのような絶対値では無く、ppiの値によって大きさが変わる相対値です。
なので、
72ppiであれば、2.54cmの中に72個のピクセルがあるわけなので、1pxは0.0342cm(0.342mm)になり、
300ppiであれば、0.0084cmになります。


高解像度ディスプレイへの対応

Retinaディスプレイの特徴は画面解像度の高さにある。iPhone 4の画面サイズは前モデルのiPhone 3GSと同じ3.5インチのままであるが、Retinaディスプレイの搭載によって解像度は320×480ピクセルから640×960ピクセルに、つまり倍になっている。

f:id:yachin29:20160330005936p:plain


640×960ピクセルという解像度は「デバイスピクセル(dpx)」と呼ばれ、3.5インチの画面上で表現されるサイズが「CSSピクセル(csspx)」と呼ばれています。
ディスプレイの高解像度化により、「デバイスピクセル」と「CSSピクセル」という二つの概念を分けて考える必要がでてきました。
サイトを制作する場合には、ビットマップで画像を作る際は「デバイスピクセル」を、CSSで幅・高さを指定する際は「CSSピクセル」を基準に作って行きます


様々なデバイスの解像度

note.mu