ピクセルと解像度を理解しよう（後編：解像度）

解像度とは

現在はデスクトップパソコンやノートパソコンだけなく、スマートフォンやタブレット等もあり、それぞれの機種で大きさも形もまちまちです。（以下の説明では総称してパソコンと表現します）

パソコンのディスプレイでは文字や写真などをピクセル（ドット）を使って表現しています。
ディスプレイで利用されているピクセル数を確認する際には解像度という項目を確認します。解像度とは画素の密度を示す数値のことを指します。

解像度は機種によって異なり、気になる場合はパンフレットや確認画面で確認する必要があります。

例１：iPhone6 1,334 x 750ピクセル（AppleのiPhone6公式サイト）
例２：VAIO Z 2,560×1,440ピクセル（SonyのVAIO公式サイト）
例３：解像度の確認画面（Windowsではデスクトップ上で右クリックし、画面の解像度で確認および設定が可能）

つまり、機種によって解像度（どれだけピクセルを利用しているか）は変化するので、同じ画像を利用していも表示される大きさは異なります。
水平線や画像の大きさをwidth=”100″と設定しても解像度が変わると見た目の大きさは変化します。

解像度と画像

一般的なディスプレイ（デスクトップタイプ）でも 2,000 x 1,000 ぐらいとなっており、ディスプレイ全体のピクセル数は2,000,000（200万）となります。
デジタルカメラで撮影した写真が1,000万画素のものだとディスプレイ全体に収まりきれない程の大きさとなります。
パソコンで表示されている画像はサムネイル（縮小表示）の画像を利用しており、本来の大きさはもっと大きい画像の可能性があります。

Webサイトで画像を利用する際の注意点

Webサイトの表示速度が遅くなるとサイト閲覧者が減る可能性が高くなります。
（5秒以上かかるとかなり可能性が高くなる＝他のWebサイトへ移動してしまう）

画像のピクセル数の多さ（または容量）と表示処理に負担をかける（＝表示が遅くなる）ことは比例しますので、画像のピクセル数は適切なもの^※1にする必要があります。
Webサイトで画像を利用する際には、画像のピクセル数を適切なものに変更する必要があります。画像のピクセル数を変更するには画像編集ソフト^※2を利用するのが一般的です。

※１、imgタグのwidthやheightで小さいピクセル数を指定しても画像本来の容量は変わりません。
※２、有名な画像編集ソフトにはPhotoshopやGIMP等の様々なものがあります。