さいしょに

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

まあこれですね。

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

解像度とは

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

画像解像度の単位

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

ちょっとやってみよう

では実際に手を動かして確認してみます。
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インチあたり何ピクセルある」が変動します。
冒頭の画像を再掲しときます。

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

次回に続きますっ