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

結果