解像度の話2【PC編】

印刷
スポンサーリンク

こんにちはG3です。PCやスマホなどで画像データを扱う場合、画面表示とデータの関係を把握しておくことが大切です。せっかく苦労して描いた絵が、いざブログに投稿したら粗くなってしまった、などということがないように、画面で見えるものが、どういうデータで、どういう処理をされているか、なるべく簡単に説明していきます。

前回のお話はこちら。

ヤードポンド法とメートル法

はじめにご注意。

日本工業規格は国際単位系(SI)に準じており、メートル法でもって工業製品の大きさをあらわすべきなのですが、表示機器のCRT(ブラウン管)を発明したのが、ヤードポンド法が根強く残るアメリカだったため、慣習的にインチ表示が定着してしまいました。不本意ではありますが、以下ヤードポンド法の「インチ(約25.4ミリ)」が多く登場します。ご了承ください。

なお、換算が必要な場合、Googleの単位換算が便利です。Googleの検索欄に「インチ ミリ」と入力すると、

以下の画面が出てきます。

数値や単位を必要に応じて変更してください。

ディスプレイの解像度

大きいか小さいか

テレビやPC、スマホなどのディスプレイのサイズは、対角線のインチ数で表します。元々の表示装置であるCRT(ブラウン管)が円形で、大きさを表すのに直径を用いていたため、慣習的に方形になってからも対角線のインチ数で表しています。ただし、これでは同じインチ数でも正方形も長方形もあって不便なので、アスペクト比(長辺と短辺の比率)を「16:9」のように一緒に示すのが一般的です。

細かいか粗いか

普段みなさんが目にしているPCやスマホのディスプレイは「15.6インチ1920×1080ピクセル」といった風に仕様が表記されていると思います。以前は、同じ15.6インチのディスプレイでも、1366×768ピクセル表示という性能のものも多くありました。この場合、同じ大きさで、表示できるピクセルが少ないわけですから、1つのピクセルが大きくなり、見た目が粗い状態となります。この、画面のピクセルの密度を示す単位として使われるのが以下の2つです。

「ppi(ピクセルパーインチ)」
「dpi(ドットパーインチ)」

正確に言うとこの2つは違うのですが、PCのディスプレイなどで使用するぶんには同じ意味だと思っておいてかまいません。

データをディスプレイに表示する

PCでの解像度の扱い

お客さま
お客さま

画面に100%の表示って、データ通りの大きさってこと?

G3
G3

画面と同じ解像度でデータが作成されていれば、データ通りの大きさです

まわりくどいというかなんというか、説明の表現の仕方にいつも困るのですが、使っている環境によって、たとえばMicrosoftWordで表示倍率を100%にしても

「258×182mmで作ったデータが、画面に定規をあててはかったら違ってた!」

「ディスプレイを買い換えたら、文字がめっちゃ小さくなった!」

という相談も普通にあります。

まあ実際に画面に定規をあてながらデータを作成される方もあまりいないとは思いますが、それもこれも、PC側のディスプレイ解像度の管理機能によります。

下の画面はWindows10のディスプレイ設定です。

「テキスト、アプリ、その他の項目のサイズを変更する」と、「ディスプレイの解像度」という設定項目がありますが、「テキスト、アプリの基準となる解像度」「ディスプレイの物理解像度」の情報がないため、何を基準にしているかさっぱりわかりません。

そこで、アプリではなく、OSの機能である、スクリーンショットのデータの解像度を調べると、

Windowsは「96ppi」
MacOSは「Retinaディスプレイ搭載の機種は144ppi、それ以外は72ppi

を基準にコントロールしているようです。OSの基準値が頻繁に変わると、動作するアプリや周辺機器などの仕様変更が大変なことになるため、この数値はめったに変更されないようです。一方で、ディスプレイの高解像度化はどんどん進んでおり、依然として「ディスプレイの表示の大きさがバラバラ問題」は解決できていませんね…。

お客さま
お客さま

結局よくわかんないんだけど?

G3
G3

WindowsPCで、ディスプレイの解像度が96ppiで、データも96ppiなら「表示倍率100%」はデータ通りの大きさです…

ピクセル等倍

「ピクセル等倍」という表示方法があります。ディスプレイの1ピクセルに、データの1ピクセルをそのまま表示させる方法です。最近の高解像度写真データはピクセル数が非常に多く、ディスプレイの解像度が追いついていないため、写真データの一部しか表示されない欠点はあるのですが、データの素の状態を確認できるため、写真のシビアなピント確認などによく使われる操作です。

ピクセル等倍表示の例(AdobePhotoshop)。右上に小さく全体のイメージが表示されてます。

拡大・縮小表示と注意

使用するアプリのメニューに、だいたい「画像を編集」と、「表示を変更」というのがあると思います。基本的に処理は同じような作業をしているのですが、

「画像を編集」の場合は、データ自体を操作している
「表示を変更」の場合は、データ自体はそのままで、ユーザーの編集作業を補助するために、データを画面に表示する方法(拡大縮小とか。後述のデータ編集と同様の処理)を色々操作している

この点を混同しないようにお願いします。うっかりデータ自体を操作すると大変なことになります。

データを編集してみる

拡大

実際に画像データを拡大してみます。

上のメイドさんのデータ、右側に表示があるように、48×48px(ピクセル)、解像度72pixel/inch(ppi)のデータです。これを200%拡大するには2種類の方法があります。

1つめは、1インチあたりのピクセル数情報を操作して、データの大きさの情報を変える方法。

上が200%拡大した状態。解像度が72ppiから、半分の36ppiになっています。ということは、1つのピクセルの大きさが、1/72インチから、1/36インチと、2倍の大きさになったということです。

2つめの方法は、ピクセル1つの大きさの情報(72ppi)を変えずに、縦横それぞれ2倍のピクセル数(面積比は4倍ですね)の画像としてデータをつくりなおす、というものです。

データをつくりなおすと、上の左側のメイドさんのように、ぼんやりした状態になってしまいます。右側下に「再サンプル」という項目がありますが、これは、データを拡大するときに、なるべく見た目いい感じになるようにアプリが頑張ってあちこち修正してくれているのです。

お客さま
お客さま

いや見た目残念すぎでしょ

G3
G3

知ってて言ってると思うけど、拡大はどうしても粗くなっちゃうんでなるべく避けてください…

縮小

次は縮小です。拡大と同様2種類の方法があります。

下のようにピクセルの大きさ情報を半分の1/144インチにする方法。

もうひとつは縦横それぞれ半分の24×24ピクセルのデータに作り直す方法。

見た目やっぱり残念ですが、アプリがいい感じになるように色々やってくれても、残念ながら限界はあるのです。

画像データをなるべく劣化させずに扱うには

まず、事前に、最終的にどのように使用されるか、Webで使用するのか、それとも印刷で使用するのかを確認する。

Web表示で使用する場合、一般的なのは、フルHD(1920×1080ピクセル)、最近だと4K(3840×2160)も増えてきています。このサイズの書類をつくって絵を描くなり写真を編集するなりして、拡大縮小をなるべく避ける。大きさを変える必要がある場合、すこし大きめに作って縮小する、などの工夫で、画像の劣化が多少避けられます。

印刷に使用する場合、さらに高解像度の(めっちゃピクセルが多い)データが必要になりますが、今回は省略。

お客さま
お客さま

なるべくかんたんに説明すると言ったな?

G3
G3

あれは嘘だ。しかもつづく

Follow me!

PAGE TOP