img 要素

since: 31st/Aug./2001; last modified: 14th/Sep./2001

img 要素タイプは画像モジュールに含まれており、 XHTML 1.1 の内容モデルでは、内容セット Inline に含まれ、DTD では %InlSpecial.class; に含まれます。従って、例えば p 要素タイプの子要素として定義されています。

名前img
分類Inline
意味Embedded image
日本語埋め込み画像

img 要素タイプは、文書に画像を埋め込む為のものです。 src 属性の値の URI が指し示す画像が、当該要素の位置に挿入されます。同時に、 alt 属性で、画像が表示できない場合の為の代替テキストを記述します。これら二つの属性は必須属性です。

<img src="http://www.sugai.f2s.com/nextindexb.png"
     alt="NEXTindex" />
Image モジュール [拙訳]
img
要素 属性 最小内容モデル
img Common, alt* (Text), height (Length), longdesc (URI), src* (URI), width (Length) EMPTY

このモジュールが使われるときは、テキスト・モジュールの内容セット Inline に、 img 要素を追加する。

実装: DTD

内容モデル

img 要素タイプは内容を持ちません。したがって、タグの記述方法が特殊です。空要素には、 meta, link, br 要素などが挙げられます。

<img src="../NEXTindexb.jpg" alt="NEXTindex" />

または

<img src="../NEXTindexb.jpg" alt="NEXTindex"></img>

後方互換の為には、前者で書くべきです。

属性

Common
一般的な属性の集合です。
src = URI
alt = Text
height = Length
width = Length
longdesc = URI

HTML 4 では廃止予定と定義されていた border, align 属性などは XHTML 1.1 では廃止されています。これらは CSS で実現すべきです。

img 要素利用上の注意

必須属性: src 属性と alt 属性

画像を埋め込むには、最低限度次の情報をブラウザに与える必要があります。

  1. 埋め込む画像ファイルを参照する URI
  2. 画像が表示できなかった場合の代替テキスト

それぞれは src 属性と alt 属性で記述し、これらの属性は img 要素の必須属性です。

次のサンプルでは、画像ファイルは当該文書の一つ上の階層のディレクトリに存在する banner.png であり、画像が表示できなかった場合は「NEXTindex」と表示されます。

<img arc="../banner.png" alt="NEXTindex" />

このサンプルでは相対 URI で参照しましたが、 src 属性の値には絶対 URI (full URI) も使えます。

title 属性と alt 属性

img 要素には alt 属性が必須です。画像が表示できなければ、何も意味を持たないような装飾用の画像などは、次のように空の alt 属性を与えます。

<img src="../img/vbar.png" alt=" " />

画像が表示された場合の補足情報を提供したい場合は、 Common で定義されている title 属性を指定します。

<img alt=" " title="家族の写真" src="./family.jpg" />

表示領域の確保: height 属性と width 属性

height 属性と width 属性は、画像の表領域を明示します。このことによって、ブラウザは画像を読み込む前に、必要な空間を確保できるので、周囲の要素を先に解釈・描画できます。画像を完全に読み込まないと後続の要素が表示出来ない場合に比べて、閲覧時の体感速度が向上します。

<img alt="NEXTindex" title="NEXTindex バナ-"
     src="../../nextindexb.png"
     height="31" width="92" />

この例では、単位なしの数字でサイズを指定しました。これはピクセル数を意味します。一方、表示可能領域を 100% とするパーセント値でも指定できます:

<img alt="NEXTindex" title="NEXTindex タイトル画像"
     src="../../nextindex.png"
     height="20%" width="50%" />

画像フォーマット

画像フォーマットには色々な種類があり、サポートしている形式はブラウザに依存します。一般に、次のフォーマットは殆どのブラウザがサポートしています:

GIF (Graphic Interchange Format)
JPEG (Joint Photographtc Expert Group)
PNG (Portable Network Graphics)

EPS (*.ps, *.eps), BMP (*.bmp) などは通常は利用しません。

GIF に関しては、使用許諾条件が付きますので、商用利用などの際は、必ず確認を取ってください。ライセンス契約されたツールで作成された GIF 画像は使用可とされています。

どのフォーマットを選ぶにせよ、目的に応じて適切なフォーマットで圧縮することで、綺麗な画像を適切なバイト数で用意できます。写真などの色数が多いものは JPEG 、ベタ塗りのイラストなどは PNG, GIF のように住み分けられているようです。


Copyright © 2001, SUGAI, Manabu. All rights reserved. 著作権は放棄していません。
SEO [PR] ”š‘¬!–³—¿ƒuƒƒO –³—¿ƒz[ƒ€ƒy[ƒWŠJÝ –³—¿ƒ‰ƒCƒu•ú‘—