<source>: Das Medien- oder Bildquelle-Element

Dieses Element unterstützt alle globalen Attribute. Zusätzlich können die folgenden Attribute damit verwendet werden:

type

Gibt den MIME-Mediatyp des Bildes oder einen anderen Medientyp an, optional mit einem codecs-Parameter.

src

Gibt die URL der Medienressource an. Erforderlich, wenn das Elternteil von <source> <audio> oder <video> ist. Nicht erlaubt, wenn das Elternteil <picture> ist.

srcset

Gibt eine kommagetrennte Liste von einem oder mehreren Bild-URLs und deren Beschreibungen an. Erforderlich, wenn das Elternteil von <source> <picture> ist. Nicht erlaubt, wenn das Elternteil <audio> oder <video> ist.

Die Liste besteht aus durch Kommas getrennten Zeichenfolgen, die eine Reihe von möglichen Bildern für den Browser angeben. Jede Zeichenfolge setzt sich zusammen aus:

• Einer URL, die den Bildstandort angibt.
• Einem optionalen Breitenbeschreiber—ein positiver Ganzzahlwert direkt gefolgt von "w", wie 300w.
• Einem optionalen Pixeldichtebeschreiber—eine positive Gleitkommazahl direkt gefolgt von "x", wie 2x.

Jede Zeichenfolge in der Liste muss entweder einen Breitenbeschreiber oder einen Pixeldichtebeschreiber haben, um gültig zu sein. Diese beiden Beschreiber sollten nicht zusammen verwendet werden; es sollte nur einer durchgängig in der Liste verwendet werden. Der Wert jedes Beschreibers in der Liste muss einzigartig sein. Der Browser wählt anhand dieser Beschreiber das am besten geeignete Bild zum Anzeigen aus. Wenn keine Beschreiber angegeben sind, wird der Standardwert 1x verwendet. Wenn auch das Attribut sizes vorhanden ist, muss jede Zeichenfolge einen Breitenbeschreiber enthalten. Wenn der Browser srcset nicht unterstützt, wird src für die Standardbildquelle verwendet.

sizes

Gibt eine Liste von Quellgrößen an, die die endgültige gerenderte Breite des Bildes beschreiben. Erlaubt, wenn das Elternteil von <source> <picture> ist. Nicht erlaubt, wenn das Elternteil <audio> oder <video> ist.

Die Liste besteht aus durch Kommas getrennten Quellgrößen. Jede Quellgröße ist ein Medientyp-Längenpaar. Bevor die Seite dargestellt wird, verwendet der Browser diese Informationen, um zu bestimmen, welches Bild in srcset angezeigt werden soll. Beachten Sie, dass sizes nur wirksam wird, wenn Breitenbeschreiber mit srcset bereitgestellt werden, nicht Pixeldichtebeschreiber (d.h. 200w sollte anstelle von 2x verwendet werden).

media

Gibt die Media-Query für das vorgesehene Medium der Ressource an.

height

Gibt die intrinsische Höhe des Bildes in Pixeln an. Erlaubt, wenn das Elternteil von <source> ein <picture> ist. Nicht erlaubt, wenn das Elternteil <audio> oder <video> ist.

Der Höhenwert muss ein ganzzahliger Wert ohne Einheiten sein.

width

Gibt die intrinsische Breite des Bildes in Pixeln an. Erlaubt, wenn das Elternteil von <source> ein <picture> ist. Nicht erlaubt, wenn das Elternteil <audio> oder <video> ist.

Der Breitenwert muss ein ganzzahliger Wert ohne Einheiten sein.

Das <source>-Element ist ein leeres Element, das bedeutet, dass es nicht nur keinen Inhalt hat, sondern auch kein Schluss-Tag. Das heißt, Sie verwenden niemals </source> in Ihrem HTML.

Der Browser durchläuft eine Liste von <source>-Elementen, um ein Format zu finden, das er unterstützt. Er verwendet das erste, das er anzeigen kann. Für jedes <source>-Element gilt:

• Wenn das type-Attribut nicht angegeben ist, ruft der Browser den Medientyp vom Server ab und bestimmt, ob es angezeigt werden kann. Wenn das Medium nicht gerendert werden kann, überprüft der Browser das nächste <source> in der Liste.
• Wenn das type-Attribut angegeben ist, vergleicht der Browser es sofort mit den Medientypen, die er anzeigen kann. Wird der Typ nicht unterstützt, überspringt der Browser die Abfrage des Servers und prüft direkt das nächste <source>-Element.

Wenn keines der <source>-Elemente eine nutzbare Quelle bereitstellt:

• Im Fall eines <picture>-Elements verwendet der Browser das Bild, das im <img>-Kind des <picture>-Elements angegeben ist.
• Im Fall eines <audio> oder <video>-Elements zeigt der Browser den Inhalt an, der sich zwischen dem öffnenden und schließenden Tag des Elements befindet.

Für Informationen über Bildformate, die von Webbrowsern unterstützt werden, und Anleitungen zur Auswahl geeigneter Formate, sehen Sie sich unseren Leitfaden zu Bilddateitypen und -formaten an. Für Details zu den Video- und Audiomedientypen, die Sie verwenden können, siehe den Leitfaden zu Medientypen und -formaten.

Dieses Beispiel zeigt, wie man ein Video in verschiedenen Formaten anbietet: WebM für Browser, die es unterstützen, Ogg für solche, die Ogg unterstützen, und QuickTime für Browser, die QuickTime unterstützen. Wenn das <audio> oder <video>-Element vom Browser nicht unterstützt wird, wird stattdessen ein Hinweis angezeigt. Unterstützt der Browser das Element, jedoch keines der angegebenen Formate, wird ein error-Ereignis auf dem <audio> oder <video>-Element ausgelöst und die Standard-Mediendateisteuerungen (falls aktiviert) zeigen einen Fehler an. Weitere Details dazu, welche Medienformate Sie verwenden sollten und deren Browserunterstützung, finden Sie in unserem Leitfaden zu Medientypen und -formaten.

<video controls>
  <source src="foo.webm" type="video/webm" />
  <source src="foo.ogg" type="video/ogg" />
  <source src="foo.mov" type="video/quicktime" />
  I'm sorry; your browser doesn't support HTML video.
</video>

Dieses Beispiel zeigt, wie man eine alternative Quelldatei für Viewports über einer bestimmten Breite anbietet. Wenn die Browserumgebung des Nutzers die angegebene media-Bedingung erfüllt, wird das zugehörige <source>-Element ausgewählt. Der Inhalt des src-Attributs wird dann angefordert und dargestellt. Wenn die media-Bedingung nicht erfüllt ist, geht der Browser zum nächsten <source> in der Liste über. Die zweite <source>-Option im unten stehenden Code hat keine media-Bedingung, sodass sie für alle anderen Browserkontexte ausgewählt wird.

<video controls>
  <source src="foo-large.webm" media="(width >= 800px)" />
  <source src="foo.webm" />
  I'm sorry; your browser doesn't support HTML video.
</video>

Für weitere Beispiele ist der Artikel HTML-Video und -Audio im Learn-Bereich eine großartige Ressource.

In diesem Beispiel sind zwei <source>-Elemente innerhalb von <picture> enthalten, die Versionen eines Bildes anbieten, das verwendet wird, wenn der verfügbare Platz bestimmte Breiten überschreitet. Wenn die verfügbare Breite kleiner ist als die kleinste dieser Breiten, wird der Browser auf das im <img>-Element angegebene Bild zurückgreifen.

<picture>
  <source srcset="mdn-logo-wide.png" media="(width >= 800px)" />
  <source srcset="mdn-logo-medium.png" media="(width >= 600px)" />
  <img src="mdn-logo-narrow.png" alt="MDN Web Docs" />
</picture>

Beim <picture>-Element müssen Sie immer ein <img> mit einem Ersatzbild einfügen. Fügen Sie auch ein alt-Attribut für die Barrierefreiheit hinzu, es sei denn, das Bild ist rein dekorativ und irrelevant für den Inhalt.

In diesem Beispiel sind drei <source>-Elemente mit height- und width-Attributen in einem <picture>-Element enthalten. Eine Media Query ermöglicht es dem Browser, ein Bild zur Anzeige mit den height- und width-Attributen basierend auf der Viewport-Größe auszuwählen.

<picture>
  <source
    srcset="landscape.png"
    media="(width >= 1000px)"
    width="1000"
    height="400" />
  <source
    srcset="square.png"
    media="(width >= 800px)"
    width="800"
    height="800" />
  <source
    srcset="portrait.png"
    media="(width >= 600px)"
    width="600"
    height="800" />
  <img
    src="fallback.png"
    alt="Image used when the browser does not support the sources"
    width="500"
    height="400" />
</picture>

• <audio>-Element
• <picture>-Element
• <video>-Element
• Leitfaden zu Bilddateitypen und -formaten
• Leitfaden zu Medientypen und -formaten
• Web-Performance