比較的新しいバージョンのPhotoshop（Photoshop6.0以降？）では、「Web用に保存」を使用して「GIF形式」の画像を保存するのが便利です。

では下記の画像を「Web用で保存」で「GIF形式」に保存します。

※「白と灰色のメッシュ」部分は、透明なところです。

---

まずメニューの「ファイル」から「Web用に保存」を選択します。

「Web用に保存」ウィンドウの右側の「プリセット」で保存形式を設定します。

まず「GIF形式」で保存しますので、「GIF」を選択します。 すると「カラー」で「色数」を設定できるようになります。 これがインデックスカラーの「色数」です。 色数が多ければ多いほど、元の画像通りに保存できますが、容量（画像サイズ）は大きくなります。 また色数が少なければ、容量は小さくなりますが、元の画像より荒れたように保存されます。 これは、左下のサイズをチェックしながら自分なりに妥協点を探ってください。 「GIF形式」は透明にしたいところを抜いて保存することもできます。 透明部分があるときは「透明部分」にチェックを入れてください。 ただし不透明から透明へのグラデーションはできません。 「GIF」は「透明度」or「不透明」の２択のみの保存です。「半透明」の保存はできません 最低限これだけ設定できましたら「OK」を押して保存します。

とくに細かく設定しなくてもなんとかなりますが、いろいろ試してみてください。

ディザ

もともとRGBフルカラー（16777215色・透明部分除く）で作成した画像の場合、インデックスカラーでは256色しか使用できませんので、全ての色が保存できるとは限りません。

ですから256色で表すために、パレット内の色を組み合わせて色を表現します。
その組み合わせ方の指定がこの「ディザ」です。

補完方法	内容
なし	補間しません。ポスタリゼーションな画像になります。
誤差拡散法	通常これを使用するとよいと思います。 ※メニューから[ イメージ ]->[ モード ]->[ インデックスカラー ]を使用する場合は、 「同一色の保持」にチェックを入れておくとパレット内の色は補間で表現しようとしません。
パターン	正方形なパターンで補間します。
ノイズ	ヘルプによるとスライス間の補間をするのによいらしいです。 ※使用したことがないです。

パレット

「Web用に保存」を使用するとはじめに「特定」が指定されているところです。

フルカラーから256色をピックアップするときに、「どのような色を優先するか」を指定します。

使用中の色を全て割り付ける	これは画像で使用している全ての色を使用します。 256以下の色数の場合はすべての色が有効になります。
システム(Machintosh) システム(Windows)	各々のOSのシステムカラーを使用して減色します。
Web	Webで一般的に使用するカラー(216色)使用します。 WebでMacでもWindowsでも同じように見えるのが魅力です。
RGB カラーを均等に割り付ける	カラースペクトルの色を均等に割り付けたパレットを使用します。
ローカルorマスター	ローカルは現在の、マスターはImageReadyで作成したパレットです。
知覚的	現在の画像で使用されているカラーを使って、パレットを生成して使用します。
特定	知覚的に近いですが、Webカラーを使用するようにパレットが生成されます。 Web用の画像を作るときはコレがオススメです。
割り付け	現在の画像で使用されているカラーを使って、パレットを生成して使用します。 多く使用している色味を優先的に使用するようです。
カスタム	自分オリジナルのパレットを読み込んで使用します。
前回と同じパレットを使う	前回使用したパレットを使用します。

マット

通常「RGBカラー」で編集していたら、「アンチエイリアス」といって、画像のエッジを滑らかにするためのぼかしが入っています。

「透明」画像を扱うときはこの「アンチエイリアス」部分が半透明になっていたりします。
ところが、「GIF形式」では「半透明」の保存が出来ません。

ですからこの「半透明」部分は「不透明」で表されることになります。
その色を指定するのが「マット」です。

※「透明」部分のある画像で「透明」チェックボックスにチェックが入ってないと透明部分がここで指定された色で塗りつぶされます。

では「Web用に保存」を使用しないで「GIF形式」で保存する方法です。

インデックスカラーにする

まず画像を統合し、１枚の画像にします。
透明部分を残したい方は「表示レイヤーを結合」などを使用するとよいです。

※もし統合し忘れても、インデックスカラーを選ぶと強制的に１枚の画像に統合されます。

次にチャンネルパレットを通常の「RGB、レッド、グリーン、ブルー」のみにしておきます。（Elements以外）
チャンネルに余計なものがあっても保存できるのですが、そのチャンネルを透過で使用してしまうこと(version)があるので、消しておきましょう。

できましたら、メニューから[ イメージ ]->[ モード ]->[ インデックスカラー ]を選びます。

「インデックスカラー」のウィンドウが開きましたら「Web用に保存」と同じように設定して「OK」を押します。

これでインデックスカラーに出来ました。

保存する

あとは、「別名で保存」を選び「ファイル形式」から「GIF」を選んで保存します。

では「GIF形式」で保存するときはどんな画像だとより軽い（サイズ容量の小さい）画像して保存できるのでしょうか？

サイトをより軽く表示したいときなどにお役立てください。

１．サイズを小さくする

基本はやはり画像のサイズを小さくすることです。

大きな画像より、小さな画像の方が容量は小さくなります。

348 バイト(２色)

172 バイト(２色)

２．色数を少なくする

色数が多いより、色数が少ないほうが容量が小さくなります。

最初から「GIF」で保存する予定の画像は、あまりカラフルな画像にしないようにしましょう。

982 バイト(１２色)

348 バイト(２色)

３．グラデーション（ぼかし）をあまり使用しない

グラデーションは「GIF」に大敵です。

グラデーションを多用している画像は、むしろ「JPEG」が得意とする画像です。
「GIF」では汚いですし、データ量も大きくなります。

「GIF」でなくてはならない、という制約がある画像であればグラデーションは多用しないことです。

1.53 キロバイト(２色)

3.81 キロバイト(１６色)

796 バイト(JPEG標準)Web用

４．同じ色はかためておく

グラデーションではなくても、同系色の色が多くてもメッシュ状に配置されてるとデータ量は大きくなってしまいます。

同じ色は固めておいておく方がよいでしょう。

1.06 キロバイト(２色)

514 バイト(２色)

５．縦じまにするくらいなら横じまにする

画像の圧縮方法の関係上、縦に連続した色より、横に連続した色のほうが圧倒的に圧縮率が高いので、かなりデータ量が小さくなります。

1.06 キロバイト(２色)

348 バイト(２色)

「インデックスカラー」とは色のインデックス(索引)を作成して、それを絵のデータに当てはめていく手法です。

「インデックスカラー」では最大256色のパレットを作成できます。
そのパレットの色を使用して絵を表現したものを「インデックスカラー」といいます。

インデックスカラーの例

	こんな画像があったとしたら...
↓
	こんなパレットインデックスを生成して
↓
	画像の各ドットに番号をふっていく

これが「インデックスカラー」。

そしてこれを圧縮したフォーマットが「GIF」です。

---

ちなみに圧縮方式をざっくりと説明しますと、上図を使用した場合

「1が1個」「2が1個」「1が2個」「2が１個」「3が1個」「1が2個」..

という感じに連続したカラーをひとまとめにする感じです。

つまり、「GIF」の中には「パレット」の色データと「色がいくつ連続しているか？」という２種類のデータがあることになります。

なぜ「256色？」

いったい「256色」の「256」という数値はどういう根拠のある数値なのでしょうか？
これはマシン語に依存します。

通常コンピュータが理解できるプログラムは「0」か「1」のみです。
この「0」と「1」を大量に組み合わせてプログラムが動いています。
２進数の原理ですね。

この１つの単位を「bit(ビット)」といいます。
さらにこの1ビットを８つ集めたプログラム上での最小単位を「1byte(バイト)」といいます。
２進数で表すと8ビット=1バイト=「11111111」です。これは１０進数では「255」です。
これに「00000000」、つまり１０進数でいうところの「0」を合わせて「256」通りの表現が可能になります。

これが「256」色の根拠となります。

さて、インデックスカラーで使用するときは「最大」256色ですが、もっと少ない色数で表現する場合があります。
この場合「2」「4」「8」「16」「32」「64」「128」といった色数がお勧めです。
それは何故でしょう？

「2」という数はプログラム上で「1」で表され、「4」数は「11」で表されます。
このまま「8」は「111」、「16」は「1111」、「32」は「11111」、「64」は「111111」、「128」は「1111111」という具合で表されます。
１桁ずつ増えていっていますね。

ではたとえば「95」色数ではどうでしょう？
これは「1011110」です。
お気づきになられましたか？「128」色とデータサイズが同じですよね。両方とも7桁です。
同じデータ量を使うならデータ量のMAX使ったほうがよいでしょう。

---

実際は中途半端な色数でも、データサイズは小さくなります。

これはパレットのサイズが小さくならなくても、色数が減ると同じ色が連続する場合が多くなるため、実際のデータ容量が減るためだと思われます。
（データには「パレット」のデータと「いくつ連続しているか？」という２種類のデータがあるため、後者の容量が減るのだと思います。）

しかし、「２の乗数」 ごとの数値を選ぶほうがパレットデータも小さくなるため、より小さいサイズのデータが作成できます。