写真を公開したり、自分の描いた絵を公開したりするためにはWebページ上に画像を表示しなければなりません。画像の表示には,表示したい場所でimg要素を使います。img要素は空要素でsrc属性を持ちます。src属性で表示したい画像を指定します。また、alt属性で代替テキストを指定します。代替テキストとはその画像が表示されなかった場合に表示される文字です。リンク画像の場合は「クリックした結果どうなるのか」を、ロゴ等の場合はそれと同じ文字を記述します。その画像が大して意味をもたないものであればalt属性の中身は空で構いません。alt属性は必須なので必ず書いてください。次にimg要素の記述例を示します。
<img src="logo.gif" alt="WELCOME TO MY WEB SITE"/>
ここで注意しなければならないのはimg要素はインライン要素なので直接body要素内に置くことはできないという点です。すなわちよく見かける次のような記述は間違っています。
<body>
<img src="logo.gif" alt="WELCOME TO MY WEB SITE" />
</body>
何らかのブロック要素内に置けば問題ないので、例えば次のように書けば正しいです。
<body>
<p><img src="logo.gif" alt="WELCOME TO MY WEB SITE" /></p>
</body>
src属性の指定についてですが、これはa要素のhref属性と同様にURIを指定します。絶対指定、相対指定どちらでも構いません。以下にサンプルを示すので、src属性やalt属性の指定方法など参考にしてください。今回もフォルダごとZIP圧縮してあります。
サンプル4.2：sample4_2.zip
Web上で扱う画像形式は主にGIF、JPEG、PNGの3つです。それぞれの特徴について軽く触れておきます。その画像に応じた形式で保存することで、ファイル容量を抑えることができます。これにより閲覧者に優しいWebページを作成できます。
まずGIFについて。GIFは256色まで扱うことの出来る圧縮形式です。256色までしか必要ない画像、例えばロゴやボタン、アニメ調のイラストなどに適しています。逆に多くの色を必要とする写真などには不向きです。またGIFの大きな特徴に透過色を指定できるという点があります。これにより角丸の四角形などもページの背景色を気にすることなく作成できます。また、GIFはアニメーションを作成できるという特徴もあります。Flashなどの他の動画形式と異なり、見るためにプラグインを必要としないので、多くの環境で作者の意図する通りに表示できます。
次にJPEGについて説明します。JPEGは1670万色まで扱うことの出来る圧縮画像形式で、写真やグラデーション調の画像の保存に適しています。逆に単色ベタ面の多い画像をJPEGで保存するとにじんだように汚くなります。JPEGは不可逆圧縮である、ということに注意しなければなりません。圧縮したデータを元に戻すことは出来ないので、必要であれば元画像のバックアップをとっておいてください。
最後にPNGについて。理論上最大280兆色扱うことの出来る圧縮形式です。 GIFと似たような圧縮形式ですが、圧縮率がGIFより高い、透過色を複数指定できる、などの長所があります。GIFより広い分野で使えると思いますが、後述の短所により写真等には向いていません。短所としてはGIFのようにアニメーションできない、フルカラーにするとJPEGよりファイルサイズが大きくなるなどが挙げられます。最大の短所は各ブラウザの対応状況が完璧ではないという点です。古いブラウザではそもそもPNG形式の画像を表示できないものもあります。表示できるブラウザでも透過機能に対応していなかったり、すべての機能に対応している訳ではありません。