HTMLImageElement.srcset

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

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

条件記述子が提供されない場合（言い換えれば、画像候補が URL のみを提供する場合）、他の候補がどれも一致しない場合、その候補が予備として使用されます。それ以外の場合、条件記述子は 2 つの形式のうちの 1 つです。

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

2 種類の記述子を混在させることもできます。ただし、同じ記述子を指定する画像候補文字列を複数指定することはできません。以下のものはすべて有効な画像候補文字列です。

"images/team-photo.jpg 1x, images/team-photo-retina.jpg 2x, images/team-photo-full.jpg 2048w"

この文字列は、標準的なピクセル密度 (1x) と、その 2 倍のピクセル密度 (2x) で使用するための画像のバージョンを提供します。また、幅が 2048 ピクセルの画像 (2048w) も用意されています。

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

この文字列は、ユーザーエージェントのレンダラーが幅 640px, 960px, 1024px のいずれかの画像を必要とする場合に使用する、ヘッダー画像のバージョンを指定します。その他の幅に使用するために、追加の予備画像候補が無条件に提供されます。

"icon32px.png 32w, icon64px.png 64w, icon-retina.png 2x, icon-ultra.png 3x, icon.svg"

ここでは、幅 32px と 64px、ピクセル密度 2x と 3x のアイコンが提供されています。それ以外の場合は、 SVG ファイルで予備画像が提供されています。候補は異なる画像形式を使用しても構いません。

<img> 要素でどのような画像形式が使用可能であるかかについての詳細は、 画像ファイルの種類と形式ガイド を参照して下さい。

以下の HTML は、既定の画像が、私たちの文書のいくつかの場所で使用している、幅 200 ピクセルの時計の画像であることを示しています。また、 srcset 属性によって、 1x ディスプレイには 200 ピクセルのバージョンを、 2x ディスプレイには 400 ピクセルのバージョンを使用するように指定されています。

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

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

.box {
  width: 200px;
  border: 2px solid rgba(150, 150, 150, 255);
  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 の画像
• レスポンシブ画像
• 画像ファイルの種類と形式ガイド