HTMLImageElement: srcset-Eigenschaft

Ein String, der eine kommagetrennte Liste von einem oder mehreren Bildkandidaten-Strings enthält, die verwendet werden, um zu bestimmen, welche Bildressource innerhalb des <img>-Elements dargestellt werden soll, das durch das HTMLImageElement repräsentiert wird.

Jeder Bildkandidat-String muss mit einer gültigen URL beginnen, die eine nicht-interaktive Grafikressource referenziert. Dies wird gefolgt von einem Leerraum und dann einem Bedingungs-Deskriptor, der die Umstände angibt, unter denen das angegebene Bild verwendet werden sollte. Leerzeichen, mit Ausnahme derjenigen, die die URL und den entsprechenden Bedingungs-Deskriptor trennen, werden ignoriert; dies schließt sowohl führende und nachfolgende Leerzeichen als auch Leerzeichen vor oder nach jedem Komma ein.

Der Bedingungs-Deskriptor kann eine von zwei Formen annehmen:

• Um anzugeben, dass die durch den Bildkandidaten-String angegebene Bildressource verwendet werden soll, wenn das Bild mit einer bestimmten Breite in Pixel gerendert wird, liefern Sie einen Breitendeskriptor, der aus der Zahl, die diese Breite in Pixeln angibt, gefolgt von dem Kleinbuchstaben "w" besteht. Beispielsweise, um eine Bildressource bereitzustellen, die verwendet wird, wenn der Renderer ein 450 Pixel breites Bild benötigt, verwenden Sie den Breitendeskriptor-String 450w. Die angegebene Breite muss eine positive, nicht null, ganze Zahl 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 die Bedingung angibt, unter der die entsprechende Bildressource als Pixeldichte des Displays verwendet werden sollte. Dies wird angegeben, indem die Pixeldichte als positiver, nicht null, Gleitkommawert geschrieben wird, gefolgt vom Kleinbuchstaben "x". Beispielsweise, um anzugeben, dass das entsprechende Bild verwendet werden soll, wenn die Pixeldichte doppelt so hoch ist wie die Standarddichte, können Sie den Pixeldichte-Deskriptor 2x oder 2.0x angeben.

Wenn der Bedingungs-Deskriptor nicht angegeben wird (mit anderen Worten, der Bildkandidat liefert nur eine URL), wird dem Kandidaten ein Standard-Deskriptor von "1x" zugewiesen.

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

Dieser String bietet Versionen eines Bildes sowohl für die Standard-Pixeldichte (nicht beschrieben, Standardwert 1x zugewiesen) als auch für die doppelte Pixeldichte (2x) an.

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 Standard-Deskriptor von 1x zu.

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

Dieser String liefert Versionen eines Header-Bildes, die verwendet werden sollen, wenn der Benutzeragent-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 ist, alle Ressourcen innerhalb dieses srcset ebenfalls mit "w"-Deskriptoren beschrieben werden müssen und das src des Bildelements nicht als Kandidat betrachtet wird.

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

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

Das CSS spezifiziert, dass das Bild und sein umgebendes Rechteck 200 Pixel im Quadrat sein und einen einfachen Rahmen darum haben sollten. Ebenfalls angegeben wird das word-break-Attribut, das den break-all-Wert verwendet, um dem Browser mitzuteilen, den String innerhalb der verfügbaren Breite umzubrechen, unabhängig davon, wo im String 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's load-Ereignis ausgeführt. Er verwendet die currentSrc-Eigenschaft des Bildes, um die vom 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 unten angezeigten Ergebnis wird die ausgewählte URL je nach Anzeige entweder die 1x- oder die 2x-Version des Bildes widerspiegeln. Wenn Sie sowohl Standard- als auch Hochauflösungsanzeigen haben, versuchen Sie, dieses Fenster zwischen ihnen hin und her zu bewegen und die Seite neu zu laden, um die Ergebnisse zu sehen, die sich ändern.

Für weitere Beispiele sehen Sie sich unseren Leitfaden zu responsiven Bildern an.

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