HTMLImageElement: srcset プロパティ

1 つまたは複数の画像候補文字列のカンマ区切りリストが入った文字列です。これは、HTMLImageElement で表される <img> 要素の中にどの画像リソースを表示するかを決定する際に用いられます。

それぞれの画像候補文字列は、非インタラクティブなグラフィックリソースを参照する有効な URL で始める必要があります。その後にホワイトスペースが続き、さらにその画像がどのような状況で使用されるかを示す条件記述子が続きます。 URL と条件記述子を区切るもの以外のホワイトスペースは無視されます。これには、先頭と末尾の空白、および各カンマの前後の空白が含まれます。

条件記述子は 2 つの形式のうちのどちらかを取ります。

• 画像候補文字列で指定された画像リソースが、特定のピクセル幅でレンダリングされるときに使用されるべきであることを示すために、ピクセル幅を示す数値と小文字の "w" から成る幅記述子を提供します。例えば、レンダラーが 450 ピクセルの幅の画像を必要とするときに使用する画像リソースを提供するには、幅の記述子文字列として 450w を使用します。指定する幅は 0 でない正の整数でなければならず、参照される画像の内在的な幅と一致しなければなりません。srcset が "w" 記述子を含む場合、ブラウザーはこれらの記述子を sizes 属性と組み合わせてリソースを選択します。
• また、ピクセル密度記述子 を用いて、対応する画像リソースを画面の画素密度として使用する条件を指定することができます。これは、画素密度を正のゼロでない浮動小数点値で記述し、その後に小文字の "x" を記述することで、記述します。例えば、ピクセル密度が標準密度の 2 倍である場合に対応する画像を使用すべきことを示すには、ピクセル密度記述子として 2x または 2.0x を指定することができます。

条件記述子が提供されなかった場合（言い換えれば、画像候補文字列が URL しかなかった場合）、候補には自動的に既定の記述子として "1x" が割り当てられます。

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

この文字列は、標準的なピクセル密度（未記述、既定の 1x が割り当てられる）と、その 2 倍のピクセル密度 (2x) で使用するための画像のバージョンを提供しています。

画像要素の srcset に "x" 記述子が含まれている場合、ブラウザーは（もしあれば）src 属性の URL も候補として考慮し、既定の記述子として 1x を割り当てます。

"header640.png 640w, header960.png 960w, header1024.png 1024w"

この文字列は、ユーザーエージェントの描画幅 640px, 960px, 1024px のいずれかの画像を必要とする場合に使用する、ヘッダー画像のバージョンを指定します。

なお、srcset 内のリソースの何れかが "w" 記述子を伴って記述された場合は、srcset 内のすべてのリソースを "w" 記述子で記述する必要があり、この画像要素の src は候補として考慮されません。

以下の HTML は、src 属性に記述されている既定の画像リソースを 1x の画面で使用し、400 ピクセル版（srcset 属性で記述され、2x 記述子が割り当てられているもの）は 2x の画面で使用するよう示しています。

<div class="box">
  <img
    src="/en-us/web/html/element/img/clock-demo-200px.png"
    alt="Clock"
    srcset="/en-us/web/html/element/img/clock-demo-400px.png 2x" />
</div>

CSS では、画像とその周囲のボックスは 200 ピクセル四方で、その周囲に簡単な境界線を付けるよう指定しています。また、 word-break 属性も提供されており、 break-all の値を使用して、文字列のどこで折り返しが発生するかに関わらず、利用できる幅内で文字列を折り返すようにブラウザーに指示しています。

.box {
  width: 200px;
  border: 2px solid rgb(150, 150, 150);
  padding: 0.5em;
  word-break: break-all;
}

.box img {
  width: 200px;
}

次のコードは window の load イベントに対するハンドラー内で実行されます。これは、画像の currentSrc プロパティを使用して、 srcset からブラウザーが選択した URL を取得し、表示するものです。

window.addEventListener("load", () => {
  let box = document.querySelector(".box");
  let image = box.querySelector("img");

  let newElem = document.createElement("p");
  newElem.innerHTML = `画像: <code>${image.currentSrc}</code>`;
  box.appendChild(newElem);
});

以下の出力では、選択された URL は、画面が 1x と 2x のどちらのバージョンの画像を選択したかに対応して変わります。標準画面と高密度画面の両方をお持ちの方は、このウィンドウを移動してページを再読み込みすると、結果が変わることをご確認ください。

それ以外の例については、レスポンシブ画像のガイドを参照してください。

• HTML の画像
• レスポンシブ画像
• 画像ファイルの種類と形式ガイド