頑張って作ったホームページを多くの人に見てもらいたいという気持ちはみんな同じでしょう。しかし、せっかく誰かが来てくれても、見にくかったり、見る人にストレスを感じさせるようなページでは、見ないで帰ってしまう人もいるかも知れません。そんな事が起きないように、ちょっとしたテクニックを紹介しましょう。

作った画像ファイルがどれくらいの「重さ」なのかを見てみることにしましょう。

●Windowsをお使いの方は
画像ファイルのアイコンを右クリックして、タブを表示させます。その中に「プロパティ」という項目があるので、それをクリックするとウインドウが開き、そのファイルの情報を見ることができます。サイズと書いてある数字がそのファイルの「重さ」になります。

●Macをお使いの方は
上の「ファイル」メニューから「情報を見る」の中の「一般情報」を選びます。すると、ウィンドウが開きますので、その項目の中の「容量」がそのファイルの「重さ」になります。

ファイルサイズが「200KB」（200キロバイト）以下ならば、ほとんどの人が表示するのに差し支えはない大きさです。「MB」（メガバイト）の単位になってしまったら、表示するのにとても時間がかかります。もし「200KB」以上だった場合は、以下の要領でサイズを少なくします。

画像の保存形式には、「GIF」と「JPEG」があるというのは「8.イラストや写真を貼り込んでみよう」の項目で説明した通りですが、基本的に同じ大きさの同じ画像でも「GIF」形式の方が軽く、「JPEG」形式の方が重くなります。「GIF」形式で保存すると、その画像に最低限必要な色数に減らします。「JPEG」形式で保存すると、そのままの色数を活かして保存しますので、画質はキレイですがその分「GIF」よりも重くなります。もし、「JPEG」で保存していたら、「GIF」形式で保存し直してみてください。

それでも「200KB」以下にならない、又は「JPEG」で保存したい！と言う場合は、画像の大きさ自体を少し小さくしてみましょう。好きな部分だけを切り取っても、全体を縮小しても、だいぶファイルサイズが小さくなると思います。

これでおわかりのように、「ファイルサイズ」は、その画像の「保存形式」「色数」「大きさ」に左右されますので、そのどれかを小さくすることによって、「ファイルサイズ」をコントロールすることができます。

GIFで保存した画像に関しては、さらに見る人にストレスを感じさせないように、「インターレース処理」を施すことができます。「インターレース処理」とは、画像を完全に表示するまで、ぼやけたものからだんだんハッキリ表示させる機能のことです。そうすることによって、「この画像がどんな画像なのか」完全に表示されるまで待たなくてもだいたいわかるので、見る人を飽きさせません。（「インターレース処理」がされていない場合、上からだんだん表示しますので、完全に表示されるまでどんな画像なのかわからないのです。）

インターレース処理をするには、その機能を持ったソフトが必要です。

●Macをお使いの方は
「Adobe Photoshop」などの画像処理ソフトでももちろん作れますが（「Adobe Photoshop」を使用する場合は、ソフトの説明書をご覧ください）、今回は「Adobe Photoshop」を持っていない人の為に「GIF Builder」と言うソフトをご紹介します。インターネットからダウンロードして下さい。（各種雑誌付録のCD-ROMなどにも収録されています。初めは圧縮されていますので、「StuffIt Expander」などのソフトで解凍してください。）インストールして、起動します。「File」メニューから「Open」を選び、「インターレース処理」をしたいGIF画像を選びます。するとこのようなウインドウが開くので、さっき選んだ画像の名前を選び、メニューの「Options」から「Interlaced」のチェックマークが入っているかどうか確認します。もし、チェックが入っていなかったら「Interlaced」の項目を選択してください。チェックが入っている場合は何もする必要はありません。 次に「File」メニューから「Build...」を選択します。ファイル名を入力して「保存」ボタンをクリックします。これで「インターレース処理」ができました。（このソフトは「GIFアニメ」も作れる便利なソフトです。是非手に入れましょう）

●Windowsをお使いの方は
「GIX Pro」と言うソフトを使います。ここからダウンロードして下さい。（シェアウエア（有料）ですので、気に入ったら、お金を払う必要があります。詳しくは上記ホームページをご覧ください。）ダウンロードしたらインストール（ダイアログに従えば簡単にできます）をして、起動します。変換をクリックするとメニューが下がってくるので、その中の「オプション」をクリックします。すると「GIFオプション」というウインドウが開くので、インターレースにチェックをつけて、OKをクリック。そして、編集→名前を付けて保存を選び、保存して下さい。

これから表示される画像がどんな画像かがわかる様に、画像には「ALT="自分で判りやすいように付けた画像の名前"」を指定しましょう。また、ALTのタグは、画像が表示できない場合に、画像の代わりに表示する文字列を指定する時にも役立ちます。

<img src="hare.gif" alt="お天気">

まず、透過させたい画像のバックを一色に塗りつぶして下さい。写真を切り抜きたい場合も、切り抜く対象以外の背景を全て一色で塗りつぶします。もしここで、この画像を貼りつけるHTMLファイルの背景の色が決まっている場合は、その色に画像のバックの色を近づけておくとキレイに切り抜きができます。

●Macをお使いの方は
「Adobe Photoshop」などの画像処理ソフトでももちろん作れますが（「Adobe Photoshop」を使用する場合は、ソフトの説明書をご覧ください）、今回は「Adobe Photoshop」を持っていない人の為に、「TRANSPARENCY」と言うソフトを使います。ここよりダウンロードしてください。インストールして、起動します。「File」メニューから「Open」を選び、「インターレース処理」をしたいGIF画像を選びます。画像が表示されますので、バックの色を透過するために、画像の上でマウスをクリックしたままにします。パレットが表示されるので、抜きたい色の上でマウスを離します。1色しか指定できないので、注意してください。画像の選択したパレットの色の部分がグレーに変わります。もう一度、画像の上をクリックしたままにすると選択された色の部分が×になっています。透過を解除するにはパレットの「NONE」を選択します。「File」メニューから「Save As GIF89」を選択し、名前をつけて保存します。これで「透過GIF」ができました。ブラウザで表示させて確認してみましょう。

●Windowsをお使いの方は
「インターレース処理」の項目で使用した「GIX Pro」と言うソフトを使います。ここからダウンロードして下さい。（シェアウエア（有料）ですので、気に入ったら、お金を払う必要があります。詳しくは上記ホームページをご覧ください。）ダウンロードしたらインストール（ダイアログに従えば簡単にできます）をして、起動します。変換をクリックするとメニューが下がってくるので、その中の「オプション」をクリックします。すると「GIFオプション」というウインドウが開くので、オプションの透明化をチェックして、OKを押せば簡単に透過GIFが作れます。そして、ファイル→名前を付けて保存を選び、保存して下さい。

←切り抜き前

←切り抜き後