ブラウザで表示される画像に関する基本的な内容です。

• 画像は、自分の所有する写真を用いたり、自分で描いた絵などのオリジナルの素材を用いるか、著作権フリーの素材集から用いるかにしましょう。
  ただし、自分が撮影した写真でも、商品によっては著作権などにより守られている場合があるので使用できません。本の表紙やぬいぐるみ、キャラクター玩具、雑誌の写真、パンフレットなどにも適用されます。
  ホームページは開設した時点で「公開されたもの」とみなされます。くれぐれも画像の使用には注意するようにしましょう。
• 写真の場合はJPEGデータに加工します。最近のデジタルカメラの多くはJPEGで保存されているので、サイズ変更かトリミング（余分な部分のカット）をしてそのまま使えます。
  銀塩カメラ（通常のカメラ）で撮影したものは、プリントしたものをスキャナで読み込んだり、ネガフィルムをフィルムスキャナなどで読み込んだりして、画像データとして保存します。ファイル形式はJPEGに変換しておくと良いでしょう。
• 自作のイラストなどは適切な画像形式で保存します。グラデーションやフィルタなどを多用して色数が写真並に多い場合はJPEGなどに、通常のカラーイラストやマーク、ボタンなどはGIFやPNG形式にして保存します。
  まずはBMPとして保存しておいて、あとで他の画像形式に変換する方法もあります。
• 自分で画像を用意するのが大変な場合は、フリーで使える素材集などから使うと簡単です。
  ただし、注意しなくてはいけないのは確実にその画像がフリーとして使えるものかどうか気を付けることです。つまり、ホームページの素材集の中には無断でコピーした画像をフリー素材として扱っている可能性があるということです。
• 画像は小さくして表示させましょう。
  一般的な写真を掲載するなら、画面で見たときにその写真の1:2（面積では1/4）のサイズぐらいで十分でしょう。
  もし大きな画像を見せたい場合は、同じ画像のサムネイル（縮小した画像）を最初に表示して、リンクすると別途大きな画像が表示されるようにしましょう。
• 個人ページに限ってフリーで使用できる画像を用意しました。
  （各ページ末の使用許諾契約を熟読の上お使い下さい）

  pic1.html　……　バナー（横長の表示）
  pic2.html　……　ロゴ（数字、'HOME'、'BACK'、'NEXT'、'MAIL'）
  pic3.html　……　ボタン
  

• ホームページ用の画像は、通常Windowsで使われるBMP（ビットマップ）形式や、Macintoshで使われるPICT形式などでは、ファイル容量が大きくなりすぎる（「重くなる」という）ので、圧縮した形式を用います。
• ホームページで用いられている圧縮した画像形式は、JPEG（ジェイペグ）・GIF（ジフ）・PNG（ピング）です。それぞれの特徴は以下の通りになります。

• 画像は同じ色が多いほど圧縮されやすくなります。次ページの画像の圧縮をご覧下さい。

• フルカラー表示のため、写真などの表示をするとき鮮やかな画像表示ができます。
• 汎用フォーマットにくらべ、圧縮すると画像の種類によって1/2〜1/100になります。
• 圧縮率を高くしすぎると画像が荒れます。また、変更したものを上書きしてしまうと元に戻せません（非可逆圧縮です）。
• 色数はフルカラー（約1670万色、24ビットカラー）またはグレーの256色の２種類しかありません。色数の少ない（グラデーションなどを使っていない）イラストや図形では他の画像形式の方がきれいです。
• １色で塗りつぶした部分が保存（圧縮）時に粒状になるなど、ベタ塗りの部分が苦手です。色数が多くない場合はＧＩＦやＰＮＧの方がきれいになります。
• プログレッシブ（Progressive）形式にして保存しておくと、わずかにファイルサイズが大きくなりますが、ホームページで画像を表示するときにぼやけた画像が表示されてからはっきりピントが合うような表示になります。全部読み込む前に画像の概略が伝わるので、見る人に親切となります。

• 256色が最大ですので、たくさんの色を使っている写真などは不向きです。色数の少ない（グラデーションなどを使っていない）イラストや図形を保存するときはＧＩＦ形式で保存すると圧縮率が高くなります。
• 色数は256色（8ビット）から白黒（1ビット）までです。色数を少なくしておけば同じ画像でも圧縮率が高くなります。
• １色のみ透過色が指定できます。これにより、画像が長方形以外の形でも背景を表示できます。
• アニメーションＧＩＦとしてアニメ化したものを保存することができます。
• インタレイス（Interlaced）形式にして保存しておくと、ホームページで画像を表示するときにぼやけた画像が表示されてからはっきりピントが合うような表示になります。全部読み込む前に画像の概略が伝わるので、見る人に親切となります。
• 米ＵＮＩＳＹＳ社が圧縮方法（LZW）の特許を有しており、ライセンス料の問題（日本語の解説はこちら）のために、いくつかのフリーウェアがサポートを中止しつつあります。ライセンス契約を結んでいるソフトであれば問題なく使えます。

• 上記のＧＩＦの問題を回避するために作られた規格です。
• 色数はフルカラー（約1670万色、24ビットカラー）から白黒（1ビット）までです。色数を少なくしておけば同じ画像でも圧縮率が高くなります。
• 透過色が指定できます。これにより、画像が長方形以外の形でも背景を表示できます。
• プログレッシブ（Progressive）形式にして保存しておくと、ホームページで画像を表示するときにぼやけた画像が表示されてからはっきりピントが合うような表示になります。全部読み込む前に画像の概略が伝わるので、見る人に親切となります。
• 古いブラウザでは対応していません。Netscape Navigator 4.04以降（多数のプラグインが存在するが詳細不明）、Internet Explorer 4.0b1以降（Mac版とWin3.x版では未サポートのようです）。その他の対応ブラウザはBrowsers with PNG Support（英語）をご覧下さい。