HTMLImageElement: srcset-Eigenschaft

Ein String, der eine kommagetrennte Liste von einem oder mehreren Bildkandidaten-Strings enthält, die bei der Bestimmung, welche Bildressource im <img>-Element angezeigt werden soll, verwendet werden.

Jeder Bildkandidaten-String muss mit einer gültigen URL beginnen, die auf eine nicht-interaktive Grafikressource verweist. Es folgt ein Leerzeichen und dann ein Bedingungsdeskriptor, der die Umstände angibt, unter denen das angegebene Bild verwendet werden sollte. Leerzeichen, mit Ausnahme derjenigen, die die URL und den entsprechenden Bedingungsdeskriptor trennen, werden ignoriert; dies schließt sowohl führende und nachfolgende Leerzeichen als auch Leerzeichen vor oder nach jedem Komma ein.

Der Bedingungsdeskriptor kann eine von zwei Formen annehmen:

• Um anzugeben, dass die vom Bildkandidaten-String angegebene Bildressource verwendet werden sollte, wenn das Bild mit einer bestimmten Breite in Pixeln gerendert wird, geben Sie einen Breitendeskriptor an, der aus der Zahl besteht, die diese Breite in Pixeln angibt, gefolgt von dem Kleinbuchstaben "w". Um beispielsweise eine Bildressource bereitzustellen, die verwendet werden soll, wenn der Renderer ein 450 Pixel breites Bild benötigt, verwenden Sie den Breitendeskriptor-String 450w. Die angegebene Breite muss eine positive, von Null verschiedene Ganzzahl sein und muss mit der intrinsischen Breite des referenzierten Bildes übereinstimmen. 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 Pixeldichte-Deskriptor verwenden, der angibt, unter welcher Bedingung die entsprechende Bildressource als Pixeldichte des Displays verwendet werden sollte. Dies wird angegeben, indem die Pixeldichte als positiver, von Null verschiedener Gleitkommawert gefolgt vom Kleinbuchstaben "x" angegeben wird. Um beispielsweise zu deklarieren, dass das entsprechende Bild verwendet werden sollte, wenn die Pixeldichte doppelt so hoch wie die Standarddichte ist, können Sie den Pixeldichte-Deskriptor 2x oder 2.0x verwenden.

Wenn der Bedingungsdeskriptor nicht angegeben wird (mit anderen Worten, wenn der Bildkandidat nur eine URL liefert), wird dem Kandidaten ein Standarddeskriptor von "1x" zugewiesen.

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

Dieser String liefert Versionen eines Bildes zur Verwendung bei der Standardpixeldichte (undeklariert, mit einem Standardwert von 1x zugewiesen) sowie bei doppelter Pixeldichte (2x).

Wenn ein Bilderlement "x"-Deskriptoren in srcset 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 liefert Versionen eines Headerbildes zur Verwendung, wenn der User Agent's Renderer ein Bild mit einer Breite von 640px, 960px oder 1024px benötigt.

Beachten Sie, dass, wenn irgendeine 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 Bilderlement's src nicht als Kandidat betrachtet wird.

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

<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 gibt an, dass das Bild und sein umgebender Rahmen 200 Pixel quadratisch sein sollten und dass es einen einfachen Rahmen darum haben sollte. Ebenfalls angegeben ist das word-break-Attribut mit dem Wert break-all, um dem Browser zu sagen, dass die Zeichenfolge innerhalb der verfügbaren Breite umgebrochen werden soll, unabhängig davon, wo in der Zeichenfolge 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. Es verwendet die currentSrc-Eigenschaft des Bildes, um die vom Browser aus dem srcset gewä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 unten angezeigten Ausgabeergebnis wird die ausgewählte URL je nachdem angezeigt, ob Ihr Display die 1x- oder die 2x-Version des Bildes auswählt. Wenn Sie zufällig sowohl Standard- als auch hochauflösende Displays haben, versuchen Sie, dieses Fenster zwischen ihnen zu verschieben und die Seite neu zu laden, um zu sehen, wie sich die Ergebnisse ändern.

Für weitere Beispiele, siehe unseren Leitfaden zu responsiven Bildern.

• Bilder in HTML
• Responsives Bild
• Leitfaden zu Bilddateitypen und -formaten