HTMLImageElement: src プロパティ

単一の画像のみを指定し、ブラウザーがビューポートサイズと画面のピクセル密度に最適な画像を選択できるように複数の画像を指定しなかった場合、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

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

結果

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

HTML

結果

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

HTML

結果