<img> 画像を表示する

取り扱い 現行の標準
カテゴリ フロー・コンテンツ
フレージング・コンテンツ
エンベッデッド・コンテンツ
パルパブル・コンテンツ
親にできる要素 エンベッデッド・コンテンツを受け入れる要素
子にできる要素 なし
対応ブラウザ caniuseで確認

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

HTML
<img src="../images/top_logo.gif" alt="サンプル画像">
表示確認
サンプル画像

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

HTML
<!-- 属性による指定 -->
<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>で要素を囲います。

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

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

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

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

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

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

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

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

HTML
<img src="../images/sample_square_200.png"
	srcset="../images/sample_square_400.png 2x"
	alt="Sample Image">
表示確認
Sample Image

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

HTML
<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">
表示確認
Sample Image

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

<img>に関連するHTMLタグ

オブジェクトやスクリプトを埋め込む要素
<img> 画像を表示する
<picture> 特定の画像に対して複数のメディアソースを提供するコンテナを設置する
<figure> 写真や図表などの自己完結した要素を表す
<figcaption> 参照される写真や図表にキャプションを追加する
<canvas> スクリプトで定義したグラフィックスを描画するための領域を配置する
<audio> ドキュメント内に音声コンテンツを埋め込む
<video> ページ内に動画コンテンツを表示する
<source> 再生候補となる動画や音源などのメディアソースを指定する
<track> 動画や音声ファイルに字幕やキャプションを追加する
<embed> 外部コンテンツを埋め込む
<object> 外部リソースのオブジェクトを埋め込む
<param> パラメーターを指定する
<script> HTMLで実行可能なスクリプトを埋め込む
<noscript> スクリプトが動作しない環境での表示内容を指定する
<meter> 規定範囲内の数量や測定値を表す
<progress> 作業の進捗状況を示すプログレスバーを表示する
<output> 計算結果やユーザーアクションの出力欄を作成する
<dialog> 任意のタイミングで開くダイアログボックスを作成する
<template> ページ読み込み後にスクリプトの実行によって挿入可能な要素を定義する
<slot> ウェブコンポーネントで独自に扱える枠を提供する