<img> 画像を表示する

<img>タグの説明

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

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

<img>タグの特徴

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

<img>に指定できる主な属性

src="画像URL"

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

alt="代替テキスト"

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

width="値" height="値"

画像の大きさをpx値で指定できます。あらかじめ固有の表示領域を与えておくと、レンダリングの最中にレイアウトが崩れる事を防ぎます。

loading

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

sizes

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

srcset

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

ismap

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

usemap

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

crossorigin

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

decoding

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

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

グローバル属性

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

イベントハンドラ

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

<img>の使い方とサンプル

画像はURLを指定するだけで画面に呼び出すことができます。その祭、参照中のドキュメントと同じドメイン下に存在するソースであれば、相対パスで呼び出しが完了します。

<img src="../images/top_logo.gif" alt="サンプル画像">

上記のように記述した場合、画像は親要素の幅や高さに応じて自動的に縮尺します。画像を元の大きさから変えたくなければ、固有のサイズを与えることで解決します。以下の内容は、HTMLの属性とCSSのプロパティによる指定を比較した例です。

<!-- 属性による指定 -->
<img src="../images/top_logo.gif" alt="サンプル画像" width="240" height="100">

<!-- CSSによる指定 -->
<img src="../images/top_logo.gif" alt="サンプル画像" style="width:240px; height:100px;">

画像をリンクにする

画像にリンクを与えるには、文字と同じように<a>で要素を囲います。

<a href="../">
	<img src="../images/logo.png" alt="ウェブランサー" width="240">
</a>

画像の読み込みを遅らせる

loading属性にlazyを指定すると、画像の読み込みを遅らせてページの表示を優先させることができます。これによるメリットは、ユーザーが視認可能な領域に近づくまで画像のリクエストが発生しないため、HTTPリクエストの節約が見込めることです。

画像の読み込みに関する遅延処理は、ネットワークに優しいだけでなく目的のコンテツを優先的に読み込ませる効果もあります。アイキャッチや装飾のための画像よりも文章やスクリプトを優先させた方が有益な場面も多いはずです。画像を多く使っているページや、ページの下部に設置する画像には積極的に採用していきましょう。

<img src="../images/top_logo.gif" alt="サンプル画像" loading="lazy">

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

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

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

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

続いて、画面のサイズに応じて画像のソースを変更させる例です。以下の例では、ビューポートの幅が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>を使ったマークアップでも可能です。どちらの方が実装しやすいか、最新の環境を踏まえて検討して下さい。