ウェブーぺージで使われる、もっともポピュラーなイメージの種類には２つあります。拡張子が　.GIF と .JPG で終わるイメージです。 この２種類を使う限り、どのブラウザーを使っても、まず間違いなく、画面に表示してくれます。 もちろん、Lynxのようなテキストだけしか表示しないブラウザーではだめです。

イメージの作成や修正には、グラフィクス・ソフトウエアが必要ですが，無料のものから10万円以上するものまで、 たくさんのプログラムがあります。

私のお気に入りは　JASC の　PAINT SHOP PRO です。 トライアル・バージョンがあるので、もし、イメージを自分で作ろうと思っている人は、上のリンクをクリックして、試してみたらよいと思います。たくさんの機能がついていて、 使いこなすまでには、かなり勉強する必要がありますが、以前に、グラフィクス・プログラムを使った経験のある人なら、問題なく使うことができます。

もっと簡単で、手軽に使おうと思う人には、WINDOWSについているPAINTプログラムが最適です。ちょっとした修正など、簡単にできます。 ただし、古いWINDOWSについているものは、.BMP　という種類のイメージだけしか扱うことができません。

.GIF イメージ

• 色数は 256色まで。それ以上ならまず減色してから。
• モザイク状から現れるインタレース GIF がある。
• 絵の中の 1色を透過色にする透過 GIF がある。
• 複数の絵をぱらぱらまんがの要領でつなげるアニメーション GIF がある。

.JPG イメージ

• 色数はフルカラー（1677万色）。
• 絵を適当に“ごまかす”ので画質が劣化することがあるが，とくに写真ではファイルの大きさを圧倒的に小さくできる。
• ぼかし状からじわじわ現れるプログレッシブ JPG がある。

どのように使い分けたらいいの？

betty4.jpg 16 million colors 17,449 bytes	betty5ax.gif 256 colors 38,689 bytes normal (普通) GIF
betty5ay.gif 256 colors 34,786 bytes transparent (透過)　GIF	betty5by.gif 256 colors 37,022 bytes transparent (透過)　GIF
betty5z.gif 256 colors 65,536 bytes transparent (透過) アニメーション GIF	betty5by.gif 128 colors 212,992 bytes transparent (透過) アニメーション GIF

上のそれぞれのピクチャ－のオリジナルは、ビットマップ・フォーマット (.BMP) からなっており、約425,000 bytes ほどメモリーを喰っています。上に示すピクチャ－のような、 比較的多彩色からなるものは、.JPG に変換すると、驚くほどファイルの大きさが小さくなります。

しかし、GIF に変換するより、JPGに変換するほうが、必ず ファイルサイズが小さくなるかというと、そうとは限りません。例えば、色数が少ない場合や、比較的簡単な構成あるいは構図の絵の場合には　GIF に変換したほうが、かくだんにファイルサイズが 小さくなる場合もあります。

そういうわけで、初めのうちは、GIF と　JPG　の両方に変換して比較してみるとよいでしょう。そのうちに、経験で、 どちらに変換したほうがよいか分かるようになります。

上のアニメーションは、静止画像を基にして、JASC の Animation Shop　 で作ったものですが、ファイルサイズを小さくするには、 原画のサイズを小さくしないのであれば、色数を少なくすると、ファイルサイズを小さくすることができます。しかし、それと共に、画質も悪くなります。

どのようにしたら、アニメーションファイル・サイズを、最適に縮小することができるのだろうか？知りたいと思いませんか？ このページ　(Optimize your animation!) をクリックして、関連記事を読んでください。新しいページが開きます。このページへ戻るには、 新しいページを閉じてください。

どのようにして、ウェブページに
絵を載せるんですか？

画像を貼り込むには　IMG タグを使います。このタグの使い方は、このぺージ　(How to use an IMG tag)　を見てください。新しいページが開きます。

• 透明なイメージ （spacer.gif） って何ですか？
  
  
• FORMタグの使い方もっと教えてください！
  
  
• 簡単なジューク・ボックスの作り方
  
  
• Image Map Made Easy!
  
  
• How to use a TABLE
  
  
• Introduction to Morphing