[ Ps講座 ] 解像度のはなし

皆さん、こんにちは!
テルヤです。

今回は画像の解像度の話。
Photoshopを使ったことがある人は分かるとは思いますが、解像度ってなに?
という方へ向けて、私も一緒におさらいしたいと思います!

解像度とは?

解像度とは画像の密度のことで、「dpi」という単位を用います。

dpi = dots per inch(ドット・パー・インチ)

ドット・パー・インチとは1インチの中にドットがいくつ入っているかということ。
ドットの部分がピクセルですね!

解像度5dpiなら、5pixel/1inch = 1インチ、5個のピクセルが並んでいます。
面積でいうと、5×5=25個のピクセルで形成されているんですね!
解像度10dpiなら、10pixel/1inch = 1インチ、10個のピクセルが並んでいます。
10×10=100個のピクセルで形成。

ということは、1inchのピクセルの数が多ければ多いほど密度が高いということですね!


↑解像度100dpi 100pixel/1inch = 1インチ、100個のピクセルが並び、100×100=10000pixel!!
多くのピクセルで作られてるのでキメが細かいですね!

解像度の注意点

解像度が1インチ何個のピクセルでできているかということが分かりましたね!
では、次に解像度の注意点です!

よく、画像が粗いとかボヤけてるなど聞いたことがあるかと思います。大きいものを小さくする分には問題ありませんが、もともと低い解像度の画像を拡大すると、数値の低いdpiを無理やり増やすので画像があれたりボヤケたりします。元のdpiより数値を高くしたときに画像の「粗」が出てきてしまうんですね。

50dpiのチューリップ画像↑

200dpiに拡大↑
拡大したのでサイズは大きくなりましたが、なんだかボヤっとしています。これが「粗」ですね。

Photoshopで解像度を見てみる

Photoshopで解像度を調べてみるときは
(イメージ/画像解像度)もしくはショートカットキー(Alt+Ctrl+I)で画像解像度パレットを開きます。黄色枠の部分が解像度になります。

この数値を変更することによって解像度dpiが低くなったり高くなったりします。

解像度は高い方がいい?

解像度は用途によって最適な数値があります。
印刷物の場合は密度の高い「高解像度350dpi」を使用します。

では、Webは?低いとボヤっとしちゃうから高い方がいいじゃん!
と思ってしまいますが、Webの場合「72dpi = 1インチ、72個のピクセル」で十分なんです!


解像度72dpi↑

解像度200dpi↑

解像度300dpi↑

どうでしょう。違い、分かりましたか?
72dpiと200dpiは多少の差は感じられますが、200dpiと300dpiはほとんど変わりませんよね。
解像度が高くなるとその分容量も大きくなってしまいます。不要に高すぎる解像度でWebにUPしてしまうと読み込み速度が遅くなる原因にもなるので、Webの解像度は72dpiで十分なんです!

まとめ

・解像度とは1inch中のpixel数の画像密度である
・低解像度の画像のdpiを上げると画像が粗くなる
・Webで使用する解像度は72dpiで十分である
・解像度が高いとファイル容量が大きくなる

では、また!
テルヤでした!

この記事を書いた人

照屋野枝
照屋野枝クリエイティブ事業部 ウェブデザイナー
クライアント様の思いを形にできるようなデザインえを心がけています。
プロフィールを見る
  • このエントリーをはてなブックマークに追加
  • follow us in feedly

何でもお気軽にお問い合せください。

お問い合せはこちら