「画像解像度」の理屈がわからない人にどこまでわかってもらえるかわかるためのテスト(2)

前回の続きです。

いったんおさらい

3度目の使い回しになりますが、配置先で同じ画像を大きく使うと解像度は下がり、小さく使うと解像度は上がります。

…から、それぞれ1ピクセルだけ抜き出してみると、こんなかんじです。

ピクセルが小さい → 細かい、解像度が高い
ピクセルが大きい → 粗い、解像度が低い
ということです。


いきなりまとめ

・画像ファイルに設定した画像解像度は原寸100%で配置した時のもの
・同じ画像ファイルでも解像度は配置寸法に応じて変動する


先にまとめてしまっちゃいましたが…
以下しつこく検証していきます。

Photoshopで画像解像度を変えてみる

まどろっこしいですが、今度は配置先でなくPhotoshop上で画像ファイルを直接いじってみましょう。
てきとうな画像を開きます。いつものですけど。

そして「画像解像度」。
これは自分の画像なので、みなさんの手元の画像は値は違っているかと思います。

では、いじりましょういじりましょう。

  1. 「再サンプル」のチェックをはずす
  2. 「解像度」の単位を「pixel/inch」に
  3. 「解像度」の値を 1 に
  4. 幅・高さの単位を「inch」に
  5. 「OK」ボタンはまだ押さずに観察

の結果。

前回でやったとおり、解像度 1ppi は「1インチあたり1ピクセル」なので
1ピクセルの大きさは1インチ」となります。
それで幅・高さの表示をinchに変えたので、「寸法」のところで確認できるpx(pixel)の数と一致しました。

「OK」ボタンを押して「画像解像度」の変更を確定します。

この操作で、解像度を 72ppi から 1ppi に変えました。
画像の見た目、変わったでしょうか?

\ 変わってませーん /


解説

今回、「再サンプル」を無効にしました。この場合、画像のピクセル数は変更されなくなります。
それで解像度を上げ下げすると、幅・高さが自動で下げ上げされることになります。
逆に幅・高さを上げ下げすると解像度が自動で動きます。
これは配置先で配置寸法を変えた動きとおなじ理屈となります。


解説の解説

「でも幅と高さが変わったのに画面表示は変わってないじゃんすか」
と疑問が沸いた方は、お目が高い。と同時に、まだ知らない。
Photoshopで画像を表示するときは、ディスプレイ(モニター)のピクセル等倍表示が基準の「100%」なのです。
解像度も幅も高さも関係なく、ピクセルの表示が拡大縮小されているか、が表示%の指標となります。

画像の最小単位はピクセル、ディスプレイ表示の最小単位もピクセルです。画素ともいいます。
ディスプレイ解像度はPCからの設定で変えられますが、 Photoshopいじってる最中にディスプレイ解像度は変えられません(再起動しろと言われてしまいます)。
なので、ここではディスプレイ解像度は固定されたものだと考えます。

なので、ピクセル数が変わらない限りは、Photoshop上では見た目は変わらない、ということです。


解説の解説の解説

単純な例で、200%拡大表示したとき、画像の1ピクセルは、ディスプレイの2×2ピクセルを使って表示されます。
反対に50%縮小の場合、最小単位であるピクセル1つの中に、画像のピクセル2×2を入れるわけにはいかないので、各ピクセルがまざった平均カラーで表示されます。

200%表示
50%表示

このため、モノクロ2階調やインデックスカラーの画像でも、表示はちゃっかり中間色で表現されたりしています。

このあたりは、スクリーンショットをとって、めちゃズームするとわかりやすいです。

モノクロ2階調をグレースケール経由でダブルトーンにした擬似インデックスカラー
画像を拡大表示したもの
縮小表示のスクリーンショット…を拡大表示したもの

縮小表示のときだけずるいことをしてきれいに表示させているかのような言い方をしましたが、
拡大表示のときも、200%などときっちりした倍率じゃないときは同様です。
これもスクショで確かめてみるとよいです。実際のピクセルにはない中間色で表示されていますね。

ちょっぴりはんぱな拡大表示
ちょっぴりはんぱな拡大表示のスクリーンショット…を拡大表示したもの

なんだか脱線したような感じもしますが、
Photoshopの表示倍率はピクセルが対象で画像解像度とは無関係なことがおわかりかと思うんです。

次回は再サンプルにチェックを入れてみるやつです。
つづく

「画像解像度」の理屈がわからない人にどこまでわかってもらえるかわかるためのテスト(1)

さいしょに

画像解像度の概念だの理屈だのって、自分はPhotoshopをいじってるうちに自然に理解できたクチだったんですが、わからなかった人にどう説明したらわかるのか、というのを考えてみたテストです。
わからなかった時期が自分にもあれば、こうしたらわかりやすかった、とかあったのかも。
うちの現場の古参の中にも案外わかっていない人がいる気がしてて。

まあこれですね。

そんなわけで、じわじわやっていきましょう。
ここではPhotoshopを使います。
これを機に、わかりたいという方はゼヒ読んでいただき、奇譚のない美辞麗句をください。

解像度とは

最近は画像以外のことでも、知見や掘り下げが深いと思ったものに対して「解像度が高い」なんて言い方をするようになってますね。
要は、「細かさ」ってことですね。画像でいえば解像度は「ピクセルの細かさ」であり、「ピクセルの大きさ」です。
「ほそかさ」って読んだ子はあとで話があるので残ってなさい。

画像解像度の単位

気軽に「ppi」とか言われてますが、pixel / inch の略です。スラッシュは per(パー)と読むです。
これは、画像1インチあたりに何ピクセルある、という意味です。
ここでこまかい数字なんか出すと難しい印象を与えてしまうので、やりません。

ちょっとやってみよう

では実際に手を動かして確認してみます。
Photoshopで「新規」。
実務に悪影響があるといけないので、「新規ドキュメント」画面では何もいじらずOKボタンでいいです。

新規ドキュメントを開いたら、メニュー「イメージ」から「画像解像度」を出して、
さあいじりましょういじりましょう。
※カンバスが真っ白だった場合、別の色で塗りつぶしておくとあとでわかりやすいです

スクショを参照して、以下の手順。

  1. 「再サンプル」にチェックを入れる
  2. 「解像度」の単位を「pixel/cm」に変更。これで「1cmあたり何ピクセル」となる
  3. 「解像度」の値を 1 に
  4. 幅・高さの単位を「pixel」に
  5. 幅・高さの値を 10 に
  6. 最後に「OK」ボタン

これでいったん保存。場所や名前、ファイル形式はてきとうで。
各界隈ではpixel/inchが一般的ですが、うちらはメートル法で育ったので、
わかりやすさ優先でpixel/cmで画像をいじり回して理解を深めましょう。

ちょっと配置してみよう

次に、画像を配置してみるテスト。
シェアや認知度の問題で、例ではIllustratorを使います(すまんっ俺のInDesignちゃん、すまんっ)。
環境設定 > 単位 > 一般 を「ミリメートル」にしておいてください。
(「センチメートル」もありますが、あまりにも小学生じみているのでミリがいいです(個人の感想です))。

Illustratorで「新規」。これも、何もいじらずOKボタンで作成していいです。
ここに、保存しておいた画像を配置してみます。情報を残したいので「埋め込み」ではなく「リンク」での配置がのぞましいです。
配置したら、画像が選択されたままで各種パネルで寸法(W:幅、H:高さ)を確認してみてください。
どでしょ。100×100mmになりましたか。なっていなかったら操作をどこかで間違えています。

ここまでの解説

作成した「10×10pixel で、画像解像度:1pixel/cm の画像」について、
1cmあたりのピクセル数が1、つまり1ピクセルの大きさがぴったり1cmである、ということになります。
寸法は指定しませんでしたが、幅と高さをそれぞれ10ピクセルにしたので、
「1cmが10個」と指定したことになり、寸法はおのずと「10cm」に決まります。
まだ深く考えなくて大丈夫です。大丈夫ですよ。

解像度を変えてみる

最初に作成した画像を開いて、「画像解像度」で解像度をいじってみましょう。

  1. 「再サンプル」にチェックが入っているのを確認
  2. 「解像度」の単位を「pixel/cm」から「pixel/inch」に変更。
  3. 「解像度」の値が「2.54」に変わるので、「1」を入力
  4. 幅・高さの値が「4 pixel」に変わるので、「10」を入力
  5. 最後に「OK」ボタン

これを別名で保存。以下「画像2」とします。
またIllustratorに画像2を配置してみましょう。
今度は1インチあたりが1pixelです。1インチは25.4mmです。つまり1ピクセルが25.4mmの大きさ。
なので幅・高さとも 25.4mm × 10 = 254mm になりました。でかいですね。A4サイズのアートボードにおさまりません。

配置寸法を変えてみる

次に、「ドキュメント情報」パネルを開き、フライアウトメニュー(右上の ≡ )から「リンクされた画像」を選択。

画像の情報が出たら、じろじろ観察してみましょう。
何も出てなかったら画像2を選択してみてください。

寸法や解像度が確認できますね。Photoshopで見た設定どおりです。
各単位は環境設定に関係なく決まった単位で表示される仕様なので注意。
とくに「寸法」は単位がpointですね。ほっときましょう。

この画像2を、10%(10分の1)に縮小してみましょう(やり方わかりますね?)

それでドキュメント情報パネルを再びじろじろ…
・pixel数は変化なし
・寸法は10分の1
・解像度は10倍
になりました。

ここまでの解説

配置先で画像2の寸法を縮小したことで、解像度が上がりました。
寸法を半分にすれば解像度は2倍に、10分の1にすれば10倍になります。
反対に、寸法を拡大していくと解像度は下がっていきます。

いったんまとめ

配置先で画像の寸法を拡大・縮小すると、画像を構成しているピクセルも同時に拡大縮小されます。
つまりpixel/inchの「1インチあたり何ピクセルある」が変動します。
冒頭の画像を再掲しときます。

絵柄の寸法の大きい小さいに惑わされず、ピクセルが大きいか小さいか、だけを見ましょう。

次回に続きますっ