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

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

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

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

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

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

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

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

画像解像度って何?

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

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

dpiとppiの違い

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

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

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

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

Retinaディスプレイって何?

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

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

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

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

 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Web画像の画素とサイズ

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

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

画素

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

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

サイズ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

画像の再サンプル

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

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

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

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

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

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

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

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

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

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に変わっているだけで、画像サイズ自体は変わっていないのでご安心を。

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

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

まとめ

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