HTML <source> srcset-Eigenschaft

HTML <source> Tag

Definition und Verwendung

srcset Diese Eigenschaft legt die URLs der Bilder fest, die in verschiedenen Fällen verwendet werden.

Wenn <source> verwendet wird <picture> Diese Eigenschaft ist in diesem Fall obligatorisch.

Beispiel

Ein <picture>-Element, das zwei Quelldateien und ein Reservierungsbild enthält:

<picture>
  <source media="(min-width:650px)" srcset="img_pink_flowers.jpg">
  <source media="(min-width:465px)" srcset="img_white_flower.jpg">
  <img src="img_orange_flowers.jpg" alt="Blumen" style="width:auto;">
</picture>

Selbst ausprobieren

Syntax

<source srcset="URL">

Attributwert

Wert Beschreibung
URL

Legt die URL des Bildes fest.

Mögliche Werte:

  • Absoluter URL - Verweist auf eine andere Website (z.B. href="http://www.example.com/flower.jpg")
  • Relativer URL - Verweist auf Dateien innerhalb der Website (z.B. href="flower.jpg")

Browser-Unterstützung

Die in der Tabelle genannten Zahlen beziehen sich auf die erste Browser-Version, die diese Eigenschaft vollständig unterstützt.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
38.0 13.0 38.0 9.1 25.0

HTML <source> Tag