Webにおいてはピクセルが絶対です。
紙のデザインをやっている人にとっては画像の解像度というのは気をつけるものですが、Webにおける解像度というのはちょっと複雑です。
解像度とは？
解像度とは単位あたりの画素の数、つまり密度を表します。単位にはよくインチを使うので、平たく言えば、1インチあたりどれくらい点々があるか、ということになります。これがたくさんあるほど高解像度になるというわけです。
dpiとppi
解像度を示す単位にdpi (dot per inch) があります。1インチあたり何ドットで表わすか、を示しますが、このドットというのは多くの場合、印刷のインクの点になります。印刷はCMYKの細かい点々の集合により作られますので、点々が多いほど、つまり高解像度なほど高精細に印刷されます。また、高解像度なほど、1つの点の大きさは小さくなります100dpiは1インチあたり100ドットですから、1ドットは0.01インチのサイズになります。
100dpiの画像と300dpiの画像を同じサイズで印刷した場合、300dpiの方がより滑らかに細かい所まできちんと印刷されます。ただ、印刷機にも限界がありますので、例えば印刷機の限界が600dpiだとします。印刷機は600dpi以上の細かいドットを出力することができないので、1000dpiで設定しても600dpiと変わりません。
似たようなのにppiという単位があります。これはpixel per inchの略で1インチあたり何ピクセルか、という単位です。考え方は同じですが、コンピュータはピクセル単位で画像を扱うのでppiという単位になります。少し注意したいのが、デジタルな画像の場合1ピクセル以下の情報は持っていないということです。
必ずしもdpi = ppiではない
dpiもppiも似たような感じですが必ずしも等しいわけではありません。印刷の場合は、72ppiの画像を300dpiで印刷することも可能ですし、300ppiの画像を72dpiで印刷することも可能です。では、この場合どのように違うのでしょうか。
前者の場合は1インチ72個の四角を300個のインクの粒で印刷することになります。300dpiで印刷したからと言って、300ppiの画像になるわけではありません。先述した通り1ピクセルの四角はそれ以上細かい情報は持ちあわせていません。つまり1ピクセルの四角を細かい点々できれいに印刷するということです。
後者の場合、1インチあたり300ピクセルの情報量があっても、印刷機の性能が72ドットしかないので、印刷の時点で情報が落ちます。72ドット分の情報しか再現されないということです。
より厳密にはスクリーン線数などの指標も印刷の高精細さに関わってきますが、大まかな考えとしてはこんなところです。
ディスプレイにおける「dpi」
上では印刷の場合の話でしたが、ディスプレイにおいては少しまた話が変わってきます。ここが混乱の元かもしれません。ディスプレイもまた細かい発光する点によって表示しています。その発行する1点を1ドットとすると、ディスプレイにおけるdpiを考えることができます。
例えば、15インチ、フルHD（1920×1080）のディスプレイがあるとします。注意したいのが、ディスプレイの「インチ」はディスプレイの横の長さではなく、対角線の長さで測るので、そのまま使えません。対角線で15インチ、縦横比は1920×1080なので16：9なのでそれをピタゴラスの定理を使って解くと横幅は約13インチです。そこで、1920÷13を計算すると約147dpiが求まります。これをディスプレイの解像度として用いています。
また、ディスプレイの1ドットが１ピクセル分発光できるので、ディスプレイにおいてはdpi = ppi という図式が成り立ちます*。
*後述の高精細ディスプレイの場合を除く
解像度よりもピクセル数
Webの画像においてはppiやdpiは大した意味を持ちません。必要なのは横と縦が何ピクセルの大きさなのか、ということです。
Webではコンピュータに対して横○px、縦○pxの画像を表示してください、という指示になります。密度であるppiはここでは関係ないのです。
なので、横幅600pxで表示してください、という指示に対して横幅1000pxの画像も100pxの画像も同じ600pxで表示されます。前者の場合、600pxの枠にはオーバースペック*ですし、後者の場合は6倍に引き延ばされ、モザイク状の低解像度な画像で表示されます。
*後述の高精細ディスプレイの場(ry
Webの標準は72ppi？
Webの解像度は72ppi、というのを目にしたり耳にしたりすることもあります(自分も以前はそうだと思っていました)が、あくまで目安にしかなりません。
そもそも72ppiというのは歴史的経緯によるものでAppleのディスプレイの解像度が72dpi (=72ppi)だったからです。ちなみにWindowsは96dpiの設計でした。
もちろん、先の通り最近のディスプレイ解像度は必ずしも72dpiではありません。ノートパソコンも100dpiくらいはありますが、32型フルHDのテレビだと69dpiくらいになります。それでもAdobe PhotoshopやIllustratorは(実際のディスプレイのdpiや表示サイズに関わらず)72ppiをディスプレイの解像度の基準として扱っているようです。
つまりどういうことかと言うと、配置した写真などの画像を変形させるとppiが変わります。これはピクセル数が同じならば、大きさが小さい方がピクセル密度は高くなります。逆に拡大した場合はppiが小さくなります。この時72ppiというのが、画像の持っているピクセル数と表示されるピクセル数が一致する、ということです。
より具体的には、横幅600pxの画像を600pxで配置している時ソフト上の解像度は72ppiと表示される、というわけです。同じ画像を300pxで配置したならば144ppi、1200pxで配置したならば36ppiになります。
ここで問題なのが、ソフトの表示が72ppi未満になった時です。上記の例で言うと情報量が600px分しかないのに1200pxで表示しようとすると2ドットで1ピクセル分を表示するので画像が粗くなります。
大事なのはピクセル数
なので、Webにおいて大事なのはppiよりもピクセル数です。少なくとも、表示サイズ以上のピクセル数が必要になります。3000×4000px@300ppiも3000×4000px@72ppiもどちらも変わりありません。
またdpiがディスプレイにより違うので横幅600pxの画像が表示されるディスプレイ上での実際の長さも違います。
高精細ディスプレイになると、少し話が違う
ここまでは一般的なディスプレイを前提としていました。しかしRetinaディスプレイを始めとした高精細なディスプレイになると話は少し変わってきます。
先ほど、ディスプレイのdpi = ppiという式がありましたがこれが違います。例えば、iPhone7のディスプレイは横750pxでdpiは326にもなります。仮に1px = 1dpi だとするとフォントサイズ16pxの文字は実寸で約1.2mm程度になり、小さすぎて読めません。
デバイスピクセルと論理ピクセル
そこで高精細ディスプレイでは1pxを2ドット×2ドットで表示しています。1px = 2dpi ということです。文字などのベクターデータ(数式によって表現する図形。ピクセルで表現しない)などは、通常の倍の解像度で表示するので線が非常に滑らかで綺麗に表示されます。これが高精細たる所以です。
iPhone7は横750pxですが、実際の表示サイズは半分の375px分の横幅です。どちらもピクセルですが、違いを明確にするために前者を「デバイスピクセル」と呼び、後者は「論理ピクセル」(WebにおいてはCSSピクセルとも)と呼び区別します。
では、ピクセルの集まりである画像はどうなるのでしょうか。もちろん、先述の通り、300pxの画像を300pxで表示させることには理論上問題はありません。ただ、ここでの表示300pxは論理ピクセル上の話で、iPhone7のような倍の解像度を持つ場合は600px分の表示能力があります。そのため、300pxの画像を300pxで表示しようとすると、解像度が足りてないような状態になります。(ただし、通常ディスプレイの時ほど粗くは見えません。)
倍の大きさでデザイン
画像は倍の大きさが必要になるため、デザインする時も倍の大きさでデザインこともあります。この時も大事なのはピクセル数がきちんと足りているか注意しましょう。
余談にはなりますが、倍で作る際、奇数サイズで作ると実際の表示サイズにしようとした時に小数が発生してしまいます。すると論理ピクセルと微妙なずれが生じるので偶数で作った方が無難です。
まとめ
Webにおける解像度を理解すれば適切な画像サイズを作ることできます。無駄に高画質だと読み込みの遅延に繋がりますし、変に低解像度だと汚く見えます。
快適なWebサイトのためにも、適切な画像を作りましょう。
参考