350dpi?72dpi?画像の解像度について解説します！

こんにちは。すっかり寒くなりましたね🍃
皆さま、具合を崩されないようご自愛ください。

さて、今回は画像の解像度について解説してみます。
弊社はWeb制作会社なので、少しそちら寄りに解説したいと思いますので、
既に知識をお持ちの方も復習がてら読んでいただければ幸いです😊

「画像解像度」についての基礎知識

画像解像度とは、画像の緻密さを数値化したものです。
「DPI」「PPI」という単位で表され、基本的にはこの数値が高いほど画像は綺麗に見える傾向があります。
（目的によって推奨値があります）

簡単にいうと

DPI	1インチの幅に何個のドット（点）が入っているかを表す単位 （印刷用）
PPI	1インチの幅に何個のピクセルが入っているかを表す単位 （デジタル画像やモニター表示用）

という感じです。

DPI？PPI？どういう時に使うの？

DPIは印刷物に使用する単位であるのに対し、PPIはディスプレイやデジタル画像の密度の目安として使われます。

DPI

DPIは、先に解説した通り「1インチの幅に何個のドットが入っているか」を表す単位です。

1インチの中に細かくドットを印刷すると、それだけ精密に見えます。
数値が大きいほど印刷物は綺麗に見えます。（限界値があります）

図に表すとこんな感じです。1インチ（横幅）にいくつドットが入っているかを数値化したものです。

DPIは印刷物に対する単位なので、Web上では直接的には関係ありません。

PPI

PPIは「1インチの横幅にいくつピクセルが入っているか」を表す単位です。
画面上でピクセルが細かく詰まっているほど、画像は滑らかに見えます。

図に表すと、1インチ（横幅）にいくつピクセルが詰まっているかを数値化したものです。

ただし、PCのWeb上ではPPI自体は直接関係しません。
高解像度ディスプレイ（Retinaなど）では目安になりますが、基本的にはピクセル数で描画されるため、Web制作ではあまり意識しなくても大丈夫です。

Webサイト上の画像解像度について

DPIはPCのWeb上では関係ない単位です。
PPIについても、高解像度ディスプレイを除けば、Web表示には影響しません。

Webで「72dpiで画像を作りましょう」と言われることがありますが、これは歴史的に由来しているだけで、350dpiでもWeb上の見た目・バイト数には影響しません。
実際にピクセル数を変えずにDPIだけ変更しても、見た目やバイト数は変わりません。

Web上で画像を表示する場合はピクセル数が重要であり、ピクセル数が多ければ多いほど、Web上で滑らかに見えるということになります👍

高解像度ディスプレイにおけるWebサイトの画像作成

Retinaや高解像度ディスプレイでは、「物理画面のインチ」と「画面の総ピクセル数（解像度）」が密接に関係しています。

「PPIを意識した方が良いの？」という疑問も出ますが、Web制作では ピクセル数だけ意識すれば問題ありません。

よく「Retinaディスプレイ用（スマホ用）の画像は2倍サイズで書き出そう」と言われるのはこのためです。
PPI自体は本来意味がありますが、Web上ではピクセル数を正しく管理することが最も重要です。

高解像度ディスプレイに関連する値としてデバイスピクセル比（DPR）がありますが、今回は割愛します。

まとめ

今回は画像解像度について解説しました。
少しでも知識の肥やしになったら幸いです。

ではまた！👋