画像を表示する
【XHTML】
<img src="title.jpg" alt="子猫の写真" title="あまりの可愛さに一目惚れしました!" width="177" height="177" />
【HTML4.01】
<img src="title.jpg" alt="子猫の写真" title="あまりの可愛さに一目惚れしました!" width="177" height="177">
alt属性
alt属性は、画像が表示されないときの代替手段です。必須属性であり省略できません。
ユーザー側が好んで画像を表示しない設定にしている時や、管理人側の設定ミスやサーバーのトラブルで画像が表示されないときに、alt属性に記述しておいたテキスト情報が表示されます。(画像が表示されなくても困らないように)
覚えておきたいのは、画像が表示されないときの代わりとなる情報を記述しておくためのものであり、画像そのものの説明に使うものではないという点です。例えば、ある画像をクリックするとトップページへ飛ぶように設定したとします。この場合、alt属性に記述しておく情報は「ホーム」とか「トップページへ」とかになります。(画像が表示されない時「トップページへ」とテキストリンクで表示される)
なお、alt属性をつける必要があるのはimg要素で指定した画像だけです。例えば背景画像にテキスト情報をつける必要はないです。念のため。
意味のない画像の場合
単なる飾りでべつに意味はないという画像の場合もあると思います。このような時は、alt=""と空白とするか、alt="*"としておきます。
これは、HTML4.0以降は(img要素で設定した)画像にはalt属性を指定しなければ文法的に間違いになってしまう仕様のため、たとえ意味のない画像であっても、alt属性を必ず指定する必要があるためです。
それなら「画像1」とでもしたくなりますが、そうしないのは音声ブラウザ関係です。上記のように空白やアスタリスク(*)で記述すると音声ブラウザが読み上げないので都合がいいわけですね。どうせやるならより多くのブラウザにとって都合の良い方法でということです。
ちなみに私はアスタリスク(*)のほうを使います。これは、空白となっていると、ホームページ作成ソフトが「空白になっています」と頻繁にエラーメッセージを返すから。これがうっとおしいので、昔にアスタリスクを入れておけと習いました。
イメージマップの場合
一枚の大きな画像に複数のリンクをつけるのがイメージマップです。この場合はリンクごとにalt属性をつけることになります。
【memo】
HTML5ではalt属性を省略できるようになりました。
title属性
title属性は、省略できます。
(あってもなくてもどちらでもいい)
このtitle属性は、ちょっとした説明をしたいときに使います。ほとんどのブラウザは、画像にマウスポインタをのせたとき、title属性の内容をポップアップ表示します。
【ブラウザとの関係】
その昔、一部のブラウザでは、画像の上にマウスポインタをおくと、alt属性のテキスト情報をポップアップ表示する機能を持っていました。
そのため、alt属性のテキスト情報のほうが、紹介文に使われてしまうこともあったのですが、最近の主要ブラウザは、このあたりはきちんとできており、alt属性ではなく、title属性のテキスト情報をポップアップ表示します。
width属性とheight属性
これも必須属性ではないので省略できます。
画像の幅、高さをピクセル数か、%(パーセント)で指定します。
あるのとないのとでは、なにが違うのかというと、ページ表示の体感速度。読み込もうとしている画像のサイズを、あらかじめブラウザに伝えておくと、ブラウザは画像の表示させるために必要なスペースを確保して、次の表示へ移ります。
画像が表示されるのを待たずに、他の情報がどんどん表示されていくので、画像の表示が遅くとも、あんまり気にならないというわけです。
【memo】
HTML5では画像の幅、高さの指定で、%を使うことができなくなりました。常にピクセル数で指定することになります。