■ 画像ファイルを使うには 
絵を描くのに必要なもの
専用の画像ソフトが必要です。あとは、ホームページ上で使える画像形式の特徴や、その画像形式への変換方法、簡単な絵の描き方（レイヤーとかの概念は必須かも）など、画像ソフトを使いこなす基本知識と、その画像をHTMLに埋め込む文法についての理解が必要です。
※絵を描く知識は、「すごいな、これ」と思うような絵を公開しているサイトに遊びに行き、どんなものを使って描いたかを調べるといいんじゃないでしょうか。けっこう、描き方講座とかやってくれてますし、絵を見るだけでも楽しめますから。
ホームページで使える画像形式
点（ドット:ビートマップ形式）で絵を描く「JPEG」「GIF」「PNG」、線（ライン：ベクター形式）で絵を描く「Flash」「SVG」が有名です。ホームページを見るということは、ページの表示に必要なデータを読み込む必要があるので、ファイル容量が大きくなりがちな画像データは、容量が小さくなるように（ファイル転送量が少なくてすむように）、ぎゅっと小さく圧縮した画像形式を使います。このため、非圧縮形式である「BMP（ビーマップ）」ファイルを使うことがご法度なんです。
JPEG（ジェイペグ）
拡張子は「.jpg」。フルカラー（1,670万色）対応。おもに写真などを載せたいときに使います。非可逆圧縮（一度圧縮すると、元の状態に戻らない）という特徴があり、ファイルサイズを小さくできるかわりに、画像の劣化が生じます。圧縮率を任意に変更できますので、ファイル容量と劣化具合のバランスをとって、最適な状態にして使用ください。圧縮率を下げればされるだけ、劣化がひどくなる特徴があります。
参考までに圧縮率の目安ですが、ホームページ上で写真を使うなら、30％くらいがいいといわれています。イラストとか、いろいろ写真に加工を加えた後だと、60％くらいですかね？ 生の写真ならそんなに劣化しないんですが、いろいろ機能を使った後だと、ものすごく劣化するときがあるので。ただあくまでこれは目安です。ご自分の目で、ファイルサイズと劣化状態を見極めて、ちょうどよいバランスで保存してください。
圧縮オプション
「ベースライン（画像を上部から表示）」「プログレッシブ（全体を粗く表示し、次第にきれな画像へと変化）」の二種類が選べます。もちろん、凝ったことをしているプログレッシブのほうが、画像ファイルが大きくなります。
ソフトと圧縮傾向
Windows付属の「ペイント」でも、OSのバージョンによっては、JPEGファイルがサポートされていているんですが、圧縮率の変更まではできません。なので、保存時に圧縮時の変更ができる画像専用ソフトがあったほうがいいと思います。フリーソフトの「Pixia」を使うとか、Officeモデルのパソコンを買った方なら、「Microsoft Photo Editor」というソフトがプレインストールされているのでそれを使うとか、お金をかけずに使えるソフトもあります。ただ画像ソフトはちょっとクセがあるので、自分が使いやすいソフトを探して、扱い方に慣れておいたほうが無難です。
GIF（ジフ）
拡張子は「.gif」。最大256色対応。おもにイラストやナビゲーションアイコンなどを載せたいときに使います。可逆圧縮（圧縮しても元に戻る）という特徴があります。拡張仕様として、背景色を透過できる（透過GIF）、イラストを動かせる（アニメーションGIF）などがあります。
※GIFの圧縮技術に特許が絡む関係で、ライセンス料を支払っていないソフトで作成したGIFファイルは、後々問題が生じる可能性があるので、作成時には気をつけてください。特許の関係で、フリーソフトでGIFが扱えるソフトも少ないし、扱えたとしてもライセンス料を支払っているかどうか確認しないといけないので、ソフトを選ぶときは慎重に。
圧縮オプション
JPEGの「プログレッシブ」と同じく、「インターレース形式（全体を粗く表示し、次第にきれな画像へと変化）」が用意されています。これも画像ファイルが大きくなるデメリットがあります。
ソフトと圧縮傾向
Windows付属の「ペイント」でも、OSのバージョンによっては、GIFファイルがサポートされていているんですが、透過GIF・アニメーションGIFには対応していないし、カラーパレットの問題で、無理やり保存すると色が変色する危険性があります。「Microsoft Photo Editor」で、透過GIFは作成できました。「Animation GIF Maker」で、アニメーションGIFも作成できました。――ただ、不必要な色数を削除してファイル容量を減らして保存できたりたり、市販ソフトのほうが、何かと便利なのも事実です。
PNG（ピング/ピーエヌジー）
拡張子は「.png」。フルカラー、および、インデックスカラー（最大256色）対応。早い話しが、「JPEG」と「GIF」のいいとこどりです。カラーモードは「グレースケール」「256インデックス」「フルカラー」の三つがあります。可逆圧縮（圧縮しても元に戻る）なので、JPEGと比べ、フルカラーでも画質の劣化が生じません。「フルカラー」だと、JPEGよりファイルが大きくなってしまうんですが、「インデックスカラー」だと、GIFよりファイルが小さくなる特徴があります。
もともとは「GIF」の特許問題なんかもあり、ホームページ上で使うために開発された形式ですが、現時点ではまだサポートが行き届いていないため、次世代のための規格といった感じです。徐々に使われ始めてはいますが、普及率は、「JPEG」「GIF」には及びません。なんか、携帯コンテンツのほうで普及しはじめてるらしいです。
ソフトと圧縮傾向
Windows付属の「ペイント」では扱えません。でも、フリーソフトの「Pixia」は使えます。他にも扱えるソフトがあると思うので、探してみるといいでしょう。ただ、全体的な性能（圧縮率や機能面で）からいくと、市販ソフトのほうが、何かと便利かなっと思います。
HTML文法的には？
img
タグを使います。作成ソフトを使っている場合は、そのソフトの指示通りに処理すれば、画像を挿入できます。タグの知識がなくても大丈夫です。でも、できれば、次に説明する意味だけは抑えておいてください。
Ex, 右の絵の表示タグ
<img src="98_trouble.jpg" width="174"
height="183" align="right" alt="ALT指定のサンプル。">
■ ALT指定（代替テキストの設定）
右にある絵の上にマウスを乗せてみると、文字が表示れます。こういうのを「代替テキスト」といいます。テキストブラウザ・音声ブラウザをはじめ、画像なしでも内容がわかるように、代替テキストで「絵で表示されている情報を説明する文」を用意するのが最低限の礼儀といえます。（HTML文法的には必須）
■ 読み込みを早くさせる設定
「WIDTH」と「HEIGHT」指定で、絵の大きさを指定しておくと、画像の読み込みが速くなります。是非、指定しましょう。
※サイズの合わない絵を、無理やり数値設定することにより、任意の大きさとして表示することができますが、画像が粗くなるので、私はおすすめしません。挿入する絵や写真は、表示したい大きさに加工してから使うようにしましょう。
セーフカラーとカラーパレット
Webセーフカラー（ブラウザセーフカラー）というものがあります。 Windows、MACという異なるパソコンでも同じ色が表現できる、限られた「216色」のことです。個人の趣味でホームページを作っているなら、そこまで気をまわす必要はないんですが、公共性の高いページを作る必要があったり、「誰が見ても同じようにみてほしいんだ」と願っている場合は、セーフカラーを念頭においてページを作ってみましょう。
そもそも、ホームページを見るといっても、見ている側がどんなパソコンを使っているのか（性能や設定）、どんなブラウザを使っているのかなどにより、見え方が異なります。見ている側（ユーザー）の環境に依存しているわけです。ディスプレイがCRTか液晶か、などでも、見え方はけっこう違ってくるものですが……問題は8bit環境でしか表現できないパソコンの場合です。（といっても、8bit環境なんて、今じゃほとんどないと思う）
■ カラーパレット
24bitカラー（16,777,216色）のことを、「フルカラー」と呼んでいます。今のパソコンだと大丈夫なんですが、古いパソコンを使うと24bitも色の表現ができないので、古い時代の仕様であった「8bitカラー（256色）」で表現されることになります。一般には、8bitカラーは、24bitカラーから任意に選んだ256色なんですが、これは固定じゃありません。任意に選んでいいので、どの色を選んだかというリストが必要になり、それが「カラーパレット」と呼ばれるものです。
とはいえ、OSが「システムパレット」という形で、たぶんよく使うだろう、という256色を用意しています。が、WindowsとMACでは、OSが用意した色が違っていて、幸運にも重なっている216色が、「Webセーフカラー」と呼ばれているものです。この216色以外の色を使った場合、8bit環境では、パレット以外の色は「色化け」を起こすことになり、まったく違う色として表示されるので、ホームページ作者が意図したとおりの配色で表現されることは……まずありません。たぶん、恐ろしい配色で表現されてしまうんでしょう。（^ ^；）
■ GIFとかのインデックスカラー
ということで、絵とかを作成するときも、Webセーフカラーの216色のカラーパレットを使って保存すると、色化け回避になります。ホームページ作成ソフト・グラフィックソフトだと、だいたい標準的に、Webセーフカラーのパレットが装備されています。GIFのように、使用する色の数を減らせば減らすほど、ファイル容量が小さくなる画像形式もあるので、カラーパレットっていう概念自体は、覚えておいて損はないと思います。
色の表現
ホームページを作るときに色の指定をする場合は、白なら「#FFFFFF」のような形で表現しています。俗に言う、「16進数指定」です。一桁で16種類、二桁では（16×16で、256色）、それが6桁あるので（16×16×16×16×16×16で、16,777,216色＝フルカラー）の表現が可能になります。他にも、色の名前とか10進数でとか、表現方法はありますが、普段よくお目にかかるのは、6桁の16進数指定です。
RGB方式で色を表現しています。#RRGGBBということで、最初が赤（R）、真ん中が緑（G）、最後が青（B）です。この三色を混色して、すべての色を表現します。例えば黄色なら、「赤+緑」で作れます。どの色がどのコード（「#FFFFFF」で表したもの）なのかを知りたかったら、インターネットで調べてみるといいですよ。
おすすめ参照サイト：Mariのいろえんぴつ
Copyright (C) 2000-2005 Makiko Kudoh.
Last up ： 05/10/2004
URL：http://www.causu.com/tora_hp_2f.htm