CG講座 P−Cat
P-Cat Ver.2.04 ・・・

第1講座 フォトショップ編

第5回 HP用に画像を圧縮してみよう!

さて、前回の講座で画像は完成しました。完成したら沢山の人に見てもらいたいですよね♪
だったらホームページで公開しましょう!その為には画像を圧縮して保存する必要があります。

前の講座で説明してある内容は詳しく説明いたしません。分らなくなった時は
下線のある文字をクリックしてください。以前の講座内容が別ウィンドウで開きます。)

画像解像度を変更する
図1 ・まず画像を圧縮して保存
する前に画像解像度を変更
しましょう。解像度の変更は
「イメージ」→「画像解像度」
(1-3 図1 参照)を選択して
下さい。開いたダイアログ
ボックス(図1)で変更したい
解像度を入力する理由ですが、
ではいくつにすれば
良いかと言うとWeb上では
「72pixels/inch」で十分だと
言われていますので
そのように設定して下さい。
この時ついでに、HPで表示
したいサイズにも、変更して
しまいます。
・まず「縦横比を固定」の
チェックボックスをオンにし、
「ピクセル寸法」で数値を
変更します。きっと最初は
ピクセルと言われてもピンと
来ないかもしれませんね(^-^;
一番最後に圧縮保存した参考
画像を載せますがその画像の
横幅は「300pixels」になっています。それを参考にして下さい。
・以上の設定を入力し終えたら、OKをクリックして下さい。これで画像解像度は変更されます。

では次に、圧縮ファイルの形式についてです。

圧縮ファイルの形式を知る
・現在ポピュラーなHP用の画像形式は「GIF(ジフ)」「JPEG(ジェイペグ)」の2種類です。
この他「PNG(ピング)」と言う画像形式もありますが、ブラウザのバージョンによっては対応してなかったり
多少ファイルのサイズが大きいと言う点から今回は省きます。
形式 拡張子 特徴
GIF *.gif ・最大の特徴は「インデックスカラー」で、画像で使用する色が最大256色
までしか使用出来ない。よって保存する際に使用する色を256色以内に 減色する。この減色によってファイルを圧縮する。
・使用している色数が少ない場合に有効。
JPEG *.jpg ・人間の目では気づきにくい情報を間引いて圧縮する。
その為良く見ると画像の中にノイズが入る。
・写真などの画像の圧縮に向いてる。
・平坦な色が続く、急激な色の変化がある画像などの圧縮向きではない。
・以上特徴を挙げましたが、実際に圧縮してみるまではどの画像はどの形式が良いかは解らないものです。
まず、両形式で保存して比べてみて下さい。これを数多く行えば、いずれどちらの形式が良いかの判断が
つくようになると思います。それではそれぞれの形式での保存方法を解説してみましょう。

GIF形式で保存
図2 ・まずGIF形式で保存するためには
画像モードを「インデックスカラー」に
変更する必要があります。
「イメージ」→「モード」→「インデックスカラー」
(1-3 図1 参照)を選択して下さい。すると
警告のダイアログボックス(図2)がまず
出ますが、迷わずOKをクリックして下さい。
するとインデックスカラーのダイアログボックス
図3)が表示されます。
・まずプレビューのチェックボックスがオンに
図3 なってるか確認して
下さい。これで変更
する前に、画像を
確認出来るように
なります。
確認しながら作業を
進めて下さい。
・あきらかに
256色より色数が
多い場合は、
ディザの種類を
「誤差拡散法」に
変更し、「同一色の
保護」のチェック
ボックスをオンに
すると綺麗に表示
されると思います。
・プレビューで確認
しながら色々試して、これでいいと思ったらOKをクリックします。
・次に「ファイル」→「データーの書き出し」→「GIF89a 書き出し」(図4)を選択します。 開いたオプションの
図4 ダイアログボックス(図5)で注目する点は、
「インターレース」のチェックボックスです。
・「インターレース」とはダウンロードの途中
モザイク状の荒い画像で表示し、徐々に
ハッキリと表示させるものです。
インターレースGIFにすると早い段階で画像の
内容がわかるという利点があります。
ただしファイルサイズが多少大きくなる事が
あります。インターレースGIFにしたい場合は
オンにして下さい。
・オフにして、通常のGIFにした場合は
上から順に表示されます。

・それともう1つは、「透過GIF」という文字を
目にした事がありますよね。「透過GIF」とは
画像上の任意の色を、透明に表示させるモノ
です。フォトショップの場合、GIF形式で保存
する前に「インデックスカラー」に変更して置くと

図5 複数の色、又は
保存した選択範囲を
透過させる事が
出来ます。
・透過させる色を選ぶ
場合はダイアログ
ボックス内の
「スポイトツール」を
選択し、画像上又は
下に表示されている
使用されているカラー
のボックスで透過
させたい色を選択
していきます。
この場合透過させ
たい色はあらかじめ、
表示させたい画像で
使用してない色で
塗りつぶして置くのが
良いでしょう。
・また透過させたい
部分をあらかじめ
選択範囲で保存して
置けば「透明度」で
選択出来ます。

JPEG形式で保存
図6 ・JPEG形式で保存する場合はまず余分なチャンネルを捨てて
下さい。 余分なチャンネルとは「赤」「緑」「青」の3つのカラー
チャンネル と「RGB」の合成チャンネル以外の「アルファチャンネル
(選択範囲を保存したモノ)」です。この「アルファチャンネル」を
チャンネルパレット上でゴミ箱へドラッグ&ドロップして削除
図6)して下さい。
・それから「レイヤー」→「画像を統合」(1-3 図7参照)で画像を 図7
統合して下さい。
この2つの作業をして
置かないとJPEG形式での
保存が出来ません。
・次に「ファイル」→
「別名で保存」(図7)を
選択し、表示された
ダイアログボックス(図8
でファイルの保存場所を
選択し、ファイル名を
入力し、「別名で保存」の
ドロップダウンリストで
JPEG形式を選択後・・・・・・
図8
図9

保存ボタンをクリックします。
すると次に表示されるのが
「JPEG オプション」の
ダイアログボックスです。
・ここではまず、「画像オプション」で
画質の選択を行います。数値が
低いほど圧縮率が高くなり
ファイルサイズが小さくなります。
実際に試し、画質の劣化具合と
ファイルサイズを見て画質の数値を
決定して下さい。
・もう1つ形式オプションでは
「ベースライン(最適化)」
「プログレッシブ」のどちらかを
選択します。「ベースライン
(最適化)」は通常の形式で、
「プログレッシブ」は「インターレース」と同じように表示されるモノです。通常の形式で保存するよりも
「プログレッシブ」で保存する方が多少ファイルサイズが小さいようですが、現在IEは対応していないようで、
通常の形式と同じように表示されます。NNは対応しています。

下記に両形式で保存した画像を並べて表示してみました。
GIF形式 JPEG形式
GIF形式 JPEG形式
インターレース プログレッシブ
画質 6
サイズ 71KB サイズ 38KB
こうして見比べてみるとこの画像の場合、画質の点ファイルサイズの両方で「JPEG形式」の方がいいようですね。



以上で第1講座 フォトショップ編は終了です。如何でしたでしょうか?
この講座の内容をすべて理解すれば、フォトショップの機能はだいたい使えるようになると思います。
もし以前に解説書を購入していて、その時点では何が何やらという感じだった方は
もう1度その解説書を開いてみて下さい。以前より理解できるのではないでしょうか?
又、解説書を買っていらっしゃらない方でも、フォトショップを使用していてわからない機能でも
躊躇せずに試してみればなんとなく理解出来るようになったのではないでしょうか?
そのように、この講座を作ったつもりではありますが
何か解りづらい点などありましたら、遠慮無しにどんどん申し出て下さい。

今後も皆様からのリクエストや追加したい項目があった場合は随時追加していくつもりです。