HTMLImageElement: src-Eigenschaft

Wenn Sie nur ein einzelnes Bild bereitstellen, anstatt eines Satzes von Bildern, aus dem der Browser die beste Anpassung an die Viewport-Größe und Pixeldichte auswählt, ist das src-Attribut eine Zeichenkette, die die URL des gewünschten Bildes angibt. Dies kann entweder direkt im HTML mit dem src-Inhaltsattribut oder programmatisch durch Setzen der src-Eigenschaft des Elements festgelegt werden.

Wenn Sie das srcset-Inhaltsattribut verwenden, um mehrere Bildoptionen für verschiedene Pixeldichten bereitzustellen, wird die durch das src-Attribut angegebene URL auf eine von zwei Weisen verwendet:

• als Fallback für Browser, die srcset nicht unterstützen.
• als Äquivalent zur Angabe eines Bildes in srcset mit dem Größenmultiplikator 1x; das heißt, das durch src angegebene Bild wird auf Bildschirmen mit geringer Pixeldichte (wie typischen 72 DPI oder 96 DPI Displays) verwendet.

Darüber hinaus, wenn Sie src zusammen mit sowohl sizes (oder dem entsprechenden sizes Inhaltsattribut) als auch srcset verwenden, um ein Bild basierend auf der Viewport-Größe auszuwählen, wird das src-Attribut nur als Fallback verwendet für Browser, die sizes und srcset nicht unterstützen; andernfalls wird es überhaupt nicht verwendet.

HTML

<img
  src="grapefruit-slice-332-332.jpg"
  width="160"
  alt="Slices of grapefruit, looking yummy." />

Ergebnis

Bei der Verwendung eines Bildsatzes mit der srcset-Eigenschaft dient src entweder als Fallback für ältere Browser oder als 1x-Größe des Bildes.

HTML

Ergebnis

Bei der Viewport-basierten Auswahl eines Bildes aus einem srcset durch zusätzliches Angeben der sizes-Eigenschaft dient die src-Eigenschaft als Fallback, das auf Browsern verwendet wird, die die Viewport-basierte Auswahl nicht unterstützen. Browser, die die Viewport-basierte Auswahl unterstützen, ignorieren src in dieser Situation.

HTML

Ergebnis