東京都新宿区のWeb制作会社 - ウェブラボ株式会社

クリエイターブログ

画像の解像度について知ろう

2021.02.02 Posted by

画像の「解像度」という言葉は、印刷物を作る際や、パソコンやスマホのディスプレイの仕様を確認する時などによく耳にすると思います。
解像度の設定をミスすると、その画像が使い物にならなくなってしまうこともあります。この記事で理解を深めましょう。

「解像度」には2つの意味がある

解像度という言葉は、混同しがちですが実は2つの意味を持ちます。

①密度を表す解像度
②ピクセル数を表す解像度(画面解像度)

この2つですね。
前者は印刷に関わる解像度で、後者はWebに関わる解像度です。

①密度を表す解像度

密度を表す解像度とは、1インチ(2.54センチメートル)あたりのドットの数を指します。
ドットとは、ディスプレイやプリンタで文字や画像を構成する最小単位をのことです。画像を構成するための小さな点というイメージですね。

1インチあたり72個のドットが並んでいるので72dpi

密度を表す解像度の単位は「dpi」(dots per inch)です。
1インチあたり72個のドットが並んでいると72dpi、350個だと350dpiとなるわけです。
デジタルで使用する画像の解像度は72dpiにすることが多いですが、カラーで印刷する場合は最低でも300~350dpiくらいは必要になります。
印刷を想定している画像の解像度を72dpiにしてしまうと、出力する際にボンヤリしたものになってしまうので、データを作成する際にはよく注意しましょう。

また、「dpi」とよく似た単位に「ppi」(pixels per inch)という単位があります。こちらは1インチあたりのピクセル数を表しています。
dpiとppiは厳密には異なりますが、ほぼ同じ意味としてとらえて問題ありません。
※photoshopでは解像度をppiで表しています。

②ピクセル数を表す解像度(画面解像度)

画面解像度は、ディスプレイの中に全部で何個のピクセルがあるかを表します。
ピクセルとは、デジタル画像を構成する最小単位を指します。
1ピクセルの大きさはディスプレイによって違うため、決まった大きさを指しているものではないということがポイントです。

iPhone11の画面解像度

パソコンやスマホの解像度を確認すると、A×Bという形で記載されていると思います。
例としてiPhone11の仕様を確認してみると、画面解像度は2436×1125とあります。
iPhone11は画面サイズが6.1インチなので、6.1インチの中にピクセルが2436×1125個存在することになります。

また、同じディスプレイサイズで画面解像度が異なるディスプレイがある場合は、画面解像度が高いディスプレイのほうが細かく鮮明に描写されるということになります。

密度を表す解像度を変更しても、ディスプレイ上の見た目は変わらない

Photoshopなどの画像編集ソフトを見ると、「幅」「高さ」の他に「解像度」があると思います。
実は、この解像度を72ppiに設定しても350ppiに設定しても、ディスプレイで表示するうえでは見た目もファイルサイズも変わりません

画像編集ソフトにおける「解像度」「幅」「高さ」は、

「解像度」…①密度を表す解像度
「幅」「高さ」…②ピクセル数を表す解像度(画面解像度)

に関わります。

つまり、画像の解像度を何にしようと、画面上ではピクセル数で大きさが決まってしまうため、そのピクセル数を変えない限りはどんな解像度にしようと画質は変わらないということです。
※もちろん、解像度を変更した際に合わせてピクセル数を増減させた場合は画像のサイズが変わってしまうため、同じサイズで同じ画質にはなりません。

「デジタルで使用する画像の解像度は72dpiにすることが多い」と書きましたが、これは昔の慣習が残っているだけなので、実はあまり意識する必要はありません。
極端な例ですが、縦横が300px×400pxで解像度が72ppiの画像を、縦横は300px×400pxのまま解像度を1ppiまで落としても、web上の見た目は変わらないのです。
webにおいては、解像度よりも縦横のピクセルが適切であるかどうかを意識するようにしましょう。

まとめ

解像度について、なんとなく「webは72dpi、紙は350dpiで作るのがよい」といった認識で止まっている人が多かったのではないでしょうか。

もちろんその認識でも間違いないのですが、画面解像度との違いを知っておくことで、データのやりとりで勘違いが生まれにくくなると思います。
今後、画像データを作成する際に参考にしてみてください。

 

オリエンシートダウンロード

採用サイト 絶対に外せない5つのチェックポイント

オリエンシートダウンロード

PAGETOP

お問い合わせContact

まずはお気軽にご相談ください。

Web制作・コンサルティング・システム開発に関するお問い合わせ・お見積もり依頼は、
電話・問い合わせフォームより受け付けております。(受付時間:平日9:30〜18:30)

〒160-0004 東京都新宿区四谷4丁目33-2
マーキュリースクエア4F

TEL:03-5366-3277 FAX:03-5366-3278