WEBサイトと画像解像度の関係について
画像の解像度とは画像サイズ1インチあたりのドット数で決まり、dpi（dot per inch）という単位で表します。
WEB上で使う画像は72dpiが通常です。印刷物はフルカラー印刷で350dpi位の解像度を要望されます。
高解像度モニターには画像サイズで対応するのでWEB画像の作成に解像度を考慮する必要はありません。Windowsの場合はjpg出力時に96dpiになる事は知っておきましょう。
画像の投稿や加工はWEBサイトでは必須の作業
WEBサイト制作やブログを投稿する時にデジカメやスマホ等で撮影した写真などをパソコンに取り込む事がよくあります。
取り込んだ画像をWEBで使うために、Photoshopなどの編集ソフトで開いて加工を加える訳です。
適切なサイズにしたり画像の上に説明を付ける等その加工方法は様々ですよね。
画像はドットの集まりで作られている
この表示された画像を大きく拡大していくと、どんどん画像が荒くなります。
そして細かな点がたくさん集まって表示されているのが分かります。
全てのデジタル画像はこの細かなドット（点）の集合体でできているのですね。それが細かく集まって今の画像を構成している訳です。
WEBで画像を取り扱う分には「解像度」はあまり関係ないとされていますが、ある程度の知識は持っておくべきでしょう。
画像解像度とは
画像解像度とは、このドット数が1インチ（2.54cm）あたりにどのくらいの密度で集まっているのかを数値化したものです。
※1インチ（2.54cm）は規定で決まっています
つまりデジタル化された画像を構成する構成度（集合の程度）を指しています。dpiという単位が使われます。
例えば72dpiであれば、1インチあたり72個のドット数、350dpiであれば1インチあたり350個のドット数がある事になります。
上記の緑のマスは実際の1インチではありません、わかりやすいように大きくしています。
同じサイズの画像でもdpiの数値が大きい方が1点1点の構成量が多いので、より細かいデータである事がわかります。
解像度を表す単位「dpi・ppi」
解像度を表す単位dpiは「dot per inch（1インチあたりのドット数）」の略です。
また「dpi」と同じく解像度を表す単位に「ppi」というものもあります。
「pixels per inch（1インチあたりのピクセル数）」の略ですが、印刷での単位はほとんどの場合「dpi」を使用します。
・dpi…dot per inch（1インチあたりのドット数）
・ppi…pixels per inch（1インチあたりのピクセル数）
※ドットとピクセルは違います。
dpiで画像解像度による精密さを比べる
1辺1インチと想定した画像を例に3種類を並べてみました。
・1インチを10個のドットに区切った例（左）
・1インチを20個のドットに区切った例（真ん中）
・1インチを40個のドットに区切った例（右）
上記を比較すると40個細かく敷き詰めている40dpiの文字が、一番精密な再現ができている事が分かりますよね。
上記は40個程度の例ですが、72dpi（72個のドット数）あればかなり構成量は多くなります。
PC等のスクリーンで見る分には鮮明な画像を表示させる事ができます。
スクリーン解像度：72dpi
72dpiとは1インチあたり72ドット数の画像解像度
先ほど説明をした「72dpi」はスクリーン解像度といって、WEBサイトなどで一般的に用いられるPCモニター画面表示用の解像度です。
通常のディスプレイなら、72dpiあればきれいに画像を表示させる事ができます。
ただ72dpiだと印刷用にはdpiが足りないため、72dpiのまま印刷に利用すると画像が粗くなりぼやけた仕上がりとなります。
ですのでWEBサイト向けに用意した素材をそのまま印刷に回す事はお勧めできないという事になりますね。
印刷向け解像度：350dpi
350dpiとは1インチあたり350ドット数の画像解像度
350dpiは印刷物に使われる解像度であり、1インチあたり350ドット数の画像解像度です。
ここで1インチという単位は変わりませんので、72個ドットがあるのと350個ドットがあるのとでは当然粒の細かさが違いますよね。
つまり350dpiある方が非常にきめ細やかな画像が表示できるため、印刷物として使われる訳ですね。
解像度が高い画像の印刷
解像度が十分にある画像はくっきりと印刷がされます。
解像度が十分にあるため、印刷物にディテールが再現され、美しい仕上がりとなっています。
WEB用の写真や画像としても使えるし、印刷物としても兼用できる事になりますね。
解像度が低い画像の印刷
解像度が低いとぼやけてギザギザになったり、細部のディテールが失われ画像のクオリティが落ちてしまいます。
インターネット上の写真やデジカメ・携帯電話で撮影された画像は、解像度が72dpiと低い場合がほとんどですので印刷には使えません。
フルカラー印刷には原寸サイズで画像解像度350dpiが推奨
通常のフルカラーの印刷物の場合は、画像解像度は原寸サイズで350dpiが適切なサイズとされています。
ほとんどの印刷会社が原寸サイズで「300dpi～400dpi」の範囲の画像解像度を推奨していますね。
用途別解像度の目安数値
| 数値 | 用途 |
|---|---|
| 71～96dpi | Web用解像度（スクリーン解像度） |
| 200dpi | 印刷物ギリギリ（離れて見るポスター程度まで） |
| 350～400dpi | 印刷用解像度 |
なぜPCモニター等のスクリーンでは72dpiで十分なのか
印刷物は印刷機械の性能次第で、非常にドット数の細かな粒子で印刷をする事ができるでしょう。
機械の性能が上がれば上がる程ドット数が増大するので、その分非常に細かくきれいな印刷物ができますね。
モニターは1ピクセル当たりのドット数が変わらない
しかしPCのモニターで表示される1点1点の光「ドット構成」というのは基本的にその量が変わらないのです。
どれだけ解像度が上がってもピクセル単位での表示になるので、それより鮮明にはならないのです。
この辺りはちょっと難しいのですが、覚えておいてくださいね。
Photoshopでの画像解像度の設定・変更方法
取り込んだ画像の名前が書いてある部分（見出し部分）を右クリックします。
メニューから「画像解像度」をクリックします。
ドキュメントのサイズの欄に「解像度」の項目がありますので、この数値を変える事になります。
この時「画像の再サンプル」のチェックは外しましょう
これで解像度が変更されました。見た目には画像に変化はないはずです。
このようにPhotoshop上で解像度を上げてもWEB画像には変化は起きません。鮮明になる事もなければ劣化する事も無いのです。
画像の再サンプル
「画像の再サンプル」は本来、元サイズの小さい画像を拡大させる時に極端な荒れが出ない様、ある程度調整をしてくれる機能です。
先ほどは「画像の再サンプル」のチェックを外しましたが、付けたままにすると画像が大きくなったり小さくなったり実際に変化します。
本来WEB画像は解像度によって大きくなったり小さくなったりはしませんが、あえて解像度に合わせたサンプルを作る事ができるのですね。
画像の再サンプルにチェックを付けて解像度を上げる
では今度は「画像の再サンプル」にチェックをつけて、先ほどの解像度の数値を上げてもう一度試してみましょう。
例えば72から350へdpiを変更した場合、画像がとても大きくなると思います。
大きくはなりましたが、それほど画像がひどく劣化したようには見えませんね。
元サイズ以上の画像拡大時に便利なピクセル補完
再サンプルは先ほども述べた通り、画像拡大時の劣化がなるべく目立たないよう調整する機能です。
今回の様に72個で敷き詰めていたデータを350個で敷き詰めるほどの拡大をしても、画像の見た目にそれ程の遜色はありません。
つまり小さいサイズの画像を大きく広げても、この「画像の再サンプル」機能を使えばある程度補ってくれるのです。
これを「ピクセル補完」と言います。
ピクセル補完にも限界はある
しかし、どのような小さなものでも大きく鮮明にできる訳ではありません。ある程度限界があります。
例えば300px幅しかない画像データを1920pxまで大きくすれば、さすがにかなり劣化します。
あくまで「画像の再サンプル」によるピクセル補完機能は、応急措置的な方法です。
サイズの拡大・縮小は自在ではない
元サイズの小さい画像を強引に引き延ばすのは本来良い事ではありません。
基本的に大は小を兼ねますが、一度でも小さくなると小は大を兼ねないのが基本ルールです。
画像を使うときは、使用サイズよりできる限り大きな画像素材を用意するようにしましょう。
WEB用画像と解像度の関係
Photoshopで解像度を設定しても画質は変わらない
先ほどPhotoshopで画像の解像度（dpi）の数値を変更してみました。
この時、画像に変化はありませんでした。画像のサイズ（縦横のピクセル数）が変わらなければ同じ画質になるのです。
つまりWEB上では解像度を触っても画像に変化はない事になります。
※確認時は「画像の再サンプル」のチェックは外しておいてください。
それは何故かというと画像サイズ（縦横のピクセル数）が同じだからです。「解像度UPをしてもサイズを大きくした事にはならない」のです。
高解像度のモニターも解像度とは無関係
今のほとんどのスマートフォンは、PCのモニターと違って解像度の高い画面になっています。
それから「Retinaディスプレイ」と呼ばれるモニターも解像度が高く、通常のPCモニターとは違います。
この解像度が高い画面で画像を表示させようとする場合も、画像の解像度自体は関係がありません。
Retinaディスプレイやスマホなどの高解像モニターには、解像度ではなくピクセルサイズを大きくして対応する必要があります。
例えばこのRetinaディスプレイに対応するため、画像の解像度を72dpiから300dpiにあげても何も変化はないのですね。
本来のサイズを表示するピクセルが半分で済む高解像度モニター
詳しくは割愛しますが、例えば解像度が2倍のスマホ画面で「100px×100px」の画像を表示させるとしましょう。
この場合、この画像は「50px×50px」のサイズでスマホ画面に表示されてしまうのです。
高解像度モニターは性能が良いので、使うピクセル数を「本来の半分で済ませてしまう」ためですね。
ですのでスマホ向けには2倍となる「200px×200px」のサイズ画像を用意する必要があります。この時dpiなどの画像解像度は全く関係ありません。
なぜ解像度を意識しなければならないのか
ここまでWEB用に表示する画像にどんなdpi数値の画像を使っても同じであり、あまり意味がない事を説明してきました。
WEBサイトなどでの表示自体は基本的に「ピクセル単位」でコントロールするものなのです。
解像度300dpiでの横幅450pxも、72dpiでの450pxも、同じ450pxである事には変わりがありません。
ですのでサイズが同じであればWEBサイト上での画像の見栄えは全く変わらないのです。
ではどうして72dpiや96dpiなどと解像度の話が出てくるのでしょうか？
jpgへの出力時点で解像度が変わる
それはPhotoshopでjpg画像を書き出す際、自動的にdpi数値の変更がされてしまうのが原因です。
例えばPhotoshopで72dpiの解像度でWEB用の画像を作って、それをjpgで書き出したとしましょう。
加工中は72dpiで画像を作っていても、jpg出力をした後に解像度を見てみると「96dpi」になっているのです。
IEで画像を右クリックし、プロパティをクリックした後の「詳細」タブの記載部分
※Windowsだと96dpiが通常です。
これはあくまでdpiが72から96に変わっているだけで「画像サイズ」自体は変わっていないので安心して下さい。
画像出力時の解像度ルールを知る
このように画像出力時に自動的に調整が行われることを覚えておきましょう。
例えば画像提出の依頼があって、解像度の指定がある場合などは上記の事を知っておかなければなりませんよね。
Windowsでjpgの出力をしたら解像度は96dpiになるので、相手から96dpiでと言われたら普通にそのまま出力すればOKです。
逆に印刷物を作成する際は、このdpi数の違いが印刷物の鮮明さに大きく影響してくるので注意が必要ですね。
まとめ
ここまで画像解像度の仕組みとWEBとの関係について述べてきました。
基本的にはWEB上の画像を作成するのに、画像解像度はおおむね関係が無いと考えて頂いて大丈夫です。
スマホなどの高解像度モニターに対応するのは、画像サイズを倍化させて対応し、画像の解像度自体は考慮されません。
印刷物の時はdpi数が高いものを要求されますので、WEB上の画像はそのまま使えませんのでそこだけ注意が必要ですね。
