タグ:初級講座 ( 3 ) タグの人気記事

2006年 07月 11日
JPEGの圧縮率と画質
JPEG圧縮率の違いによる、画質の変化を掲載します。

保存時にJPEGで保存する場合、オリジナルが非圧縮のファイル(RAWから展開したファイルなど)の場合と、すでに圧縮されたファイル(JPEG)では、同じ圧縮率でも、画質の変化が違ってきます。

デジタルカメラの画像は、JPEGが基本になっています。
一眼デジカメとコンデジの一部では、RAWも撮れますが、まずはデジカメ画像=JPEGと言えるでしょう。
プロの場合は、RAWから展開したTIFFやPSDで扱う事も多いですが、最初からJPEGで撮影してる方も多いです。
このあたりは、撮影ジャンルによって、違うようです。

JPEGは、すでにカメラ内である程度の圧縮がなされています。
たいていのデジカメは、このカメラ内での圧縮率を選べるようになっています。
メーカーによって名称や段階が異なりますが、例えば私のキヤノンのコンデジで言うと、「スーパーファイン」「ファイン」「ノーマル」の3段階が選べるようになっています。

作例は、そのキヤノンのA95という、500万画素のコンパクトデジカメで撮ったものです。
ですので、すでにJPEGになっています。
元画像は、「スーパーファイン」(低圧縮率)で記録しましたので、JPEGですが圧縮ノイズはほとんど分かりません。

これを、再びJPEGで別名保存してみました。
なお、ピクセルサイズは、各辺が1/4になるように(つまり全体サイズは1/16にリサイズ)縮小しました。
(バイキュービック法(シャープ)利用)
縮小によって、多少シャープネスが落ちましたが、シャープネス調整はしていません。

画質10 / 259KB
f0075955_12381275.jpg

画質8 / 200KB
f0075955_12393694.jpg

画質5 / 168KB
f0075955_124029100.jpg

画質3 / 153KB
f0075955_12411559.jpg

画質0 / 135KB
f0075955_12421675.jpg


画質0は、たぶん、通常は使われないものと思います。
JPEGオプションダイアログのプリセットでも、「低(高圧縮率)」を選んでも、「画質3」止まりですので、実用としては考えられないでしょう。

上の画像で見ると、web用として画質的に満足できるのは、5〜8くらいではないでしょうか?
プリセットでは、「中」が「画質5」、「高」が「画質8」、「最高(低圧縮率)」が「画質10」です。

f0075955_9333586.jpg

この、「低(高圧縮率)」、「最高(低圧縮率)」というの、なんだか分かりにくい用語ですよね。
要は、圧縮を高めると、画質が低下する、と覚えておいて下さい。

画質5〜8くらいが良いのではないかと書きましたが、画面上で見る場合と、再保存したJPEGをプリントや印刷原稿にしたい場合では、判断が変わります。

web用でしたら、画面で見た「見た目」で判断します。
私のように画質フェチなら8を選ぶのも良いでしょうが、絵柄を伝えるだけなら、5で十分だと思います。

それに対して、プリント用にするのならば、8以上にしておいたほうが良いです。
この作例で見るとおり、8と10では、ほとんど変わりがないので、プリントしても違いには気がつかないと思います。
このあたりも、「プリントしてみた見た目」で判断すれば良いのですが、保存場所や通信環境に余裕があれば、「画質10」で保存することをお勧めします。

ただ、JPEGで再保存するたびに、画質は劣化していきます。
「画質10」でも、多少ですが、劣化しています。
下の画像は、400%に拡大した状態の比較です。
これで見ると、「画質8」では、やはり「画質10」より劣化しているのが分かります。

f0075955_20112698.jpg

このことから、JPEGを再保存する場合は、本当はJPEGではなく、TIFFやPhotoshopのPSDで保存しておいた方が良いことが分かります。
しかしその場合は、圧縮されてないファイルの扱いになるので、ファイル容量は大きくなります。

プリント用にJPEGにレタッチを加えた場合は、別名保存に際して、JPEGではなくTIFFやPSDで保存したほうが良いでしょう。

web用には、JPEGにするしかないので、またJPEGで再保存することになりますが、ここでは100%表示で見た時に、劣化が分からないくらいまでは、画質を落としても構わないと思います。
通常このように400%拡大して見ることはないので、400%くらいまで拡大しないと分からないくらいのJPEGノイズだったら、大して問題ないとも言えます。
[PR]

by yukinyaa03 | 2006-07-11 13:12 | N氏のために…(初級講座)
2006年 07月 11日
ピクセルサイズに慣れましょう
昨日の続きです。

同じ画像を、解像度変更(ピクセルサイズの変更=画素数の変更)して掲載します。
これを見て、自分のモニタでは、どれくらいのピクセルサイズが、どのくらいの大きさに表示されるかを、実感としてつかんで下さい。

オリジナルは、EOS5Dで撮影した、1270万画素、4368 x 2912 ピクセルの画像です。
それを、解像度を変更して並べました。
解像度変更と、保存に関しては、今日は「web用に保存…」を使ったので、昨日のやりかたで別名保存するより、ファイルサイズ(容量)が軽くなっています。

「web用に保存…」については、またいずれ・・・。



50 x 33 px (1650画素)/ 5KB
f0075955_1111929.jpg

100 x 67 px(6700画素) / 9KB
f0075955_11115337.jpg

200 x 133 px (2万6600画素)/ 26KB
f0075955_11124986.jpg

300 x 200 px (6万画素)/ 55KB
f0075955_1113576.jpg

400 x 267 px (10万6800画素)/ 96KB
f0075955_11144920.jpg

500 x 333 px (16万6500画素)/ 148KB
f0075955_11153523.jpg

600 x 400 px (24万画素)/ 210KB
f0075955_11164531.jpg

700 x 467 px (32万6900画素)/ 288KB
f0075955_11174634.jpg

800 x 533 px (42万6400画素)/ 373KB
f0075955_1126515.jpg


ここのブログは、横幅800ピクセルまでしか、画像を表示できません。
それ以上の幅の画像を投稿しても、自動的にリサイズされて表示されます。


以下に、オリジナルが、幅800ピクセル以上の画像を掲載します。
ブログ上では、800ピクセルの画像と、違いが分かりません。
画像をクリックすると画像一覧の別ウインドウが開きますので、表示された画像をもう一度クリックして下さい。
(画像全体を見るには、ウインドウサイズを拡大するかスクロールして下さい。画像を閉じるには、右下にxマークがありますので、クリックして下さい。)

また、ここのブログでは、容量500KB以下に抑えないとアップできないので、1200ピクセル以上の画像については、圧縮率をほかの画像より高めてあります。
そのため、画質が低下してますが、ご容赦下さい。


1200 x 800 px (96万画素)/ 490KB(画像をクリックしてください。)
f0075955_1136318.jpg

1600 x 1067 px (170万7200画素)/ 494KB(画像をクリックしてください。)
f0075955_11383561.jpg


たぶん、重い画像を何枚も貼り付けたため、このページの読み込みが多少遅くなっていると思います。
このブログでは、800ピクセル以上の画像は、拡大して詳細を見て欲しいという意図以外には無意味です。
幅1600ピクセル以上の画像は、ほとんどの方は、スクロールしないと見れません。


ピクセルサイズの横に、画素数を書いておきました。
画素数は、縦横のピクセル数をかけ算したものです。
なので、ほんとうは「ピクセル数」と言った方がいいのですが、デジカメ画像については、「画素数」のほうが馴染みがあるので、画素数と書きました。

これで見ると、モニタで100%表示すると全画面を一覧できない場合もある1600 x 1067 ピクセルの画像でも、画素数は170万7200画素しかないことが分かります。
今どき、170万画素のデジカメなんて、webカメラ用以外には、ないのではないでしょうか?
携帯についているカメラでさえ、最新のものは300万画素以上あります。

デジカメが高画素を売りにしているのは、プリント時に精細に大きくできるということを謳っているのです。
ですが、メールやインターネットなど、モニタで鑑賞するための目的には、何百万画素は必要ありません。
むしろ、全画面が見られないとか、送受信に時間がかかるなど、弊害の方が多いです。
そのあたりを考えて、画像を最適化する必要があります。


以上は、受け手側がモニタで見ることだけを考えた場合の話です。
メールに添付した画像を、相手側でそれなりの画質でプリントして欲しい場合は、もっと高画素、高容量のファイルを送る必要があります。

このあたりを理解するには、やはり、「解像度」の理解が不可欠になります。

プリントサイズと解像度については、また今度解説します。
[PR]

by yukinyaa03 | 2006-07-11 11:43 | N氏のために…(初級講座)
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氏のために…(初級講座)