解像度と画像の粗さの関係について考えてみた【デジタルお絵描き初心者向け】

こんにちは。イラストレーターの甘抹らあです。
画像解像度と画像の粗さについて理解が難しかったので、一度考えを整理してみることにしました。
私と同じように、わけわかんないよーってなってる方のお役に立てたら嬉しいです！

画像解像度（dpi）が低いと、画像が粗くなる？

まず、画像解像度とは何か。

築城厚三『ACAアドビ認定アソシエイト対応　PhotoshopCC試験対策』p.50には、こう書かれています。

　画像の密度を表すもので、単に「解像度」ともいいます。画像を画面に表示したり、印刷したりする場合の、1辺1インチあたりのピクセル数で示します。単位はppi(pixel/inch)ですが、印刷物の場合はdpi(dot/inch)も使われます。

築城厚三『ACAアドビ認定アソシエイト対応　PhotoshopCC試験対策』p.50

一般的に、webで使用するなら72dpi、印刷物なら300dpi以上などと言われているもののことですね。

この数字が大きいほど画質が良くて小さいほど画質が悪いと、多くの方が認識していると思います。私もそうです。

実際、ピクセルの密度を表しているわけですから、ぎゅっと詰まっていればいるほど画像が高精細になるというのは納得できる話な気がします。

ですが、これはあくまでも印刷物として出力する場合の話だそうです。

Web上で使用する場合には、このdpiと画質にはまったく関係がありません。

最初この話を聞いた時にワケが分からなかったので、自分なりに色々調べたり考えたりしてみました。

そこで分かったことについて、まとめていきます。専門家ではないので、あくまでも自分の理解ということでご了承いただけますと幸いです。（一応、PCに詳しい知人にもチェックしてもらいました。ドットとピクセルの違いは無視しています）

まず、各々が使っているディスプレイのピクセル数は、設定によって最初から決まっています。（自分で変更することも可能ですが、そのディスプレイが対応しているピクセル数以上には設定できません）
設定を確認すると、ピクセル数が分かると思います。
私のパソコンだと、こちら「ディスプレイの解像度」という項目です。

3840×2160となっています。

そしてこれ、そう、解像度って書いてあるんですよね。

なぜピクセル数が解像度なのか？　さっきの説明では密度って書いてあったのに！

それは、パソコンなどの画面の場合ディスプレイ全体の大きさがあらかじめ決まっているからだと思います。
その中に何個ピクセルを配置するかによって、必然的にピクセルの密度が決まるということです。

ちなみにこれ、（推奨）と書いてありますが、この値を変更すると何が起きるかというと、ピクセルの密度が変化します。ディスプレイの大きさを変えることはできないので、ピクセルの密度を変えることで全体のピクセル数を変化させるわけですね。

なぜこんなことができるのかというと、ピクセルに絶対的な大きさが無いからです。

画面の大きさを変えずにピクセル数を減らすと、1ピクセル当たりの大きさが大きくなって、ピクセルの密度は下がります（画面解像度が下がる）。

逆に、画面の大きさを変えずにピクセル数を増やすと、1ピクセル当たりの大きさが小さくなって、ピクセルの密度が上がります（画面解像度が上がる）。

すなわち、ディスプレイ上の画像解像度は、ディスプレイごとの設定によって決まっており、そこに表示される画像（イラストや写真）の解像度がいくつであろうが、画像（イラストや写真）の見え方に関係は無いということです。

……こうやって書くと、分かりにくいですね。

具体的に実験してみます。

実例：解像度を変えて見比べてみる

今Photoshopに表示させている画像、320px×320pxで、解像度は350ppiとなっています。

ピクセル数を維持したまま、これの解像度を72ppiに下げてみましょう。

画像を並べてみても、一切変化がありません。

これは、ピクセル数が変化していないためです。

ディスプレイの解像度が一定である以上、このイラストの解像度（ppi）をいくら変化させたところで、ピクセル数が同じなら変化が起きようはずもないのです。
（ディスプレイの１pxと画像の１pxがぴったり対応している状態）

では、ppiを変化させることで何が変わっているのか？

それは実際に印刷した場合の大きさです。

先程の画像を見比べてみると、350dpiの時には2.32cm×2.32cmだったものが、72dpiにすると、11.29cm×11.29cmになっています。

これは、実際に印刷した場合のピクセルの密度が下がっているからです。
全体のピクセル数を変化させずにピクセルの密度を下げるならば、イラストの大きさは拡大されなければなりませんよね。

ディスプレイ上で変化が見られないのは、前述したとおり密度が固定されているせいで、「このイラストの密度を下げてね」と指示を出したところで無理な話だからだと思います。

ちなみに、実際の寸法（2.32cm×2.32cm）を維持したまま解像度を350dpiから72dpiに下げると、画像は著しく粗くなります。

こんな感じです。※写真では2.33cmになっていますが、誤差です。

この場合何が起きているのかというと、ピクセル数自体が減少しています。

なぜなら、実際の寸法を変化させずに解像度（ピクセルの密度）を下げたいならば、ピクセルの数を減らすしかないからです。

このように、実際の寸法を維持して解像度を下げると、ピクセル数が減少します。

逆に実際の寸法を維持して解像度を上げると、ピクセル数が増加します。

したがって、モニター上で見る場合の見え方（粗さ）に影響を与えているのは、あくまでもピクセル数であって、dpiやppiといった画像解像度ではないのです。

ピクセル数が変化すると、なぜ画像が粗くなるのか？

ここで、次の疑問です。ピクセル数が変化すると、なぜ画質が下がるのでしょうか？

たとえ話をしましょう。
ここに、10000個のタイルがあったとします。
タイルは、100個×100個の正方形の形に敷き詰められています。

このタイルの上に、何か素敵なイラストを描きました。

次に、このイラストの大きさを小さくしてみます。
例えばタイルの数を減らして、50個×50個の2500個にしてみましょう。
そのためには、なるべく元のイラストの形を維持したまま、今存在しているタイルの内の7500個（！）を引き抜かなくてはいけません。

すると、当然その部分に描かれていた線や塗りは失われます。
結果、元のイラストとは違うものができあがるというわけです。

この逆もまたしかりです。
仮にタイルの数を150×150の22500個に増やすとしましょう。
今度は、12500個も、空白のタイルが追加されるわけです。
元のイラストが違和感なく繋がるように、この新しいタイルにも手を加えなければなりません。

これと同じことが、ディスプレイ上でも起きています。

もちろん実際には、ただピクセルを引っこ抜いたり増やしたりするだけではなく、画像の見え方が変化しないように細かい調整が行われています。

それでも、元の画像と全く同じものを再現することは困難であるため、画像が粗くなってしまいます。

まとめ

まとめます！

ということは、画像のピクセル数を変化させない限り、画質が下がる心配はなさそうです。
画像自体のピクセル数が同じなのに粗く見えるなら、それはディスプレイの違いによるものだと思われます。あるいは保存形式の違いかもしれませんが、とりあえず今回、そっちは無視します。

また、「何もしてないのにTwitterに投稿したら画質が下がった！」という場合は、Twitterの方でアップロードする際に画像が縮小されて、ピクセル数が変化しているのでしょう。

つまり、画質を劣化させたくない場合には、とにかくピクセル数を維持する必要があります。

逆に言うと、サンプルとして粗い画像のみを提示したい場合には、解像度をいじるのではなく、画像のピクセル数を変化させるべきだということになりそうです。
（上述の通り、実際の寸法を維持したまま解像度を下げれば、必然的にピクセル数も減少しますが）

また、デバイスによって粗さが変化しないようにしたいならば、デバイスに合わせた画像をそれぞれ制作することも考えられますね。
そのあたりまだまだ勉強中なので、今後慣れていきたいなと思っています。

以上、自分なりに調べたり考えたりしたことをまとめてみました。ご参考までにどうぞ。

これからも一緒に頑張っていきましょう！

※お仕事のご依頼はお問い合わせページまでどうぞ。