“img”要素:画像｜HTML－havin' a coffee break

＃

要素について

カテゴリー	フロー・コンテンツ、フレージング・コンテンツ、エンベッディッド・コンテンツ、フォーム関連要素、パルパブル・コンテンツ
カテゴリー	“usemap”属性を指定した場合、インタラクティブ・コンテンツ
利用場所	エンベディッド・コンテンツが置ける場所
内容	空
タグの省略	終了タグはありません

“img”要素は画像を埋め込む要素です。

ユーザーの閲覧環境に応じて画像を出し分けたい場合は“picture”要素を使用することができます。

サンプルコード

“width”属性と“height”属性やスタイルシートで大きさを指定していない場合はブラウザのデフォルトの大きさで表示されます。

＃

属性と値

属性		値
属性	説明	値	説明
必須属性
src=""	画像ファイルの指定	URL	埋め込む画像ファイルのURL
任意属性
グローバル属性
alt=""	代替テキスト	テキスト	画像の代わりになるテキスト
srcset=""	使用可能な画像ファイルのセット	URL 画像の横幅w,URL 画像の横幅w,...	ビューポートの幅ごとの表示する画像のURL
srcset=""	使用可能な画像ファイルのセット	URL デバイスピクセル比x,URL デバイスピクセル比x,...	デバイスピクセル比ごとの表示する画像のURL
sizes=""	画像を表示するサイズ	長さ	【“srcset”属性を幅記述子(“w”)で指定した時】画像の表示サイズの横幅
sizes=""	画像を表示するサイズ	メディアクエリ長さ,メディアクエリ長さ,...,長さ	【“srcset”属性を幅記述子(“w”)で指定した時】メディア条件ごとの画像の表示サイズの横幅
crossorigin=""	画像ファイルを読み込む時のCORSリクエストを設定	anonymous	CORSリクエストを実行するが、SSL証明書、HTTP認証などの認証情報は使用しない
crossorigin=""	画像ファイルを読み込む時のCORSリクエストを設定	use-credentials	CORSリクエストを実行し、SSL証明書、HTTP認証などの認証情報を使用する
usemap=""	クライアントサイドイメージマップ	#マップ名	イメージマップの名前(“map”要素の“name”属性の値)
ismap	サーバーサイドイメージマップ	ismap	サーバーサイドイメージマップ
width=""	画像の横幅	正の整数	画像の横幅のピクセル数
height=""	画像の高さ	正の整数	画像の高さのピクセル数
referrerpolicy=""	リファラーポリシーを指定	リファラーポリシー	リファラーポリシーを指定
decoding=""	画像のデコード方式を指定	sync	他のコンテンツと同期的にデコードする
		async	他のコンテンツと非同期的にデコードする
		auto	デコード方式を指定しない
loading=""	画像の読み込みのタイミングを指定	lazy	画像がビューポートに入る直前まで読み込まない
loading=""	画像の読み込みのタイミングを指定	eager	画像を直ちに読み込む
fetchpriority=""	画像の読み込み時の優先度を指定する	high	同じ種類の外部リソースと比較して取得の優先度が高いことを示す
		low	同じ種類の外部リソースと比較して取得の優先度が低いことを示す
		auto	同じ種類の外部リソースと比較時の優先度を自動的に判断すべきであることを示す

“alt”属性はHTML4までと異なり必須属性ではありませんが、必要条件が定められており、ほとんどの場合は必要となります。

“sizes”属性は幅記述子(“w”)が使用された“srcset”属性が指定されている場合は必須です。

過去に定義されていた属性

属性		値
属性	説明	値	説明
longdesc=""	画像を説明した文書へのリンク	URL	画像を説明した文書のURL
name=""	画像の名前	文字列	画像の名前
align=""	垂直方向の位置	bottom	上端揃え
		middle	中央揃え
		top	下端揃え
	水平方向の位置	left	左寄せ
	水平方向の位置	right	右寄せ
border=""	境界線の太さ	正の整数	境界線の太さのピクセル数
hspace=""	画像の上下の余白	ピクセル数	画像の上下の余白のピクセル数
vspace=""	画像の左右の余白	ピクセル数	画像の左右の余白のピクセル数

＃

画像の形式

画像のファイル形式(画像形式)には“BMP”、“TIFF”、“JPEG”、“GIF”などさまざまなものがありますが、インターネット上で一般的に使用される画像形式は“JPEG”、“GIF”、“PNG”の3種類です。

JPEG
拡張子は“.jpg”や“.jpeg”。
一般的にデジタルカメラで写真を撮るとこの形式で保存されるので、ウェブ制作に関わりのない人にも比較的馴染みのある画像形式です。色数の多い複雑な画像を表示するのに向いていてグラデーションも綺麗に表現することができます。
ファイルを保存すると“非可逆圧縮”されるため何度も編集と保存を繰り返すと画質が劣化します。ぼやけたり、かすれたりするので活字や線、色の境界がはっきりした図形などを含む画像には向きません。: GIF
拡張子は“.gif”。
グラデーションをあまり使っていないイラストや線画など、色数が少ない画像を表現するのに向いています。透明色を使用したり、1個のファイルに複数の画像データを保存できるためパラパラマンガのようなアニメーションを表現することも可能です。
“可逆圧縮”するため画像の質は落ちませんが、最大256色しか扱えないため写真のような色数の多い画像をこの形式で保存すると色数が減ってしまうため画像が劣化します。: PNG
拡張子は“.png”。
“GIF”の代替としてインターネット上で使うことを目的として開発された画像形式です。“JPEG”と同じ約1670万色まで使用することが可能なうえ、“可逆圧縮”のため編集と保存を繰り返しても画質が落ちません。
劣化しないので写真などを“JPEG”より綺麗に保存することができますが、その反面ファイルのサイズは大きくなります。アニメーションは表現できませんが、完全な透明だけでなく半透明の色も表現することができます。

一般的にはイラストやロゴなどには“GIF”か“PNG”、写真には“JPEG”というように使い分けられます。

HTMLの仕様では具体的に使用して良い画像形式については定義されておらず、“BMP”など他の画像形式を使用してはいけないわけではありません。ただし、実際に画像が表示できるかはユーザーのデバイスやブラウザがその画像形式に対応しているかによって異なるため、あまり使用されていない形式の画像を使用することは推奨されません。

＃

画像の代替テキスト

“代替テキスト”とは？

画像の“代替テキスト”は画像の内容を説明するためのテキストで、主に以下のような場合に使用されます。

音声読み上げソフトなど画像を認識できないソフトウェアやデバイスに画像の内容を読み取らせるため
指定した画像ファイルが存在しない場合や通信環境の影響など何らかの理由により画像が表示できない時に代わりに表示されるテキストとして表示させるため

“代替テキスト”を示すための“alt”属性は必須属性ではありません。しかし、アクセシビリティの点から非常に重要であり、後述する条件を満たす場合以外は省略してはいけないため事実上は必須属性であると言えます。

“代替テキスト”の指定はSEOの観点から非常に重要とされます。検索エンジンはユーザーに有益な情報を提供するために、画像の中にユーザーの求めている情報がある場合もその画像のあるウェブページを表示します。しかし、検索エンジンは画像の内容をそのままでは理解することができないので、“alt”属性の値を使用して画像の内容を理解し、検索結果に反映させます。

適切な代替テキスト

代替テキストはその画像の代わりとなるテキストです。つまり、その画像と置き換えても文章の意味やコンテンツの内容が変わることのないテキストである必要があります。

以下の画像を例とします。同じ画像でも前後の文脈や画像の意図などによっていくつもの代替テキストを考えることができます。

ある場所を紹介する文章に添えられた画像の場合は代替テキストは以下のように指定します。



<p>大島の北部には旧陸軍の砲台跡があり、そこからは丘の上に赤い風車小屋が立つ風車展望台が見えます。その先には玄界灘が広がり、天気がいい日には水平線上に沖ノ島も望むことができる。</p>

<img src="windmill.jpg" alt="砲台跡から見た風車展望台。">

この画像がある物語の中の場面の場合は代替テキストは以下のように指定します。



<p>モリソンが目を覚ますとそこは見知らぬ場所だった。</p>

<img src="windmill.jpg" alt="青々とした丘の上には小さな赤い風車小屋が立ち、その背後には青い海が見える">

<p>立ち上がったモリソンを心地よい潮風が包み込んだ。</p>

画像が表示されないと文章の内容が変わってしまうので代替テキストで写真に写った風景について説明しています。

ただし、「画像を説明するテキスト」とだけ考えていると不適切な代替テキストになってしまう場合があります。ウェブサイトのロゴの画像の代替テキストを“alt="ウェブサイトのロゴ"”とすると一見画像を説明できているようですが、それでは意味が変わってしまいますので、“alt="havin'a coffee break"”というようにウェブサイトの名前を代替テキストとするのが適切です。



不適切な代替テキスト

<img src="logo.png" alt="ウェブサイトのロゴ">

適切な代替テキスト

<img src="logo.png" alt="havin'a coffee break">

また、ウェブサイトのナビゲーションなどでテキストを画像化している場合はそのテキストを代替テキストとするのが適切です。



<a href="index.html"><img src="home.png" alt="HOME"></a>

“a”要素の中にある画像の“alt”属性の値は“アンカーテキスト”としても扱われます。

“alt”属性を省略できる場合

以下の場合は“alt”属性を省略することができます。

画像がユーザーによりアップロードされるものである場合など、画像の内容がウェブページの製作者にはわからない場合
画像が“figure”要素の中にあり、“figcaption”要素によって画像と同等の情報が記述されている場合

これら以外の場合は“alt”属性が必須となります。



“figcaption”要素で補足説明されている画像

<figure>


<img src="map.gif">

<figcaption>B12出口から出て右へお進みください。約100m進んだところです。</figcaption>


</figure>

“alt”属性に空の値を指定する場合

以下の場合は“alt”属性が必須ですが値を空にします。

画像と同等の意味を持つテキストが前後にあり、代替テキストにより内容が重複してしまう場合
装飾目的の画像であり、その画像が表示されなかったとしてもウェブサイトの内容に影響しない画像の場合(ただし、装飾目的の画像はHTMLではなくスタイルシートを使用して設定することが望ましいとされています)
複数の“img”要素で一つの画像を構成していて、他に代替テキストが指定された“img”要素がある場合
スクリプトの読み込み目的などで、ユーザーに見せることが目的ではない画像の場合



装飾目的の画像

<img src="border.png" alt="">

“title”属性

“alt”属性と似ている属性に“title”属性があります。“title”属性は補足情報を示すための属性で、グローバル属性なのですべての要素に指定することができます。

“title”属性の値となるテキストはその画像を補足するためのテキストなので代替テキストのように画像と意味合いが同じようにする必要はありません。“title”属性は著作権情報や撮影場所、撮影日時、その他画像について説明するための情報を提供するために使用することができます。

一般的なブラウザでは“title”属性の値はその要素にカーソルをあてた時にツールチップとして表示されます。

ツールチップの情報はスマートフォンやタブレットなどの端末では表示できないので“title”属性のみに頼って情報を提供するのはよくありません。

“alt”属性と“title”属性は意味合いが異なりますので、“title”属性があるからといって“alt”属性が不要になるということはありません。

＃

レスポンシブイメージ

多くのウェブサイトで取り入れられるようになっている“レスポンシブウェブデザイン”ですが、レスポンシブウェブデザインでは大きなディスプレイを持つデスクトップデバイスとそれに比べて小さなディスプレイを持つモバイルデバイスの両方に対応する必要があります。

従来のレスポンシブウェブデザインではデスクトップデバイス用に用意した大きな画像をそのままディスプレイの小さいモバイルデバイスでも縮小して表示させたり、CSSやJavascriptを使用して表示する画像を出し分けていましたが、これらの方法では必要以上に大きな画像や不要な画像を読み込んだり、コードが複雑になったりする欠点がありました。

この欠点を解決するのがユーザーの閲覧環境に応じて複数の画像ファイルの中から最適な画像ファイルのみを選択して画像読み込む“レスポンシブイメージ”です。

レスポンシブイメージはHTML5.1から新しく追加された“srcset”属性と“sizes”属性、“picture”要素によって実現することができます。

＃

仕様書

“img”要素はHTML2.0から定義されている要素です。現行の仕様であるHTML Living Standardでも定義されています。

定義されている仕様書


<img>


alt=""
src=""
srcset=""
sizes=""
crossorigin=""
usemap=""
ismap=""
width=""
height=""
referrerpolicy=""
decoding=""
loading=""
fetchpriority=""


longdesc=""
name=""
align=""
border=""
hspace=""
vspace=""

DOMインターフェース




[Exposed=Window,

 LegacyFactoryFunction=Image(optional unsigned long width, optional unsigned long height)]

interface HTMLImageElement : HTMLElement {


  [HTMLConstructor] constructor();



  [CEReactions] attribute DOMString alt;

  [CEReactions] attribute USVString src;

  [CEReactions] attribute USVString srcset;

  [CEReactions] attribute DOMString sizes;

  [CEReactions] attribute DOMString? crossOrigin;

  [CEReactions] attribute DOMString useMap;

  [CEReactions] attribute boolean isMap;

  [CEReactions] attribute unsigned long width;

  [CEReactions] attribute unsigned long height;

  readonly attribute unsigned long naturalWidth;

  readonly attribute unsigned long naturalHeight;

  readonly attribute boolean complete;

  readonly attribute USVString currentSrc;

  [CEReactions] attribute DOMString referrerPolicy;

  [CEReactions] attribute DOMString decoding;

  [CEReactions] attribute DOMString loading;

  [CEReactions] attribute DOMString fetchPriority;



  Promise<undefined> decode();



  // also has obsolete members


};

UAスタイルシート



@namespace url(http://www.w3.org/1999/xhtml);




/* なし */