WEB用に画像サイズを小さくする
>>
>>
>>
WEB用に画像サイズを小さくする
※おことわり
当Tipsは、当サイトの管理人が個人的に記述するもので、ここで書かれていることについて正確性、信頼性を保証するものではありません。(ただ、明らかに間違いと気が付いた時点で、修正はしていきます。)
また、記載内容を実施した結果については、一切の責任を負いません。
1-1
どうしてピクセルサイズを縮小する必要があるのでしょう?
WEB上で画像を扱うときは、ピクセルサイズとファイルサイズ、この二つが結構重要な要素なんです。この二つの要素、以外と混同している人は多いみたいです。 
主にデジタルカメラの性能の一部を表す指標として、画素数が2400万画素とか24メガピクセルとかいうものがあります。
これは記録できる画像のピクセルサイズを表したもので、一般的にはこの数字が大きいほど高画質と考えられています。
一方、液晶モニターで表示出来るピクセルサイズは1920X1080ピクセルなどが一般的です。画素数にしておよそ200万画素です。
このモニターで2400万画素の画像をフルサイズ(100パーセント)で表示した場合、画像の極一部しか表示できません。
実際には画像閲覧ソフトなどの機能を使って自由に縮小表示できるので問題はありませんが、ことWEB上に於いては、この縮小表示をするという機能がウェブブラウザにありません。
ウェブサイトの作り方で、自動的に縮小表示を実現しているかのようなサイトはありますが、これはHTMLの高度な機能を駆使して実現しているのではないかと思います。(これについては間違った認識をしているかもしれません)
これは約1600万画素の画像を等倍(100パーセント)表示させたモニターのスクリーンショットです。
画像の極一部しか表示できていません。(つまらない画像ですみません)
WEB用にはこれくらいが適当だろう。というサイズで表示したモニターのスクリーンショットです。
元画像を15パーセントで縮小表示しています。このことから、かなり大幅に縮小することが必要であることが分かります。
私のように単純で簡単なサイトしか作れないものにとっては、HTMLの高度な機能は少々(いや、かなり)ハードルが高いです。なので常に100パーセント表示のサイトになってしまいます。
ですので、モニターのウェブブラウザの中に表示される画像のピクセルサイズは、その全体を見やすく表示するために、オリジナルサイズからは相当縮小する必要があります。
現在、ギャラリーの作品のピクセルサイズは長辺720ピクセルでお願いしています。縦画像の多いポートレートの場合は、これくらいが見易い大きさの限界ではないでしょうか?
最近のウェブブラウザ(例としてInternet Explorer 10)はサイト表示そのものを縮小(又は拡大)表示する機能がありますが、画像のみを表示しているのであればそれでも良いかもしれませんが、それではサイトとしての見やすさが大きく損なわれてしまいます。
要するにウェブサイト上では、画像のピクセルサイズを小さく加工しないと、サイトでの表示が出来ないということなのです。
ファイルサイズについては後述します。
それでは、ピクセルサイズの縮小を行ってみましょう。
1-2
ピクセルサイズを縮小するにはどうしたらいい?
ここからは、例としてAdobe Photoshopでの操作について記述していきます。
ピクセルサイズを縮小する元画像を用意して、具体的に進めていきます。
用意した元画像は、cp+2015のFUJIFILMのブースで、自前のX-T1で撮影した画像です。使用したレンズはトライアウト用に用意されていた FUJINON XF56mm/F1.2 APD です。とても良く写るレンズで、シャープさも申し分なく、それでいて背景のボケが綺麗です。少々値が張りますが、いずれ入手したいと思っています。(元画像は被写体までの距離が長く、開放での撮影でしたが、被写界深度が深くなってしまって、背景を綺麗にぼかすということができませんでした。悪しからず)
縮小用に用意した元画像は、あらかじめ3000X2000ピクセルにトリミングしたものです。
(ここでは、それをさらに縮小して掲載しています。)
元画像の一部を等倍(100パーセント)表示した画像です。
それでは進めていきましょう。
Photoshopから画像を開きます。
イメージ > 画像解像度 をクリックして「画像解像度」のパレットを開きます。
縦画像なので、「高さ」を変更します。このとき、「幅」と「高さ」の関係が固定されていることに注意してください。
「高さ」を720(pixel)にします。「幅」が自動的に変更されます。(この場合、3:2が固定)
再サンプルにチェックを入れて、先ずは「自動」でOKをクリックします。
これで画像のピクセルサイズが変更されます。
ここで注意する点があります。
元画像にもよりますが、「再サンプル」を「自動」で行うと、かなりきつめのシャープネスが掛かるようです。
その画像の400パーセント表示を見てみましょう。(分かりやすくするために400パーセントに拡大表示する。)
拡大表示は ウィンドウ > ナビゲーター で「ナビゲーター」を表示させると便利です。
画像のエッジの部分(この場合は頬の部分)に明るい線が現れています。
これではせっかくの画像が台無しです。
縮小をやり直してみましょう。
ウィンドウ > ヒストリー で「ヒストリー」を表示させ、「開く」に戻ります。
もう一度 イメージ > 画像解像度 をクリックして「画像解像度」のパレットを開きます。
再サンプルを「バイキュービック法(滑らかなグラデーション)」に変更してOKをクリックします。
今度はどうでしょうか。(同じく400パーセント表示)
どうです? 違いが分かりますか?
いやなエッジがだいぶ緩和されたと思います。
このことから、ピクセルサイズを縮小する元画像は、あまりシャープ過ぎないほうが向いている。 ということが言えると思います。
でも、そのままでは少し眠い感じの画像になってしまうので、ピクセルサイズを縮小した後に、シャープネスを調整する方法について後で書きたいと思います。
以上の方法で縮小した画像がこれです。
ピクセルサイズ 720X480pixel (129KB)
ちなみに、モデルさんが手に持っているカメラは、FUJIFILMの新製品 XQ2 です。コンパクトで良いカメラだと思います。色もなかなかオシャレですね。
ピクセルサイズの縮小については以上です。
次はファイルサイズの縮小について書きます。
1-3
画像のファイルサイズってどうすれば小さくなるの?
デジタルカメラで撮影するときに、画質の設定を選択できますが、このとき「FINE」とかを選ぶよりも、「NORMAL」とかを選んだほうが、同じ容量のメモリーカードでも撮影可能枚数が多くなります。
これはメモリーカードに記録されるファイルサイズが、小さくなるためです。
JPEG画像の特性というか特徴のようなものとして、画像を記録するときに画像データを高度に圧縮します。
圧縮の度合いにより画質が変化し、高圧縮なほど低画質になります。
高画質(低圧縮)なほどファイルサイズが大きくなりますが、ファイルサイズの大きな画像はWEBサイト用には不向きです。WEBサイトで表示する画像はできるだけファイルサイズを小さくし、ダウンロードに負担を掛けないようにすることが肝要です。
また、画質の他にピクセルサイズを縮小することでも、ファイルサイズは小さくなります。
それでは具体的に進めていきましょう。
A
B
C
D
上の4枚の画像、見分けがつきますか?
ピクセルサイズを縮小後、JPEG保存時に圧縮レベルを変えて保存した画像です。
建物の右側壁面に注目して下さい。 壁面の水平方向に線がありますが、その解像度を見れば分かります。
Aが一番はっきりと見えます。Bは少しぼやけています。Cはだいぶぼやけています。Dは殆ど線がありません。
今度は手前の木々に注目してください。 手前の木々では殆ど見分けがつかないと思います。
JPEG圧縮は圧縮し易い箇所を積極的に圧縮するという特徴を持っています。 ですので、手前の木々についてはそれほど差が無い圧縮になっているのではないかと思います。
建物の描写を重視するのであればA。そうでなければBかCを選ぶべきでしょう。 それは何故か? ファイルサイズが違うからです。
ファイルサイズはAから順に A:448.5KB、B:210.7KB、C:147.1KB、D:102.5KB です。
画像の中の何を重視するかで圧縮レベルは選択するべきだと思います。 
Photoshopでの具体的な操作について書きます。
WEBサイト用にピクセルサイズを縮小した画像は、必ず別名で保存をしましょう。
ファイル > 別名で保存 を選択します。
ファイル名を入力するところで、この部分に注意してください。
ICCプロファイルが「sRGB」になっていることを確認してチェックを入れます。
もし Adobe RGB になっていたらプロファイル変換を行ってください。
プロファイルの変換は、 編集 > プロファイル変換 をクリックして「高度なプロファイル変換」パレットを開きます。
「RGB」を選択してプロファイルにsRGBを指定した後、OKをクリックします。
元に戻って続けましょう。
ファイル名を入力して「保存」をクリックすると、JPEGの画質を調整するパレットが開きます。
プレビューを見ながら画質のスライダーを右から左にスライドさせていき、我慢できる画質のところでOKをクリックします。
ベースラインは「最適化」を選択しておきます。
スライダーの右側にファイルサイズの表示があります。
このファイルサイズが画質とともに変化していきますので、この部分も参照しながら最適な圧縮レベルを選択します。
OKをクリックして完了です。
以上、長々と書きましたが、もし参考になる人がいたら幸いです。
Copyright © URANCHAN.NET. All right reserved.