Webページに使う画像は高解像度でなくてもいい理由

  • このエントリーをはてなブックマークに追加

画像解像度とは

解像度は「dpi(Dot Per Inch)」で表されます。
これは「1インチの中にどれだけのドット(点)を敷き詰めるか」という意味です。点の密度の事なんですね。
このdpiはPhotoshopなどの画像加工ソフトやカメラの設定で変更する事ができます。

印刷物の場合は密度を変更できる

プリンターで印刷出力する場合、機械の性能に依存しますが、一定の範囲の中にどれだけの密度で点を敷き詰めるのかを変更する事ができます。
どんな物でも拡大していくと点の集まりで写真や画像の色合い、形を表現しています。この点の密度が高くなればなるほど綺麗に印刷ができるんですね。
なので撮影した写真や印刷物を作る時には高解像度の写真データが求められるんです。

「解像度(dpi)は1インチの中にどれだけの点を敷き詰めるか」とお伝えしましたね。
という事は、どれだけの点が集まれば1インチになるのかを逆算する事もできるという事です。※ちなみに1インチは2.54cmです。
よく縦横サイズだけで写真の大小を考えてしまいますが実はそうではありません。印刷後のサイズは縦横サイズの他に解像度も大きな影響があるんです。

A4用紙のサイズに350dpiの写真を印刷する時に必要となる画像サイズ

例えばA4用紙(21 x 29.7cm)に350dpiの解像度で印刷したい場合は、

(21 / 2.54) x 350 = 2894
(29.7 / 2.54) x 350 = 4093
となるので、最低でも 2894 x 4093 の点(ドット)が必要になります。
数値だけを見ると大きく見えそうですが、この縦横サイズでもやっとA4サイズになるんですね。
A3サイズやA1サイズに印刷する写真の縦横サイズはもっと大きな写真が必要になります。

1200万画素のデジカメで撮影した写真を350dpiで印刷するときの用紙サイズ

1200万画素のデジタルカメラで撮影した写真を350dpiという解像度で印刷しようとすると、用紙のサイズはどのくらいの大きさになるのでしょうか。
1200万画素は 3000 x 4000 の点で出来ています。なので用紙のサイズは、

(3000 x 2.54)/ 350 = 22
(4000 x 2.54)/ 350 = 29
となるので、22 x 29cmの大きさになります。だいたいA4サイズくらいの大きさになりますね。

ディスプレイは最初から密度が決まっている

ではWebページを表示させる画面、パソコンのディスプレイはどうでしょうか。
ディスプレイはプリンタと違い、1インチの中に敷き詰められている点(ドット)が製造段階で決められています。
1つの点(ドット)は1色しか発色できません。2色、3色と多くの色数を映し出すことができないんです。

ディスプレイによって解像度が変わってしまう

パソコンのディスプレイで考えてみましょう。
お店に行くと様々なサイズのディスプレイが販売されていますよね。ディスプレイのインチよりも解像度の方を注目してみてください。解像度は「1920 x 1080」という風に表記されている箇所です。

画面サイズが19インチの場合、解像度が1920 x 1080というディスプレイは、19インチの中に1920 x 1080の点が敷き詰められているという意味です。
26インチになった場合は26インチの中に1920 x 1080の点が敷き詰められていることになります。

ここで気が付いたことはありませんか?
画面のインチサイズは変わったのに、中に敷き詰められている点の数には変化がありませんよね。
敷き詰める点の数を変えずに画面を大きくするには、1つの点を大きくするしかありません。

このように1インチの中に収める点の数が変わってしまっては、解像度を変更してもあまり意味がない事がわかると思います。

実際に比べてみましょう

こちらが72dpiの画像解像度で作成した画像です。

次に350dpiの解像度です。

どうでしょうか?違いがわかりますか?私には二つの差がわかりません。
このように解像度を高くしても、見た目上は変化がないんです。

ただし、解像度が高い画像はファイルサイズが大きくなっていまいます。
この画像はどちらも700 × 394pxですが、ファイルサイズは上が93KB程度、下が353KB程度になります。
(※2018年4月5日:ファイルサイズ表記が誤っていたため、修正いたしました。申し訳ございません。)
同じ縦横サイズでも、画像が持っているデータ量が2倍近く変わってしまいます。
ファイルサイズが増えてしまうと1ページを表示させるのに必要となる時間も多くなりますし、契約しているWebサーバーの容量も大きく使ってしまいます。
どちらでも差のない結果が出るのに、ファイルサイズだけが大きくなってしまうのはもったいないですね。
なので、Webページを作成する時は72dpi程度で十分なんです。

※ちなみに写真は新潟駅の万代口です。

まとめ

・画像解像度は「dpi」で表記され、1インチの中にどれだけのドット(点)を敷き詰めるかを表す
・画像解像度は印刷物を作成する時には高い方が鮮明に印刷できる
・Webページを表示させるディスプレイの解像度(dpi)は製品によって異なる
・解像度が高くなると、ファイル容量が大きくなる

新潟県地域別ホームページ制作実績

弊社は、新潟県長岡市を中心に新潟県内全域に対応しております。
ホームページ制作・Webデザイン・インターネット戦略のご相談は、株式会社アテンドまで。

CONTACTお問い合わせ

ご相談やご質問、ご要望などございましたら、
お気軽にお問い合わせください。

TEL:0258-31-5005FAX:0258-37-7301