HTMLImageElement: src プロパティ

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.

HTMLImageElement の src プロパティは、HTML の src 属性を反映し、<img> 要素に表示する画像を指定します。

値

単一の画像のみを指定し、ブラウザーがビューポートサイズと画面のピクセル密度に最適な画像を選択できるように複数の画像を指定しなかった場合、src 属性は希望する画像の URL を指定する文字列となります。これは、HTML の中で src コンテンツ属性を用いて設定するか、プログラムによって要素の src プロパティを設定することで行うことができます。

srcset コンテンツ属性を使って、画面のピクセル密度に応じた複数の画像の候補を提供する場合は、src 属性で指定された URL は、2 通りの方法で使用されます。

srcset に対応していないブラウザーのための代替画像として使用します。
srcset にサイズ倍率 1x で画像を指定したのと同等になります。つまり、src で指定した画像は、低密度の画面（ふつうの 72 DPI や 96 DPI ディスプレイなど）で使用されます。

さらに、src を sizes （または、対応する sizes コンテンツ属性）および srcset の両方を使用して、ビューポートサイズに基づいて画像を選択する場合、 src 属性は sizes と srcset に対応していないブラウザーのための予備としてのみ使用されます。その他の場合は、全く使用されません。

例

単一の画像の指定

HTML

html
<img
  src="grapefruit-slice-332-332.jpg"
  width="160"
  alt="グレープフルーツのスライスです。おいしそう。" />

結果

一連の画像を src で使用

一連の画像を srcset プロパティで使用する場合、src は古いブラウザー用の予備画像として、あるいは画像の 1x サイズとして機能します。

HTML

結果

ビューポートベース選択時の代替画像の指定

ビューポートベースで画像を選択する際に、sizes プロパティも指定して srcset から選択すると、src プロパティはビューポートベースでの選択に対応していないブラウザーで使用される代替画像として機能します。ビューポートベースの選択に対応しているブラウザーは、この場合は src を無視します。