<img>：画像を読み込んで表示する要素・HTMLタグの解説

<img>タグの解説

<img>は、ドキュメントの中に画像を埋め込み表示させます。src属性で画像ファイルを指定し、alt属性で代用テキストを指定できます。代用テキストはアクセシビリティの観点から極力記述することを推奨します。

画像の幅と高さは、レスポンシブデザインに対応するためにCSS（スタイルシート）でフレキシブルに変化させることもできます。ブラウザが画面をレンダリングする祭に、レイアウトが崩れてしまうことを防ぐには、各画像に対して固有の幅を設定することで回避できます。

<img>タグの特徴

• レイアウトの初期値はインラインです。文章の改行には影響を与えません。
• この要素は空要素です。開始タグのあとに終了タグを記述する必要はありません。
• この要素はあらゆる形式の画像を読み込みます。JPEG、GIF、PNGの他、WebPやAVIFなどの新しい形式も普及しつつあります。ブラウザの実装状況を見極めて使い分けましょう。

<img>要素に指定できる属性

src

画像を呼び出すためのURLを指定します。必須項目です。

alt

画像を表す代替テキストを指定します。この値を空（alt=""）にすると、コンテンツの文脈において画像は重要な箇所ではないことを示し、視覚ブラウザーではない場合にレンダリングを省略することがあります。

height

画像の高さを単位なしのピクセル値で表します。この属性を指定しておくと、ブラウザが画像を読み込む前に縦横比を計算し、その領域を確保します。

width

画像の幅を単位なしのピクセル値で表します。この属性を指定しておくと、ブラウザが画像を読み込む前に縦横比を計算し、その領域を確保します。

loading

画像の読み込み方についてブラウザに指示します。既定値のeagerでは、画像の設置箇所が画面に入る前から読み込みを開始します。この値をlazyにすると、可視化する範囲に画像の設置箇所が移動するまで、読み込みを遅らせます。これはリソースの軽減に貢献しますが、JavaScriptが無効化されている環境では無視されます。

decoding

ブラウザに画像をデコードする祭のヒントを与えます。

• sync：他のコンテンツと同期的にデコードします。
• async：他のコンテンツと非同期的にデコードします。
• auto：ブラウザーの既定に従います。

sizes

srcset属性で指定されたソースの中から表示に相応しいサイズを提案します。値にはメディア環境と採用するソースを指定します。複数列挙することも可能で、条件に一致したものをブラウザが採用します。

srcset

利用可能な画像のソースをセットで示します。画像のURLとサイズを並べて、sizes属性で指定した条件に一致したものを採用させます。この属性で実行されるのは表示ではなくダウンロードであるようです。

ismap

この属性は論理属性で値はありません。ismap属性が加えられた画像は、サーバーサイドマップであることを示します。これをクリックした時、x,y値で示される正確な座標をサーバーに送信します。

usemap

イメージマップを使用する祭に<map>から呼び出される名前を設定します。「#」から始まる固有の文字列を与えて下さい。

crossorigin

画像の読み込みに関するCORSリクエストの仕方を定義します。CORSとは「Cross Origin Resource Sharing」の略で、別のドメインに置かれたリソースの扱いに関する内容です。この属性が与えられた場合、その画像ファイルを読み込む時にCORSリクエストが送信されます。

グローバル属性

全てのHTML要素に指定できる共通の属性です。詳細は一覧表で解説します。

イベントハンドラ

全てのHTML要素に指定できるコンテンツ属性です。

<img>要素の使い方とサンプルコード

この要素の最も基本的な書き方は以下の通りです。読み込む画像ファイルのURLをsrc属性で指定し、代替テキストをalt属性に記述します。

<img src="file" alt="value">

それでは、実際に画像を表示させてみましょう。alt属性の内容は、画像が表している内容を言語化したものにして下さい。サイト名の画像に対して「ロゴ画像」等の表記を当てはめるのは適切ではありません。

<img src="/images/logo.png" alt="ウェブランサー" width="640" height="65">

height属性とwidth属性に指定する値は元のファイルが持つ最大のサイズです。画面に表示される表面上の大きさはスタイルシートで調整します。以下のように指定すれば、レイアウトに収まりきらないサイズであっても柔軟に縮小してくれます。

img {
	width: 100%;
	height: auto;
	/* 任意の最大値 */
	max-width: 300px;
	max-height: 300px;
}

画像を読み込むタイミングを指定する

loading属性を使うと、ブラウザが画面をレンダリングする際に、どのタイミングで画像を読み込むかを指定できます。既定値では、ビューポートの可視領域に入っているかに関わらず即座に読み込みます。重い画像がページの下部に配置されている場合、読み込みを遅延させてページのレンダリングを優先させることができます。トップ画像など最初から可視領域に入っている場合は指定しないで下さい。

<img src="file.png" alt="File" width="2400" height="1200" loading="lazy">

画像のデコードを行うタイミングを指定する

ブラウザが画像ファイルを取得してデコーディングする際、DOMコンテンツのレンダリングと同時に行うか、非同期にレンダリングが終わった後にデコーディングするかを指定できます。これはキャッシュがある場合に有効です。非同期にすることで問題が改善される状況であれば、次のように記述します。

<img src="file.png" alt="File" width="2400" height="1200" decoding="async">

複数のリソースを選べるようにする

スマートフォンの普及や画面解像度の進歩によって、画像などのメディアにも様々なサイズが求められるようになりました。ここでは、画像を呼び出す際に複数のソースから選べるようにする方法を解説します。

以下の例では、高解像度に対応したディスプレイ（Retina）だった場合に、srcset属性に指定されたソースが呼び出されるようになっています。この値の末尾に記述した「2x」というのが、二倍の解像度が条件であることを表しています。

<img
	src="/images/sample_square_200.png"
	srcset="/images/sample_square_400.png 2x"
	alt="Sample">

続いて、画面のサイズに応じて画像のソースを変更させる例です。以下の例では、ビューポートの幅が400px以下であれば200pxの画像を表示し、それ以外は400pxにするようにsizes属性で指示しています。srcset属性の画像URLの後ろに付加する「w」の値は、ソースの幅を示しています。

<img
	src="/images/sample_square_200.png"
	srcset="/images/sample_square_200.png 200w,
			/images/sample_square_400.png 400w"
	sizes="(max-width: 400px) 200px, 400px"
	alt="Sample Image">

以上のような条件分岐は、<picture>や<source>を使ったマークアップでも可能です。どちらの方が実装しやすいか、環境を踏まえて検討して下さい。