ナヴィゲーションを讀み飛ばす。

インライン畫像の埋め込み

img要素の概説

HTMLはその性質上，テキスト構造を中核としますが，畫像が有効的に活かされる場合もあります：

畫像の埋込みには，一般にimg要素を用ゐます。行内で使用する空要素で，内容はありません。

しかし，テキストの文脈から獨立して畫像を提示したい場合は，文の集りであるp要素に入れるのは不自然です。また，何の意味もないdiv要素に入れるのも不自然です。そこでリストを柔軟に解釋して，ul要素-li要素の中身に含めてみるのはどうでせうか。

畫像の所在と説明へ: src, longdesc屬性

實際に畫像を表示させるにはsrc屬性に據つて，そのリソースのURIを指定する必要があります。

src="uri" [CT]
この屬性は，文書中に埋め込む畫像リソースの所在をURIによつて指定します。
一般に認知されてゐる畫像フォーマットには，GIF，JPEG，PNGなどが擧げられます。
longdesc="uri" [CT]
この屬性は，その畫像に關する長文説明へのリンクを示すURIを指定します。
この説明は，alt屬性を用ゐて提供される代替テキストを補完する必要があります。

（補足：[CT]――大文字と小文字の區別はデータ型に依存。URIは一般に大文字・小文字を區別する。）

img要素は通常，ブロックの行内でsrc屬性が指し示す畫像に置き換ります。非推奬のalign屬性を用ゐると，行の外へ "浮動（float）" させて左や右に寄せたり，垂直位置を指定できますが，これらはCSSの 'float' および 'vertical-align' で代替すべきです。

參考――PNG形式とlongdesc屬性について

上記資料は少し古い内容ですが，充分參考になります。GIFのLZW特許は日米國で既に期限切れです。

畫像の代替テキスト: alt屬性

img要素には，いかなる場合でもalt屬性が必須であり，alt屬性のないimg要素は不正です。

alt屬性は，畫像が利用できない場合にのみレンダリングされる，代替テキストとして機能します。UAはこれを，畫像をサポートしてゐないか，ある特定の畫像形式をサポートしてゐないか，または畫像を表示しない設定の場合にのみ，傳へねばなりません。

alt="text" [CI]
この屬性は，畫像を利用できないUser Agentのために，代替テキストを提供します。
代替テキストの自然言語を明示するには，汎用屬性であるlang屬性を用ゐます。

（補足：[CI]――大文字と小文字を區別することを意味する。）

代替テキストはデヴァイスの制約だけでなく，畫像の視覺的認知が困難なユーザの助けにもなります。

視覺系ブラウザは，alt屬性の値を "ツールティップ" として示す場合があります。しかし代替テキストは，畫像が利用できない場合にのみ提示されねばならないので，その本質に反してゐます。畫像に對する短い助言を提供するには，title屬性を用ゐます。

畫像の役割を熟慮する

alt屬性のテキストは，前後にあるテキストとの文脈が不自然にならぬやうに，設計すべきです。すなはち，畫像に關するコメントではなく，畫像そのものが代替テキストとしてレンダリングされても違和感のないやうに，その役割をよく考へて設計すべきです。

たとへば見出し（h1-h6）やa要素に畫像だけを含めるなら，その構造やリンク先の情報として成り立つやうに，代替テキストを設計します。次のリストでは象徴的な "ロゴ畫像" を状況に依つて，見出しやアンカー要素の中身でどう用ゐるべきか比較してゐます：

しばしば1〜2項目は複合されます。その場合，リンク先情報はアンカーのtitle屬性で傳へると好いでせう。

次に文脈として不自然な例を擧げます： たとへば "辞書" と書かれたテキストを飾るアイコン畫像を用ゐるのに，alt="辞書" のやうに指定するのはナンセンス極まりありません。これは無駄に同じテキストを繰り返してゐます。後述の指針も參照してください。

代替テキストの善し惡しを確認するには，alt属性値のテキストを實際にレンダリングさせて見ることです。

代替テキストの設計指針

代替テキストは有用ですが，愼重に扱はねばなりません。著者は次の指針を遵守すべきです：

裝飾目的の畫像に對して，ナンセンスな代替テキストを指定しない

たとへば見出しや段落を飾る "赤い丸" の畫像に對して，alt="赤い丸" とするのはナンセンスです。畫像にテキストとしての意味を持たない場合には，明確に alt="" と指定せねばなりません。テキストベースのブラウザに何かしらの目印を提示したいなら alt="*" でも構ひません。何れにせよ著者は，適切に構造をマーク附けしたうへで，裝飾畫像にはスタイルシートを用ゐるべきです。

alt屬性はいかなる場合でも必須，省いてエラー訂正に依存しない

alt屬性が指定されない場合，UAは畫像の存在を知らせるために "ファイル名" などを提示する場合があります。しかしこれでは，ユーザにはその畫像がどのやうな役割なのか，本當に不要なのか，何の意味があるのか，曖昧でよく判りません。

すなはち，ユーザにとつて役に立つかどうかもよく判らない，いくつもの "ゴミデータ" をレンダリングさせる羽目になり，文章の理解を妨げます。前述のとほり，意味を持たせないなら，その意思を明確に傳へるために alt="" と指定せねばなりません。

檢索ヒットを稼ぐ目的だけのために "ダミー・テキスト" を指定しない

かういふ無駄なダミー・テキストは，代替テキストを頼りにしてゐるユーザを失望させるだけでなく，音聲や點字に變換せねばならないUAの處理を遅くします。賢い檢索エンジンは，このやうなテキストを惡用であると判斷し，逆にランクを低下させます。

參考――畫像のアクセス性を向上させるテクニック・知識

より詳しい代替テキストの設計法に關しては，ぜひ上記資料を參照して下さい。非常に爲になります。

畫像の幅と高さ: width, height屬性

img要素の幅と高さは，width, height屬性に據つて，上書可能です。これらはHTML 4では非推奬ではありません。

width="length" [CN]
畫像リソース自身に内在してゐる幅を，この屬性で指定する長さで上書きし，伸縮させます。
値には，ピクセルを示す整數か，利用可能な水平空間に對する割合（例："50%"）を指定します。
height="length" [CN]
畫像リソース自身に内在してゐる高さを，この屬性で指定する長さで上書きし，伸縮させます。
値には，ピクセルを示す整數か，利用可能な垂直空間に對する割合（例："50%"）を指定します。

（補足：[CN]――大文字と小文字の影響を受けないことを意味する。）

これらの屬性を指定すると，User Agentに對して畫像の大きさを知らせるので，畫像に割り當てる空間を豫め確保して置けます。つまり，畫像データの全體的なサイズが確定されるまでに斷續的に繰り返されるであらう，文書の再レンダリングを囘避する效果があります。