HTMLImageElement: srcset-Eigenschaft

Ein String, der eine durch Kommas getrennte Liste von einem oder mehreren Bildkandidaten-Strings enthält, die verwendet werden, um zu bestimmen, welche Bildressource in dem durch HTMLImageElement repräsentierten <img>-Element angezeigt werden soll.

Jeder Bildkandidaten-String muss mit einer gültigen URL beginnen, die eine nicht-interaktive grafische Ressource referenziert. Darauf folgt ein Leerzeichen und dann ein Konditionsdeskriptor, der die Umstände angibt, unter denen das angegebene Bild verwendet werden soll. Leerzeichen, abgesehen von dem Leerzeichen, das die URL und den entsprechenden Konditionsdeskriptor trennt, werden ignoriert; dies schließt sowohl führende und nachgestellte Leerzeichen als auch Leerzeichen vor oder nach jedem Komma ein.

Der Konditionsdeskriptor kann in einer von zwei Formen vorliegen:

• Um anzugeben, dass die durch den Bildkandidaten-String spezifizierte Bildressource verwendet werden soll, wenn das Bild mit einer bestimmten Breite in Pixeln gerendert wird, geben Sie einen Breiten-Deskriptor an, der aus der Zahl besteht, die diese Breite in Pixeln angibt, gefolgt von dem Kleinbuchstaben "w". Zum Beispiel, um eine Bildressource bereitzustellen, die verwendet wird, wenn der Renderer ein 450 Pixel breites Bild benötigt, verwenden Sie den Breiten-Deskriptor-String 450w. Die angegebene Breite muss eine positive, nicht null Zahl sein und muss der intrinsischen Breite des referenzierten Bildes entsprechen. Wenn ein srcset "w"-Deskriptoren enthält, verwendet der Browser diese Deskriptoren zusammen mit dem sizes-Attribut, um eine Ressource auszuwählen.
• Alternativ können Sie einen Pixeldichten-Deskriptor verwenden, der angibt, unter welchen Bedingungen die entsprechende Bildressource in Abhängigkeit von der Pixeldichte des Displays verwendet werden sollte. Dies erfolgt, indem die Pixeldichte als positiver, nicht null, Gleitkommawert angegeben wird, gefolgt von dem Kleinbuchstaben "x". Als Beispiel, um zu sagen, dass das entsprechende Bild verwendet werden soll, wenn die Pixeldichte doppelt so hoch wie die Standarddichte ist, können Sie den Pixeldichten-Deskriptor 2x oder 2.0x angeben.

Wenn der Konditionsdeskriptor nicht bereitgestellt wird (mit anderen Worten, der Bildkandidat bietet nur eine URL), wird dem Kandidaten ein Standarddeskriptor von "1x" zugewiesen.

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

Dieser String bietet Versionen eines Bildes, die bei der Standardpixeldichte (nicht beschrieben, als Standard 1x zugewiesen) sowie der doppelten Pixeldichte (2x) verwendet werden sollen.

Wenn das srcset eines Bildelements "x"-Deskriptoren enthält, betrachten Browser auch die URL im src-Attribut (falls vorhanden) als Kandidaten und weisen ihr einen Standarddeskriptor von 1x zu.

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

Dieser String bietet Versionen eines Header-Bildes zur Verwendung, wenn der User-Agent-Renderer ein Bild mit einer Breite von 640px, 960px oder 1024px benötigt.

Beachten Sie, dass, wenn eine Ressource in einem srcset mit einem "w"-Deskriptor beschrieben wird, alle Ressourcen innerhalb dieses srcset auch mit "w"-Deskriptoren beschrieben werden müssen und das Bild-Element src nicht als Kandidat berücksichtigt wird.

Das folgende HTML gibt an, dass die Standardbildressource, die im src-Attribut enthalten ist, für 1x-Displays verwendet werden soll und dass eine 400-Pixel-Version (im srcset enthalten und mit einem 2x-Deskriptor versehen) für 2x-Displays verwendet werden soll.

<div class="box">
  <img
    src="/en-US/docs/Web/HTML/Element/img/clock-demo-200px.png"
    alt="Clock"
    srcset="/en-US/docs/Web/HTML/Element/img/clock-demo-400px.png 2x" />
</div>

Das CSS spezifiziert, dass das Bild und sein umgebendes Feld 200 Pixel groß sein sollen und einen einfachen Rahmen um sich haben sollen. Außerdem wird das word-break-Attribut mit dem Wert break-all bereitgestellt, um dem Browser mitzuteilen, dass der Text innerhalb der verfügbaren Breite umgebrochen werden soll, unabhängig davon, wo im Text der Umbruch erfolgen muss.

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

.box img {
  width: 200px;
}

Der folgende Code wird innerhalb eines Handlers für das window-load-Ereignis ausgeführt. Er verwendet die currentSrc-Eigenschaft des Bildes, um die von dem Browser aus dem srcset ausgewählte URL abzurufen und anzuzeigen.

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

  const newElem = document.createElement("p");
  newElem.textContent = "Image: ";
  newElem.appendChild(document.createElement("code")).textContent =
    image.currentSrc;
  box.appendChild(newElem);
});

Im angezeigten Ergebnis unten entspricht die ausgewählte URL der Frage, ob Ihr Display die 1x- oder die 2x-Version des Bildes ausgewählt hat. Wenn Sie sowohl Standard- als auch hochauflösende Displays haben, versuchen Sie, dieses Fenster zwischen ihnen zu verschieben und die Seite neu zu laden, um die Änderungen zu sehen.

Für weitere Beispiele siehe unseren Leitfaden zu responsive images.

• HTML-Bilder
• Responsive Bilder
• Leitfaden zu Bilddateitypen und Formaten