img 要素

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

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

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

<img src="http://www.sugai.f2s.com/nextindexb.png"
     alt="NEXTindex" />

Image モジュール [拙訳]

img

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

実装： DTD

内容モデル

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

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

または

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

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

属性

Common

一般的な属性の集合です。

src = URI

• 必須属性
• 埋め込むべき画像データを URI で指定します。

alt = Text

• 必須属性
• 画像が表示できない場合の為の代替テキストを指定します。

height = Length

• 画像表示枠の高さを指定します。
• 単位なしの数字はピクセル数を意味します。
• 表示可能領域に対するパーセントでも指定できます。
• 表示枠を確保することで、画像を読み込み終わる前に、後続の要素を解釈・描画できるメリットがあります。

width = Length

• 画像表示枠の幅を指定します。
• 単位なしの数字はピクセル数を意味します。
• 表示可能領域に対するパーセントでも指定できます。
• 表示枠を確保することで、画像を読み込み終わる前に、後続の要素を解釈・描画できるメリットがあります。

longdesc = URI

• alt 属性, title 属性では記述しきれない、詳細な記述を提供する文書の 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)

• *.gif
• CompuServe と云う「パソ通」で開発された画像フォーマットです。色数が 256 色に限られているので、ベタ塗りのイラストやアイコンなどに向いています。
• インターネットで利用される画像フォーマットの中では最も古く、画像が表示できるブラウザは殆どサポートしています。
• 但し、 GIF 画像で利用する圧縮方法 (LZW) の特許を持つ会社（ユニシス）がライセンスの取得を要求しており、今後は廃れるものとされています。

JPEG (Joint Photographtc Expert Group)

• *.jpg, *.jpe, *.jpeg
• JPEG と云う団体が策定した圧縮形式 JFIF (JPEG File Interchange Format) を指します。
• 写真のために開発された形式で、フルカラー（約１６万色）を扱え、グラデーションなどの高画質画像を実現できます。
• しかし、単色ベタ塗りの単純な画像ではあまり圧縮できません。
• 圧縮率を選ぶことで、画質とデータサイズの何れを優先させるか選ぶことができます。しかし、圧縮率を上げ過ぎると、 GIF 画像よりも画質が劣化することもあります。

PNG (Portable Network Graphics)

• *.png
• W3C 勧告の画像フォーマットです。フルカラーを扱えます。
• 圧縮のアルゴリズムは ZIP が使われており、圧縮率が高い優れものです。
• 勧告された 1996 当時は GIF 全盛で、PNG はあまり普及してきませんでした。
• 主なブラウザは古くない限りサポートしています。

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

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

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