【疑問解消】Webデザインに最適な画像解像度はどうして72dpi?

この記事は次のような疑問を持っている方に向けて書いています。

この記事を読んでもらえたら、これらの疑問が解消し、デザインを制作する時にも役立ちます。

どうぞ最後までご覧になってください。

Webデザインには画像の投稿や加工は必須

Webサイトを作るときやブログを投稿するときに、スマートフォンやデジタルカメラで撮った写真をパソコンに取り込む時がありますね。

取り込んだ画像を加工するときにPhotoshopなどのソフトを使う時がありますが、適切なサイズにしたり、画像の上に説明文を添えたりするなど、色々な加工方法があります。

Webデザインの画像はドットでできている

先生

この画像をどんどん拡大していくにつれて、画像が荒くなって、細かな点々がたくさん集まって表示されているのがよくわかるよね。

デザイニャー

デジタル画像は、この細かな点（ドット）の集合体でできているんだニャン。

先生

解像度についてある程度の知識は持っておくべきだよ。

画像解像度って何?

画像解像度というのは、このドットの数が１インチ（2.54cm）のなかにどのくらいのピクセル数が入っているかを数値化したものです。

先生

つまり、デジタル画像を構成する構成度（集合の程度）のことを指していて、dpiという単位が使われているんだ。

例えば、72dpiのデジタル画像だったら、1インチあたり72ピクセル✖️72ピクセル＝5184ピクセルということになります。

先生

同じサイズの画像だったとしても、72dpiよりも350dpiの方が、1点1点の構成量が多いので、より細かいデータだということがわかるね。

dpiとppiの違い

先生

「dpi」と「ppi」の違いについてもう少し詳しく説明すると次のようになるよ。

「dpi」は密度としての解像度

「dpi」とは密度としての解像度のことで、1インチの幅の中に何個のピクセルがあるかということを著しています。

デザイニャー

数値が大きいほど解像度が高くなり、鮮やかで綺麗な画像になるんだニャン。

「ppi」はディスプレイのピクセル数としての解像度

「ppi」というのは、ディスプレイのピクセル数としての解像度のことで、ディスプレイの中にあるピクセルが何個あるかということを表しています。

先生

このディスプレイのピクセル数のことを画面解像度と言うんだ。

Retinaディスプレイって何?

Retinaディスプレイというのは、高解像度のディスプレイのことで、MacやiPhoneなどのApple製品に使われているディスプレイのことを指します。

一般的なディスプレイと比べて、解像度が高く、美しく繊細な表示をすることができます。

なぜ美しく繊細な表示をすることができるのかというと、Retinaディスプレイは、2px ✖️ 2pxを擬似的に1pxとして表示しているからです。

なので、一般的なディスプレイよりも2倍細かく表示されるので、美しく繊細な表示をすることができるようになっているのです。

Webデザインの解像度と印刷物やポスターの最適な解像度

先生

Webデザインや印刷物、そしてポスターのそれぞれの解像度は次の通りになっているよ。

Webデザインに最適な解像度は72dpi

Webデザインに最適な解像度は「72dpi」です。

なぜWebデザインに最適な解像度が72dpiなのかというと、ディスプレイの解像度に依存しているからです。

どんなに高い解像度の画像を用意しても変化がないので、画像のサイズ（ピクセル数）だけを意識しておくだけで十分です。

この決まりを絶対解像度と言います。

Webデザインだけで使用して、データを印刷する必要がない場合は、72dpiでも問題ありません。

例え解像度の高い画像であっても、パソコンやスマートフォンなどのディスプレイでみる時には、350ppiも72dpiであっても変わらないからです。

先生

そんな場合は、解像度ではなく、「画像サイズ」を２倍以上で書き出すようにしよう。

しかし、画像の解像度を高くしたとしても、サイズが等倍だと、Webの見た目はほとんど変わらないので、２倍以上で書き出す必要があります。

印刷物に最適な画像解像度は350dpi

先生

印刷物に最適な画像解像度は、350~400dpiが最適だよ。

しかし、モノクロ印刷の2階調モードで印刷する場合は、白と黒の2色になるので、350dpiだと滑らかにならないので、その場合はもっと高い1200dpiの解像度にするのがお勧めです。

先生

印刷物の用途にあわせて最適な画像解像度を選ぶようにしよう。

ポスターに最適な解像度は200dpi

先生

同じ印刷物でも、ポスターなどのように遠くから見られるものの場合は、200dpiでも問題ないよ。

ポスターは大きく印刷されることが多いので、画像サイズが非常に大きくなる場合もあります。

解像度を高くしたらデータサイズが膨大な量になってしまうので、作業の効率がすごく落ちてしまうことがあるので、200dpi程度に設定することがお勧めです。

【よくわかる】Webデザインとグラフィックデザインの違いを徹底解説この記事は次のような方のために書いています。 ・Webデザインとグラフィックデザインの違いが曖昧でよくわからない ・We...

解像度が高い画像と低い画像の違い

先生

解像度の高い画像と低い画像の違いは次の通りだよ。

解像度が高い画像はくっきりと印刷される

解像度が高い画像はくっきりと印刷されます。

解像度が十分にあると、印刷物が細かく再現されて美しい仕上がりになります。

解像度が高い画像は印刷物だけでなく、Web用の画像や写真にも兼用して使うことができます。

解像度が低い画像はギザギザやぼんやりした感じに印刷される

先生

一方、解像度が低い画像はギザギザになったり、細かい部分が表現できず、画像の質が落ちてしまうんだ。

フルカラー印刷には350dpiがおすすめ

先生

フルカラーの印刷物の場合の画像解像度は、原寸サイズで350dpiにするのが適切なサイズとされているんだ。

Web画像の画素とサイズ

先生

Web画像の画素とサイズについてお話しするね。

Web画像を作るときは、解像度だけでなく、画素数とサイズのことも考える必要があります。

特にサイズを考えることは大事です。

デザイニャー

HTMLでも画像を表示させるのにサイズを指定するもんニャン。

画素

先生

スマートフォンやデジカメを使う時に、「画素数」という言葉をよくきくよね。

この画素数というのは、画像解像度のことではなく、ピクセルと同じものを指しています。

デザイニャー

例えば2000万画素のカメラで写真を撮ったら、2000万画素のピクセルが並んでいる画像になるということかニャン。

ピクセルがたくさん詰まっているほど精密な画像になるけれど、ピンボケした写真の場合でも、ボケた写真にはなりますが、画素数は変わりません。

サイズ

先生

画像サイズというのは、縦横それぞれに並ぶピクセルの数で示している大きさのことを言うんだ。

例えば、400px✖️300pxと言うサイズの画像の場合は、横に400px、縦に300pxが並んでいる画像です。

デザイニャー

つまり、ピクセルの数がどれだけ詰まっているのかによって画像のサイズが決まってくる、と言うわけだニャン。

先生

そして、ピクセルがどれだけ詰まっている密度のことを「画像解像度」と言うんだ。

ただ、Retinaディスレイという高解像度なディスプレイの場合は、解像度を2倍にしないといけないことを考えて、計算する必要があります。

Web画像の画素とサイズはテストして決めよう

ここまで、解像度や画素、サイズなどについてお話ししてきましたが、最近ではディスプレイの性能がどんどんよくなっていたり、サイトのツールが自動的に最適なサイズを表示してくれるようなったりして、自分で計算をするもが非効率になってきています。

サイズを変更するのは簡単なのですが、画像の解像度を変更するのは大変で、もう一度画像を作り直さなければならなくなることもあります。

なので、解像度を決めてから画像を作る前に、一度WebにUPしてみてパソコンやスマホ、そしてできればタブレットでどのように表示されているのかを確認すると良いと思います。

最近では、画像作成・加工ソフトにも、途中で解像度を変更してくれる機能がありますので、その機能を使いながら、解像度を変更していくのも良いのではないでしょうか。

Photoshopでの画像解像度の設定&変更法

先生

ここから、Photoshopでの画像解像度の設定と変更方法についてお話ししていくね。

新規作成の時に設定する場合

Photoshopのメニュー内の「ファイル」から「新規作成」を選択すると、新規ドキュメントの設定画面が出てきます。

画像の右側に出ているプリセット詳細の「解像度」で、画面解像度を設定します。

Web用のデザインをするなら、72ピクセル、印刷物の場合は350ピクセル以上の数字を入れて設定しましょう。

後で解像度を変更する場合

先生

Web用に72dpiで制作しているファイルを印刷用の350dpiに変更するのを例にお話ししていくね。

まずは、元の設定を確認します。

そして、メニュー内の「イメージ」から「画像解像度」を選択して、解像度の詳細情報を表示させます。

先生

「解像度」のところに表示されているのが、現在のデザインファイルの解像度だよ。

次に解像度を変更します。

先生

解像度のところに、印刷用の350と入力すると、画像サイズもそれに合わせて変化するよ。

デザイニャー

同じ画像でも、画面解像度が高くなれば、データサイズが大きくなることが確認できるニャン。

そして、OKボタンをクリックすれば、解像度の変更が完了します。

画像の再サンプル

「画像の再サンプル」とは、もともと、元のサイズが小さい画像を拡大するときに、極端な荒れが出ないように調整してくれる機能のことを言います。

「画像の再サンプル」のチェックを外さずにつけたままにしておくと、画像が大きくなったり小さくなったりと言うように、実際に変化します。

先生

本来、Web画像は解像度によって大きくなったり小さくなったりはしないけれど、あえて解像度に合わせたサンプルを作ることができる便利な機能だよ。

元の画像よりも拡大するときにはピクセル補完

先生

再サンプルは、画像を拡大した時の劣化が目立たないようにする調整する機能だと言うことはお話ししたね。

72個で敷き詰められたデータを350個で敷き詰めるほどの拡大をしたとしても、画像の見た目はそれほど変わりません。

つまり、小さいサイズの画像を拡大しても、「画像の再サンプル」の機能である程度補ってくれるのですが、これを「ピクセル補完」と言います。

ピクセル補完には限界がある

先生

とは言っても、ピクセル補完の機能で、どんな小さなものでも大きく鮮明にできるわけではなく、限界があるんだ。

例えば、200px幅しかない画像データを2000pxにまで拡大すれば、さすがに劣化します。

デザイニャー

「画像サンプル」によるピクセル補完の機能は、あくまで応急措置的な方法と考えておいた方が良いようだニャン。

サイズの拡大や縮小は自在ではない

先生

元サイズが小さい画像をあまり強引に引き伸ばすのは、あまり良いことではないことはわかったよね。

Web用の画像と解像度の関係

先生

Web用の画像と解像度の関係性には次の2つが挙げられるよ。

Photoshopで画像解像度を設定しても画質は変化しない

Photoshopで画像の解像度の数値を変更してみても、画像には変化はありません。

画像サイズ（縦横のピクセル数）が変わらなかったら、同じ画質になるからです。

つまり、解像度を変えてもWeb上の画像には特別に変化はありません。

ここで、注意ですが、これを確認するときには、「画像の再サンプル」のチェックを外しておきましょう。

なぜならば、画像サイズ（縦横のピクセル数）が同じだからで、解像度をUPしたとしてもサイズを大きくしたことにはならないからです。

解像度が高いモニターも画像解像度とは関係ない

現在のほとんどのスマートフォンは、解像度の高い画面になっています。

そして「Retinaディスプレイ」のモニターも解像度が高く、普通のパソコンの画面とは違います。

解像度が高いこれらの画面で画像を表示させようとしても、画像の解像度自体は関係ありません。

スマートフォンやRetinaディスプレイなどの解像度の高いモニターには、解像度ではなくて、ピクセルサイズを大きくしておく必要があります。

画像解像度を設定する際の2つの注意点

画像解像度を設定する際の注意点は次の2つです。

解像度が高くなるほどファイルサイズが大きくなる

解像度が高くなるほど、画像の中に含まれているピクセル数が増えることで、データサイズが大きくなります。

それが理由で、デザインファイルのサイズが大きくなって、編集や印刷の時に負担がかかるかもしれないので、注意しましょう。

Webだけで利用する画像の場合は、画像のデータサイズが表示速度にも影響しますので、画像サイズを小さくするようにしましょう。

解像度を低くした画像は元に戻せない

一度、解像度を低くしたら、それから高い解像度に戻すことはできないので注意しましょう。

画面の数字上では、変更可能ですが、実際に最初の高解像度だった状態に戻すことはできません。

Webだけで見る画像であれば問題はありませんが、それを印刷した場合は、デザインがすっかりダメになってしまう可能性もありますので、画像解像度の設定を変更する場合は、十分に注意しましょう。

解像度を意識しないといけない理由

本の表紙に使う写真や画像の解像度の確認方法[Windows対応版]

Web常に表示する画像にどんなdpi数値の画像を使ってもあまり意味がないことをお話ししてきました。

解像度が300dpiでの横幅500pxも、72dpiでの500pxでも、同じ500pxであることには変わりがなく、Webサイト上での画像の見た目は全くかわりません。

それでは、どうして解像度についての話が出てくるのかというと、Photoshopなどで、jpg画像を書き出すときに、自動的にdpi数値の変更がされてしまうからです。

Photoshopで72dpiの解像度のWeb用の画像を作って、それをjpgに書き出してみたら、加工中は72dpiで画像を作っていたとしても、jpg出力をしてから解像度をみてみると、「96dpi」になっているのです。

しかしこれはdpiが72dpiから96dpiに変わっているだけで、画像サイズ自体は変わっていないのでご安心を。

このように、画像を出力するときに、自動調整が行われることを頭に入れておきましょう。

画像提出の依頼があったときに、解像度の指定がある場合に、このことを知っておかなければなりません。

まとめ

先生

この授業では次の32個のことについてお話ししてきたよ。

デザイニャー

Webデザインに使う画像の最適な解像度がどうして72dpiで十分なのか?という理由がわかってスッキリしたニャン。

先生

Webサイトで画像を表示させるときに、Webや印刷物それぞれの適した解像度についてもお話ししてきたよ。

デザイニャー

Photoshopでの画像解像度の設定法についても学べたニャン。

先生

この授業で学んだことをしっかりと頭に入れておいて、Webデザインにしても印刷物にしても適した画像解像度にしてより良いデザインができるようになるといいね。

私たちは頑張るあなたを応援しています。