W-0011 ページに画像を張り付けるときは

ここに掲載している情報は間違っている可能性が非常に高いので、信用してはならない。これらの情報を信用してアナタが不利益を被ったとしても、それは全てアナタの責任である。

あなたはページに画像を張り込む際、きちんと縦横のサイズと代替テキスト( ALT )を指定していますか?

width/height

IE では設定を変えないと影響ありませんが、 NetscapeNavigator で閲覧する場合、かなり影響が出ます。

HTML では文書中に画像を埋め込むことができますが、画像の扱いはあくまで文章中の要素、言うなれば、ひとつの単語と同じように処理されます。ですから、画像の読み込みが終わるまではそこから先の部分を表示できません(画像の縦横のサイズがわからないと、どれだけ間を開けて次の文字を表示していいかわからないため)

IE はページの描画能力が優れているので、先のテキストもどんどん表示していって、画像のサイズが判明し次第全体を描画し直すという荒技も可能ですが、 NN は残念ながらそうはいきません。そのため、タイトルにサイズの大きい画像をはってある場合など、ページの表示に物凄く時間がかかってしまいます。これを解決するのが、 width 属性height 属性です。

<img src="sample.jpg" alt="サンプル" width="100" height="120">

この二つはは画像の縦横のサイズをあらかじめ指定するためのもので、これを指定してあると、 NN でも画像の入るべきスペースを空けて、その先をどんどん表示できます。特に、リンク集のバナーのように大量の画像が張り付けてある場合、これがあると無いとでは表示速度が大きく変わってきます。

応用として、これはアクセスカウンタにも使えます。あらかじめカウンターのサイズを調べて width ・ height を指定しておけば、カウンタの CGI が調子が悪いためページ全体(カウンタから後の部分全て)が表示されない……なんてこともなくなります。 HTML 中に画像を張り込む場合は、このように必ず画像の縦横サイズを指定しておきましょう

width ・ height 属性

HTML 4.0 以降では、この属性は必須(省略できない)になっています。

代替テキスト( ALTernate text )

代替テキスト( alt 属性)とは、画像の上にマウスを持ってきたときに表示されるアレのことです。

これが代替テキスト。 <img src="sample.jpg" alt="これが代替テキスト。" width="100" height="120">

このように alt に文字列を指定しておくと、画像が読み込まれている間、その文字列が代わりに表示されます。画像を使用したボタンなどは読み込まれるまで何がなんだかわからないので、必ず alt 属性を指定しておきましょう

また、 Lynx や w3m のように「画像を表示できないブラウザ」では画像の代わりに alt の文字列が表示されますし、(視覚障害の人など向けの)音声読み上げ式のブラウザではこの alt の文字列が読み上げられます。たまに、ボタン画像などの重要な画像の alt 属性に全く関係ない文字列を指定している人がいますが、これは慎むべきで、これらのブラウザでは閲覧時にワケが分からないので、 alt は必ず適切なものを指定しましょう。

尚、タイトル横のワンポイント画像など、 alt を指定する意味がないような画像では、「 alt=""」と指定しておきましょう(これは、「この画像に代替文字は不要」ということを表しています)。