HTMLLinkElement: imageSrcset プロパティ

Baseline

広く利用可能

この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2023年12月以降、すべてのブラウザーで利用可能です。

完全な互換性情報を見る
もっと詳しく

imageSrcset は HTMLLinkElement インターフェイスのプロパティで、カンマ区切りの 1 つ以上の画像候補文字列を表す文字列です。<link> 要素の imagesrcset 属性の値を反映します。このプロパティを使って、imagesrcset 属性の値を取得または設定できます。

各画像候補文字列には画像の URL と、その候補画像を使用する条件を示す任意の幅記述子やピクセル密度記述子が含まれます。

"images/team-photo.jpg, images/team-photo-retina.jpg 2x, images/team-photo-large.jpg 1400w"

HTML の <link> 要素に rel="preload" と as="image" が設定されている場合、imagesrcset 属性の構文と意味は <img> 要素の srcset 属性と同様です。これは、対応する srcset 属性と sizes 属性の値を持つ <img> 要素が使用する適切なリソースを先読みするよう指定します。

imageSrcset プロパティに幅記述子が含まれる場合、imageSizes プロパティは null 以外でなければなりません。そうでないと、imageSrcset の値は無視されます。

値

1 つ以上の画像候補文字列をカンマ区切りにした文字列です。指定されていない場合は空文字列 "" です。

例

次の <link> 要素があるとします。

html

<link
  rel="preload"
  as="image"
  imagesizes="50vw"
  imagesrcset="bg-narrow.png, bg-wide.png 800w" />

<pre id="log"></pre>

#log {
  padding: 0 0.25rem;
  font-size: 1.2em;
  line-height: 1.4;
}

const logElement = document.querySelector("#log");
function log(text) {
  logElement.innerText = `${logElement.innerText}${text}\n`;
  logElement.scrollTop = logElement.scrollHeight;
}

この imageSrcset プロパティを使って、imagesrcset 属性の値を取得および更新できます。

const link = document.querySelector("link");
log(`Original: ${link.imageSrcset}`);

// 画像候補文字列を追加する
link.imageSrcset += ", bg-huge.png 1200w";
log(`Updated: ${link.imageSrcset}`);