HTMLLinkElement: imageSizes プロパティ

Baseline

広く利用可能

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

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

imageSizes は HTMLLinkElement インターフェイスのプロパティで、imageSrcset プロパティで定義された先読み画像のサイズと条件を示します。<link> 要素の imagesizes 属性の値を反映します。このプロパティを使って、imagesizes 属性の値を取得または設定できます。

<link> 要素の imagesizes 属性は、<img> 要素の sizes 属性と同じく、カンマ区切りのソースサイズのリストです。各ソースサイズには、メディア条件、<length> で表す画像のサイズ、またはキーワード auto が含まれます。auto は先頭に置く必要があります。sizes 属性の構文について詳しくは、<img> を参照してください。

imagesrcset 属性と imagesizes 属性は、rel 属性が preload に設定され、かつ as 属性が image に設定された <link> 要素でのみ意味を持ちます。

値

カンマ区切りのソースサイズで構成される文字列です。指定されていない場合は空文字列 "" です。

例

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

html

<link
  rel="preload"
  as="image"
  imagesrcset="narrow.png, medium.png 600w, wide.png 1200w"
  imagesizes="(width < 400px) 200px, (400px <= width < 600px) 75vw, 50vw" />

<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;
}

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

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

// 値を変更する
link.imageSizes = "50vw";
log(`Updated: ${link.imageSizes}`);