画像の使い方

基本の画像タグ

<IMG src="">

<IMG>はHTMLに画像を表示するためのタグです。画像を表示するには<IMG>タグのみでは不十分で、src属性を必ず使います。src属性はソースを表し、ダブルコーテーションマーク""の中にGIF、またはJPGファイルの名前を入れます。このタグはエンプティタグで、終了タグはありません。
各画像は処理に時間がかかり、ドキュメント全体を表示するまでの速度を遅くします。
一つの画像を複数回使用するようにすることで、この問題は多少回避できます。

文章中に画像を表示するには下記のようにします。

<IMG src="画像ファイル名" />

明示的な指定がない場合、画像の底辺とテキストの行があうよう表示されます。

SPIDER

<IMG src="monkey.gif" />SPIDER

画像の代わりに文字列を表示：alt="文字列"

alternatibe：ブラウザが画像を読み込まれないときに、画像の代わりに表示されるテキストを指定するための属性です。

<IMG src="image.gif" alt="ようこそ！" />

画像の大きさを変更：width,height="値"

画像の表示サイズを変更できます。

<IMG src="image.gif" width="x" height="y"/>

値x.yには、パーセント（ % ）またはピクセル数を入れます(1pixel=0.339mm)。

パーセントで指定する場合は、オリジナルの画像に対するパーセンテージではなく、ウインドウの大きさに対するパーセンテージです。表示される画像の大きさはウインドウサイズに左右される相対的な大きさとなります。

ピクセル

<IMG src="spider.gif" width="100" height="100" />

<IMG src="spider.gif" width="50" height="50" />

<IMG src="spider.gif" width="50" height="100" />

縦横の比率を大幅に変更することもできます。

パーセント

<IMG src="spider.gif" width="20%" />

注）ブラウザのウインドウの大きさを変更してみてください。画像の大きさも変わります。

---

高度な画像処理

インターレース処理をする

インターレースとは、gifファイル処理のオプションの一つで、これを利用したイメージは、決めの粗いものから細かいものへと4段階の変化をへて表示されます。

透過GIFファイル

模様や色のある背景に画像を張り付けるとき、画像の背景が邪魔なときがよくあります。このようなときは、イメージの背景を透明にしましょう。この手法はPhotoshopなどの画像ツールを使います。