Webページで使用した画像を印刷に流用してみるととても粗い画像で仕上がってきました。
綺麗に見えていた画像が他のメディアで使用すると粗くなってしまう。
こちらのオフィスでは、その原因について考えていくようです。
画像を構成するピクセルとはなにか
博士～
画像が粗くなってしまったようじゃの？
そう、Webページで使用した画像をカタログに流用して印刷したら
ふむふむ
粗くなってしまった
……メインで大きく使っている画像じゃな？
そう。他の写真に比べてすごく粗い。なんでこんなになったのか
おそらく画像の解像度が低いのではないかの
解像度ってなに？
それでは解像度を説明する前に、ピクセルについて解説しておくとしよう
よろしくお願いします
ふむふむ。ちょっと画像を拡大して見てみよう
どんどん画像を拡大すると細かいブロックになるじゃろ
なるなる
このブロックをピクセル（Pixel）と呼ぶよ
ピクセル。ふむふむ
ピクセルが多いほど画像を細かく表現できて、逆に少ないほど画像の表現は粗くなってしまう
それじゃあもしかして、カタログに使った画像が粗くなってしまったのは、このピクセルが少なかったから？
そのとおり。じゃが、もう一つ大切な条件があるよ
解像度と見た目のサイズの関係
大切な条件とは？
画像をレイアウトに配置して、実際に目にするサイズじゃな
実際に目にするサイズというと？
印刷されていたり、画面に表示されたときの実際のサイズで、物差しで何センチと測れる状態のサイズじゃよ
なんで大切なの？
同じ画像を、メインのイメージで使用するのとアイコンで使用するのでは使う大きさがちがうじゃろ？
そうね
大きさが変われば、必要なピクセル数が変わると思わないかね？
あ、確かに！
それにくわえて、メディアの違いにも注意してほしい。同じレイアウトのページでも、パソコン画面に表示されたサイズとスマートフォンに表示されたときでは大きさが違う場合があるじゃろ？
確かに。そうなるとパソコンやスマートフォンとか、メディアの違いで必要なピクセル数が変わってくるってこと？
そうそう。画像を綺麗に見せるためにピクセル数がどれくらい必要になるかは、目で見たときのサイズを気にかけてほしいんじゃ。当然印刷した時のサイズにもね
ふむふむ。実際の見た目のサイズに注意ね
実際に見たときの画像サイズの中に、ピクセルの数がいくつあるか表す言葉を「解像度」と呼ぶよ
それがさっき言ってた解像度か……。つまり、解像度はピクセルの数と使用サイズの関係性のことなのね？
そのとおり。使用サイズに対してピクセル数が多ければ解像度が高い、少なければ低いというわけじゃ
なるほど。Webページでは綺麗に見えて印刷で粗くなってしまったのは、見たときのサイズがWebページより印刷の方が大きくて、必要なピクセル数が多かったってことね！
印刷に必要な解像度の考え方
画像が粗くなったのは、使用するサイズに必要なピクセル数が足りないから、ということで合っておる。じゃが、印刷するときの解像度でもう一つ注意しなければならいことがあるんじゃ
注意しなければならないこととは？
同じ見た目のサイズでも、印刷する方がパソコン画面より必要なピクセル数が多いということじゃ
ん、そうなの！？ 印刷で必要な解像度っていくつなの？
175線のオフセット印刷だと350dpi必要とされるよ
わからん言葉が出てきた。線とかdpiとか何なの？
どちらも解像度を表す単位じゃが、わかりにくいかもしれないね。ピクセル数で表現してみるとしようか
よろしくです
印刷で必要な解像度は先ほど話したように、175線のオフセット印刷で350dpiとされる。例えば10cm四方の画像でこの解像度に必要なピクセル数を計算すると、大体1400ピクセル×1400ピクセルになるよ
ふむふむ
10cm四方の画像で1400ピクセル×1400ピクセル必要である、と数字を覚えておけば他のサイズに必要なピクセル数は計算で出しやすいんじゃないかの？
なるほど、じゃあ例えばA4は21cm×29.7cmだから……高さ2倍、幅3倍くらいだから……2400ピクセル×4200ピクセルくらいかな
そのとおりじゃ。では同じように粗くて問題になった先ほどの画像について考えてみよう
了解
画像が印刷ページに掲載されるときのサイズはどれくらいかな？
えーと、本はA4サイズで、画像はだいたい高さ15cm、幅10cmくらいで掲載される感じ
印刷に必要な解像度の数値に換算すると、必要なピクセル数はいくつになるかね？
必要なピクセル数は10cmで1400ピクセルだから、高さが1.5倍、幅はそのままね
ふむふむ
高さ2100ピクセル、幅は1400ピクセル必要になる！
そうじゃね。その数字を覚えておいて使用する画像のピクセル数を確認してみよう
画像のピクセル数の調べ方
……どうやってピクセル数を確認するんだっけ？
画像を扱うアプリケーションがあればそちらで確認できるし、Adobe Bridgeがあればそちらでも調べられるよ
……どれもない場合は……
Windowsの場合は『プロパティ』で。Macであれば『情報を見る』で確認できるよ
お、なるほど……。それで調べると……画像のピクセル数は高さ450、幅300だね
比べると元のピクセル数は、必要な解像度に対して4分の1ほどしかないとわかったわけじゃね
だからあんなに粗い画像になってしまったんだね
そういうことじゃね。では、今回のことをまとめてみようかの
今回のまとめ
1．画像はピクセルという小さなブロックが集まって表現されていている
2．ピクセル数と使用サイズ（実際に目にする際のサイズ）の関係性を解像度と呼ぶ
3．使用するサイズに対して画像のピクセル数が多いことを解像度が高いといい、よりきめ細かな画像の表現ができる。逆に少ないことを解像度が低いといい、画像が粗くなる
4．175線の印刷には350dpiの解像度が必要。ピクセル数で換算すると、10cm四方の画像で1400ピクセル×1400ピクセル必要だと覚えておく
こんな感じかの
了解です。なんとなく理解したけど……印刷に必要な解像度が画面と違うというのがなんだかモヤモヤする
なるほど。では次回は印刷物の解像度について、もう少し掘り下げて話をさせてもらえたらと思うよ
よろしくお願いしまっす！
画像を構成するピクセルと解像度の仕組みを知ったモーちゃん。
メディア間の解像度の関係性が気になりだしたようです。
次回、『dpiとはなにか：印刷に使われる網点、線数とdpiの関係性を解説』へ続きます。
こちらは画像の関連記事です
