
綺麗に撮れた写真をPhotoshopで編集していざ保存した時、パソコンやブラウザで写真を見るとアレッ?と疑問に思うことはないだろうか。編集時は綺麗だったのに、JPEG保存すると画質がどこか劣化しているように見えて、何だか昔のコンデジで撮った写真のようだ。
RAW現像したデータをJPEG保存すると、データが圧縮されるので、画質が劣化し、ある程度の階調性は損なわれてしまう。それでもJPEGデータの写真でも、人間の目で見る分には充分綺麗な写真だ。
コンデジ並みに画質が劣化しているように見えるのには幾つかの原因が考えられる。今回は、デジタルデータの写真を綺麗に保存する方法を検証していきたい。
png形式で保存する
png形式で保存すると、編集中の綺麗な画像のままで保存できる。
問題はファイルの容量が大きくなることだ。最近のウェブブラウジングはスマートフォンが主流となってきており、インターネット利用者全体の60%を占めるまでになった。スマートフォンでの大きい容量の写真は、ブラウザ表示の際に時間がかかり、ユーザーの負担になりかねない。
また、スマートフォン表示の場合、pngでもJPEGでも、あの小さな画面で見た場合に、そんなに画質が変わらない可能性もある。
png形式で保存すれば、綺麗な写真をウェブに表示させることは出来るが、果たしてそこまで綺麗な写真を載せる必要があるのだろうかという点もある。例えば大変な思いをして撮影した写真を、無料で誰もが見ることが出来るインターネットの場で公開することに意義はあるのだろうかという点だ。
つまりは悪意のある人間に、ブログに掲載した写真を勝手にダウンロードされて、ウェブや印刷物の形で商用利用される恐れもある。個人がブログに無料で公開していた空港の写真が、無断使用厳禁の注意書きにもかかわらず、プロのデザイナーに無断使用された過去もある。業界のルールに精通しているプロでさえ著作権法違反に問われるようなことをするご時世なのだから、インターネットの無料サービスに慣れている一般人なら、いわんやをやである。
pngで綺麗な写真を載せるか、JPEGで圧縮したやや劣化しているが綺麗に見える写真を載せるか、選択は当人に委ねるしかないが、上記2点の問題があることを頭の片隅に覚えておいても損はないだろう。
余談だが、png形式の画像ファイルが便利なのは、透過出来る点だ。例えば白抜きの黒い丸のアイコンを作るとして、それをウェブで表示させる場合、背景を緑にしても赤にしても青にしても、透過pngなら綺麗に表示させることが出来る。黒の描写の部分以外は透明になり、透過できるためだ。
JPEGで保存する
ウェブに写真を上げる際に一般的なのが、やはりJPEG形式での保存だろう。一般的な形式なので、保存方法が分かりやすく、ファイルサイズも小さく、尚且つ綺麗に保存することが出来る。pngと比べると階調が劣化するが、二つを並べて見比べてみないと分からない程度だ。
さて、PhotoshopでJPEG形式で保存する場合、画質を劣化させる幾つかの問題が発生する。一つはPhotoshopの新しい保存形式である「書き出し形式」を使用して保存した場合だ。この保存形式のメリットとデメリットは以下の記事でも書いたが、要するにファイルサイズは従来より半減するが、従来保存と比べて階調性が僅かではあるが損なわれてしまう点だ。
ファイルサイズを取るか、写真の綺麗さを取るかの選択を迫られるが、スマートフォン利用者が全体の6割となった今、ファイルサイズを大きくしてまで従来方式でJPEG保存する必要があるかという命題にも突き当たる。スマートフォンの小さい画面で見れば、その違いは分かりにくいか、全く差がない可能性もあるからだ。
この判断も甲乙付けがたいので、読者諸氏に委ねるとする。
解像度変更で再サンプルする際に気を付けるべき事
もう一つの問題点は、解像度だ。通常、編集中のRAWデータを、RAW現像ソフトからPhotoshopに移行させた場合、解像度はカメラの機種にも寄るが、250や350になる。これは印刷に適した解像度なので、印刷用途ならこのままで問題ないが、ウェブ表示用の解像度ではない。
そこで解像度を変更する手間が生じる。再サンプルにチェックを入れると、自動的に画像サイズも縮小される。解像度を72に変更すると、その分自動的に縮小処理されてしまうのだ。


それって便利じゃん、こっちで縮小表示する手間省けるし、と思われるかも知れないが、実はこの作業が、画質を劣化させる原因になりかねないのだ。
実際に作例を見て頂こう。1枚目は再サンプルにチェックを入れずに、画像保存時に画像サイズを変えた場合。2枚目は再サンプルにチェックを入れて、自動的に画像サイズを変更した後、画像保存時に更に少しだけ画像サイズを小さくして保存した写真である。


PCでご覧いただければ分かるだろうが、1枚目は綺麗だが、2枚目は酷い。無駄にキツくシャープネスがかかっているように見えて、まるで一昔前のコンデジで撮った写真のように劣化したように見える。
考えられる原因は、再サンプルにチェックを入れ、解像度を72に変更してリサイズされた際に、結果的にシャープネスがかけられていることだ。
再サンプルにチェックをいれると、以下のスクリーンショットのようなプルダウンメニューが有効になる。

この項目からいずれか適切な方法を選べば綺麗な写真のままリサイズされるが、自動に設定していたので、シャープネスがキツくかかった形になり、きめ細やかな街並みの描写のせいもあり、画質が劣化しているように見える原因となっている。
解決策としては、再サンプルで有効になるプルダウンメニューの項目から適切な方式を選ぶ事だ。ハイキュービック法、ニアレストネイバー法など小難しいカタカナが並んでいるが、プレビュー画面に結果が表示されるので、それを参考に適切な画像になる方法を選べば良い。
どの方法が良いか分からない場合は、再サンプルのチェックを外して解像度を72に設定し、JPEG保存時に画像サイズを希望するサイズに変更するのが無難な方法となる。その場合はデフォルトで、バイキュービック法が選ばれる。

ちなみに再サンプルにチェックを入れて、バイキュービック法(滑らかなグラデーション)を選んでリサイズし保存すると、シャープネスがかからず保存できたが、若干描写に違いが出た。縦幅も1pxだけ長くなった。

いずれまた別の機会に、バイキュービック法、ニアレストネイバー法でリサイズした場合の写真の違いを比較した記事を掲載したい。