背景に使った画像はタイルを敷き詰めるように、繰り返し表示されます。軽いホームページにするためには
画像のサイズをできるだけ小さくします。特に抽象的な画像では極力小さくします。
高さが4ピクセル、幅が1280ピクセルでできています。幅が広いのはどんな表示環境にも適用させるためです。
グラデーションは最初の200ピクセルだけにかけてあります。
画像をたくさん使うと重いページになり、開くのに時間がかかります。少しでも軽くする方法にトライします
画像サイズを指定
画像のファイル容量をあらかじめ調べておき、そのサイズを
width="数値" height="数値"というように
記入します。このように書いておくと、画像を読み込む前に表示場所スペースのレイアウトが決まるので、
表示が速くなります。
画像のファイル容量は、開いた画像のうえにマウスポインターを載せて右クリック、出てきたメニューから
「プロパティ」を選べば確認できます。
このように書きます
<img src="cat2.jpg" width="151" height="113">
|
 |
動きを軽快にするため、画像を表示しない設定にしている人もいます。そんな人たちのために、
画像の代わりに説明文が出るようにします。
alt="説明文"を追加します。
この記述をしておくと、副次効果として、マウスカーソルが写真の上にきたときに、説明文が表示されます。
下の写真で確認してください。
このように書きます
<img src="cat2.jpg" width="151"
height="113" alt="猫の写真"> |
 |
上半分を軽く
縦に長いホームページでは、隠れている下のほうに重い画像を置き、表示されている上の部分を軽くなるように
します。実際には開いていなくても、開き終わったように見せかける方法です。
内緒でフアイルを開いておく
上の項目との違いは、他のページで使う画像にも対応できることです。文章の多いページにこの仕込をし、文章を読んでいる間に、次以降に使う
画像を目に見えない形で開いてしまいます。
<IMG src="ファイル名" width="1"
height="1"> のように一番下に書いておきます。ファイル名で指定した画像が、
「フルサイズだけど縦横1ピクセルに押し込められた状態」で開きます。単なるドットにしか見えませんから、
おそらく誰も気がつかないでしょう。この画像を開くのには当然時間はかかりますが、
文章を読んでいる間に済んでしまいます。次のページに移動しこの画像を<IMG
src="ファイル名" width="640" height="480"> 等と指定して
開く時には、すでに開いている画像ですから、ほぼ瞬時に表示されます。
このページの一番下でも8枚画像が開いていますが、わかるでしょうか。
画像を分割する
どうしても大きな画像を一番最初に開かなければならないときは、画像を分割します。
画像は一つづつ受信するのではなく、複数枚同時に受信します。大きいもの1枚よりも、小さいもの4枚の方が
速くなります。
一番簡単な方法は2分割とか4分割です。これをテーブルの中に入れます。
分割した画像を<TABLE>タグのセルの中に入れます。
<TABLE border="0" cellpadding="0"
cellspacing="0">タグはこのようにすべてを「0」に指定します。
こうしないと分割部に余計なスペースが入ってしまいます。
上下に2分割した画像を使った例です
<TABLE border="0"
cellpadding="0" cellspacing="0">
<TR><TD>
<IMG src="hana-1.jpg" width="267"
height="125">
</TD></TR>
<TR><TD>
<IMG src="hana-2.jpg" width="267"
height="125">
</TD></TR>
</TABLE> |
|
画像の多いホームページ
画像がいっぱいある、写真・イラスト中心のホームページでは、ファイル容量の小さな画像を作り、
それをレイアウトします。小さな画像に大きな画像をリンクさせておけば、スムーズに表示される画像一覧の中から、
気にいった写真のみを拡大して、じっくり見てもらうことができます。
<A href="大きな画像のファイル名"><IMG
src="小さな画像のファイル名"></A> のように書きます。
alt="ファイル容量
66KB"のように大画像のファイル容量を書いておくと、マウスカーソルを小画像の上に載せた時点で
大画像のファイル容量がわかりますので、表示に時間がかかっても多少は許される思います。
このように書きます
<A href="l-saboten.jpg" width="57"
height="54" alt="ファイル容量 66KB">
<IMG src="s-saboten.jpg"></A> |
 |
画像の周囲にはリンクを表す青い枠がつきます。これがいやな人は
border="0" を追加します。
このように書きます
<A href="l-saboten.jpg" width="57"
height="54" alt="ファイル容量 66KB"
border="0">
<IMG src="s-saboten.jpg"></A> |
 |
ホームページのファイル容量確認方法
自分のホームページのファイル容量を確認したい時は、確認したいページをIEで開き、
「ファイル」「名前を付けて保存」を選びます。
名前を「aaa.htm」とすると
右のようなファイルとホルダーが保存場所にできています。
フォルダーには、そのホームページで使っている画像ファイルがすべて入っています。
各々のファイル・ホルダーにマウスポイントを載せて「右クリック」し、「プロパティー」を選べば
「サイズ」の項目にファイル容量が書かれています。ファイルとホルダーの値を足し算すれば、
そのページのトータルのファイル容量となります。 |
 |