上図真中のGIFに比べて右側のPNGはサイズが3分の1、4分の1になります。ですから、保存形式と配色のビット数を考えてリンクボタンをお作りいただければ、それだけ早く表示されるホームページになると思います。また、見た目も変わりません。
で下図は、255バイト、261バイト、230バイト、294バイト、208バイトのPNG画像保存形式をリンクボタンにしたものとソースです。
下図をご覧のように、赤い字の5個の画像ファイルがありますので、表示されるのにサーバーとのやり取り回数の関係で、合わせて1.21KBでも時間がかかります。
<TR><TD><IMG src="01.png" hspace="1" href="../index.html" alt="表紙" WIDTH="127" HEIGHT="29" BORDER="0">
<IMG src="02.png" hspace="1" href="../photo/photo01/photo01.html" alt="写真雑記" WIDTH="127" HEIGHT="29" BORDER="0">
<IMG src="03.png" hspace="1" href="../draw/drawi.html" alt="ドローソフトマニュアル" WIDTH="127" HEIGHT="29" BORDER="0">
<IMG src="04.png" hspace="1" href="../paint/p0.html" alt="ペイント簡易マニュアル" WIDTH="127" HEIGHT="29" BORDER="0">
<IMG src="05.png" hspace="1" href="h0.html" alt="HPの注意点" WIDTH="127" HEIGHT="29" BORDER="0"></TD></TR>></TABLE>
下図のように、クリップカルマップにして赤い字の画像 675バイトだけにすれば表示は速くなりますし間違いが少なくなります。
<AREA SHAPE="rect" COORDS="130,0,257,29" href="../photo/photo01/photo01.html" alt="写真雑記">
<AREA SHAPE="rect" COORDS="259,0,386,29" href="../draw/drawi.html" alt="ドローソフトマニュアル">
<AREA SHAPE="rect" COORDS="388,0,515,29" href="../paint/p0.html" alt="ペイント簡易マニュアル">
<AREA SHAPE="rect" COORDS="517,0,644,29" href="h0.html" alt="HPの注意点"> </MAP></CENTER>
AREA SHAPE="rect"は四角形の場所という意味です。COORDS="1,0,128,29"の数字はMAP全体の座標（0,0,645,29）における左上の座標と右下の座標です。
ですから、下図のように矢印の先 1,0 から矢印の先 128,29 までの四角形がINDEXリンクボタンとして反応します。
