2006年 07月 10日
web用画像の解像度変更と再保存
突然ですが、初級講座を始めます。(^_^;)

コンテンツは、いきあたりばったりで、統一性がないと思いますが、ご容赦下さい。


* * * * * * * * * * * * * * * * * *


今回は、メールに添付したり、webにアップするために、Photoshopで画像の大きさを変える方法を解説します。
解説は、PhotoshopCSの画面で行います。


この場合に使うのが、「画像解像度…」のダイアログです。

メニューバーから、イメージメニュー>画像解像度…をクリックします。

f0075955_1994165.jpg


すると、下のようなダイアログ(ウインドウのことです)が開きます。

f0075955_19262437.jpg


このデータは、EOS5Dのデータで、画像の大きさは、「ピクセル数」というところで表されています。
4368 x 2812 = 12,719,616ピクセル(=1,270万画素)あることを示しています。

その下の「ドキュメントのサイズ」は、このデータに対して、出力解像度を固定して考えた場合には、その時の表示の大きさを、どれくらいの大きさに出力するかを考えた時には、その出力解像度(精密度)がどうなるかを知るものです。
出力とは、モニタ表示や、プリントのことを指します。

今回は、ここはいじりません。
初心者の方は、pixelという単位に慣れていないので、下の「ドキュメントのサイズ」内に見える、馴染みのあるmmという単位にひかれ、ここの数値を変えようとしますが、今回は、ピクセル数のほうを変更して、データの大きさを変更します。

ただ、「ピクセル数」を変えると、「ドキュメントのサイズ」も連動して動きますし、「ドキュメントのサイズ」や「解像度」を変更しても、「ピクセル数」変わります。
(ただし、「画像の再サンプル」がオンになっている場合。)

従って、ここでweb用だから、「解像度」を72dpiという変更をすると、確かにピクセルサイズも小さくなります。
しかし、このダイアログでは、元画像が350dpiの設定になっていましたが、必ずしもいつも350dpiになっているわけではありません。
カメラから直接プリント出力することも考えて、カメラ内で180dpiになっているものもありますし、72dpiが初期設定になっているものもあります。

また、web用ということで、出力解像度を72dpiにするという考え方は、誰もがみんな72dpi、つまり、1インチあたり72個のドットで表示される密度のモニタを使っているという前提に立ったものです。
ですが、今は、いろんな表示解像度とインチサイズのモニタがありますので、必ずしもモニタ表示が72dpiではないのです。
つまり、相手の環境によって表示される大きさが違っているのです。
従って、物理的に何センチ、という設定は、相手も同じモニタで見るのでなければ、あまり意味がありません。
それにより私は、ファイルそのものピクセル数を変更する方が良いと考えています。

「縦横比を固定」「画像の再サンプル」のチェックボックスに、チェックが入っていることを確認して下さい。
入っていなかったら、チェックを入れて下さい。

この画像で、青くなっている箇所、幅4368 pixel を、600 pixel に変更してみます。

f0075955_19353171.jpg


すると、それにつれて、高さが400 pixel になったことが分かります。
「ピクセル数」の横には、変更後のファイル容量が出ています。
変更前はいくつだったかも、書かれています。

これにより、ファイル容量は、36.4MBから、703.1KB(約0.7MB)に減りました。
メールや、webにアップするのに、さほど問題のない容量です。

この時、ドキュメントのサイズも小さくなっているのが分かると思います。
ですが、解像度のところは、350dpiのままです。
それでも、ファイルは小さくなっています。
よく、web用だから、ここの数値を72dpiだとか、96dpiにしなくてはいけないのではないかと思ってらっしゃる方が多いですが、ピクセル数の変更が、そもそもの「解像度変更」の意味なので、出力解像度の350dpiとか、72dpiとかは、データそのものの大きさを変えることには関係しません。

私もこのややこしい「解像度」ということを理解するのに、かなり時間がかかりました。
そもそも、「解像度」という言葉が、その時々によって指しているものが違うのに、同じ用語が使われているのが、混乱のもとであると考えています。

データのピクセル解像度(画素数)と、出力解像度については、後日書きます。


いま、何の断りもなく、画像の長辺サイズを600ピクセルに変更しました。
なぜ、600ピクセルにしたかというと、メール添付やweb掲載の目的は、相手側のパソコンで、適度な大きさで確認することが、第一であろうと考えたからです。

一般的に使われている、17インチくらいのパソコンモニターは、画面の解像度が1024 x 768 ピクセルのものが多いです。
高解像度なものでは、1280 x 1024ピクセルのものもあります。
画面サイズが大きくなると、1600 x 1200 ピクセルとか、1920 x 1200 ピクセルという横長のものもあります。

メールやwebの画像は、これらのモニタ解像度の中に収まれば十分です。
それ以上の大きいデータの場合、ソフトが自動縮小して表示してくれるのでなければ、画面いっぱいにウインドウを広げても、画像の一部しか表示されません。
また、ソフトが自動縮小してモニタに表示してくれても、オリジナルデータのサイズは大きいままなので、転送や表示に時間がかかります。

ですので、「モニタで確認」すればいいデータの場合、「相手側のモニター内に収まるサイズ」ということを念頭に置きましょう。
しかし、相手がどのような解像度のモニタを使っているかは分かりません。
そこで、小さめの1024 x 768 ピクセルのモニタでも、問題なく表示できそうなサイズということで、長辺600ピクセルというのが、まあ、妥当な線だということになります。
600ピクセルなら、縦位置の画像でも、スクロールなしに見られるはずです。

以下に、今回縮小した、600 x 400 ピクセルの画像を載せておきます。

f0075955_2010629.jpg


これが、いまここをご覧になっている方のモニタの中で表示される、600 x 400 ピクセルの画像のおおきさです。
実際、これがモニタ上で何センチに見えているかは、それぞれの方のモニタインチサイズと解像度によりけりなので、まったく分かりません。
このことは、重要なことなので、よく理解して下さい。

この画像は、私の21インチ、1600 x 1200 ピクセルのモニタでは、長辺が12センチに表示されています。
PowerBookの15インチ、1280 x 854ピクセルのモニタでは、逆に大きく、15センチに表示されています。
では、あなたのモニタでは、どれくらいの大きさでしょうか?

12センチというと、L判写真よりもちょっと小さいくらいですが、これをもってして他の人のところでもL判くらいに見えるだろうと思うのは間違いです。
最近では見かけなくなりましたが、15インチモニタで、解像度が800 x 600ピクセルというものもあります。
私が最初に買ったiMacなどはそうでした。
そういう環境で上の画像を開くと、かなり大きく表示されます。
印象としては、2L判くらいに見えるのではないでしょうか?
そのように、受け手の環境によって、送り手とは同じように表示されないものだということを頭に入れておいて下さい。

いま、600ピクセルは、例として設定しました。
これよりも大きくても、小さくても構いません。
ただ基本は、受け手側で見やすい大きさ、ということです。
また、送受信とも、ストレスが少ない事というのも重要です。
それに関しては、以下に書きます。


さて、Photoshopで解像度を変更したら、その画像を再保存しなくてはいけません。

この場合には、ファイルメニュー>別名で保存…を使います。

ここも重要なところで、上書き「保存」しないようにご注意下さい。
必ず「別名で保存」を選びます。
(「web用に保存…」という方法もあり、ほんとうはそちらを使う方が、web用画像を作るのには良いのですが、その解説も、次回に回します。)

上書き「保存」して、画像を閉じてしまうと、もうオリジナルの状態には戻せません。
慣れれば「別名で保存」を選ぶのを間違えないですが、ケアレスミスを防ぐためには、画像を開いたら、すぐに「別名保存」する、という手もあります。
そうすれば、オリジナルの複製を作成したのと同じ事になるので、その後変更を加えて保存しても、オリジナルはもとのままです。
先に「別名で保存」してから作業を始めた場合は、その変更内容を保存する際には、今度は「保存」のほうを使います。
ちょっとややこしいかも知れませんので、機会があったら、別に解説します。

さて、「別名で保存…」を選ぶと、以下のダイアログが出ます。

f0075955_20364219.jpg


ここで、保存する場所と、ファイル名を決めます。
オリジナルと同じフォルダに保存する場合には、ファイル名を変更する必要があります。
別の場所(フォルダ)に保存する場合は、名前はそのままでも大丈夫です。

私の場合は、ユーザー>ピクチャフォルダ内に、「for web」というフォルダを新たに作って、その中に保存しているので、オリジナルのファイル名のままでも保存できます。
しかし、通常は、ファイル名が同じだと、オリジナルと混同する恐れがあるので、適当な名前に変えた方がいいでしょう。
例えばこの画像なら、tulipなどと変えるのがいいかも知れません。

ファイルフォーマットは、webやメール用には、JPEGを選んで下さい。
横の矢印をクリックすると、いろんなフォーマットが選択できますが、ファイルサイズが大きくなる恐れがあるので、基本的には、「web画像はJPEG」と思っておいて下さい。

カラープロファイルがsRGBならば、そのまま「埋め込み」にチェックを入れておいて下さい。

これでオーケーを押すと、下のダイアログが出ます。

f0075955_21175716.jpg


ファイルフォーマットにJPEGを選択すると、必ずこの「JPEGオプション」ダイアログが出ます。
JPEGは、保存時に「圧縮」と呼ばれる作業をし、ファイル容量をより小さくすることが出来ます。

その「圧縮率」を決定するのが、この「JPEGオプション」ダイアログです。
圧縮率の表示の仕方は、JPEGを扱えるソフトによってまちまちですが、Photoshopの場合は、0〜12の段階が選べます。
数値が小さい方が、「圧縮率が高い(高圧縮)」ので、ファイル容量が小さくなります。
数値が大きい方は、「圧縮率が低い(低圧縮)」ので、ファイル容量があまり小さくなりません。

圧縮率が高い方が、ファイルが軽くなるので、web用には良いのですが、圧縮を高めるに連れ、画質は悪くなっていきます。
上の画像は、このダイアログにあるとおり、「画質8」で再保存しました。
それによって、ファイル容量も703KBからずっと下がり、60.26KBになっています。
ファイル容量は、ダイアログの下段「サイズ」のところに表示されます。

60.26KBは、メール添付やwebアップロードに、まったく問題がないサイズです。
703KBは、画像のピクセルサイズから考えると、web用には重いと思います。
目安として、100KB以下と思っておいた方が無難です。
もちろんそれ以上でも、時と場合によっては構わないですし、お互いブロードバンド環境にあるならば、大きいファイルを送っても大丈夫なこともあります。

ですが、画質が、画面で見るのに十分なクオリティがあるならば、ファイル容量は軽いに越したことはありません。
そこで、フォーマットにJPEGを選択し、圧縮率で、画質とファイル容量の調整をすることになります。

Photoshopの場合は、この「JPEGオプション」ダイアログで、圧縮率を変えた場合に、画質がどう変化するかを、保存前にプレビューすることが出来ます。
プレビューのチェックボックスにチェックが入った状態で、画像オプションのスライダを動かしていくと、画像の質が変化していくことが分かります。
それを見ながら、「見た目」で画質が悪いと思わないところまで、スライダを下げていけば、画質とファイル容量のバランスが取れることになります。

この画質決定は、「見た目」です。
従って、個人の判断になるので、数値としていくつが適しているということはありません。

以下に、圧縮率を変えた画像を掲載します。
まずは、「画質4」、45.17KBの画像です。

f0075955_21543213.jpg


次に、「画質0」、34.78KBの画像です。

f0075955_21545374.jpg


これで見ると、「画質4」でも、それほどひどい、という感じではないですね。
今回の作例が、あまり細かい絵柄ではなかったせいもあります。
適当に作例を選んで書き始めてしまったので、画質を比較するのには、やや適切な画像ではありませんでした。(^_^;)

しかし、「画質0」は、明らかに画質が悪いのが分かると思います。
圧縮率を高めていくと、徐々にこういった感じになっていくと理解して下さい。

この作例よりは、自分でスライダを動かしてみて、画質がどうなるかを一度見てみて下さい。
画像の内容によっても、適正な圧縮率は変わります。
ちなみに、「写真帳」にアップしている画像などは、空のグラデーションのトーンジャンプが出来るだけ目立たぬようにと、「画質10」くらいで保存しているものもあります。
そのため、表示に時間がかかることがあります。
一般的には、web用には、「画質10」は必要ないと思いますが、画像にジャギーやJPEGのブロックノイズを出したくない時などには、低圧縮のままにしておくこともあります。


一気呵成に書きましたので、長くなりました。
読んだだけでは理解しづらいと思うので、Photoshopを操作して、実感としてつかんで下さい。
[PR]

by yukinyaa03 | 2006-07-10 19:28 | N氏のために…(初級講座)


<< ピクセルサイズに慣れましょう      PM-4000PXのプリンタプ... >>