<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-Medientyp des Bildes oder anderen Medientyp an, optional einschließlich eines codecs-Parameters.

src

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

srcset

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

Die Liste besteht aus durch Kommas getrennten Zeichenfolgen, die eine Reihe möglicher Bilder für den Browser anzeigen. Jede Zeichenfolge setzt sich zusammen aus:

• Einer URL, die den Speicherort des Bildes angibt.
• Einem optionalen Breitenbeschreiber—eine positive ganze Zahl, direkt gefolgt von "w", wie 300w.
• Einem optionalen Pixeldichtebeschreiber—eine positive Fließkommazahl, 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; nur einer sollte konsistent in der gesamten Liste verwendet werden. Der Wert jedes Beschreibers in der Liste muss einzigartig sein. Der Browser wählt basierend auf diesen Beschreibungen das am besten geeignete Bild aus, das zu einem bestimmten Zeitpunkt angezeigt werden soll. Wenn die Beschreiber nicht angegeben werden, wird der Standardwert 1x verwendet. Wenn das sizes-Attribut auch 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 Größen der Quelle an, die die endgültige gerenderte Breite des Bildes beschreiben. Zulässig, wenn das übergeordnete Element von <source> <picture> ist. Nicht zulässig, wenn das übergeordnete Element <audio> oder <video> ist.

Die Liste besteht aus Quellengrößen, die durch Kommas getrennt sind. Jede Quellengröße ist ein Medienbedingung-Längen-Paar. Vor dem Layout der Seite 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 statt 2x verwendet werden).

media

Gibt die für das Medium vorgesehene Medienabfrage an.

height

Gibt die intrinsische Höhe des Bildes in Pixeln an. Zulässig, wenn das übergeordnete Element von <source> ein <picture> ist. Nicht zulässig, wenn das übergeordnete Element <audio> oder <video> ist.

Der Höhenwert muss eine ganze Zahl ohne Einheiten sein.

width

Gibt die intrinsische Breite des Bildes in Pixeln an. Zulässig, wenn das übergeordnete Element von <source> ein <picture> ist. Nicht zulässig, wenn das übergeordnete Element <audio> oder <video> ist.

Der Breitenwert muss eine ganze Zahl ohne Einheiten sein.

Das <source>-Element ist ein void element, was bedeutet, dass es nicht nur keinen Inhalt hat, sondern auch keinen Abschlusstag. Das heißt, Sie verwenden nie </source> in Ihrem HTML.

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

• Wenn das type-Attribut nicht angegeben ist, ruft der Browser den Medientyp vom Server ab und prüft, ob es angezeigt werden kann. Wenn das Medium nicht gerendert werden kann, prü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 es anzeigen kann. Wenn der Typ nicht unterstützt wird, überspringt der Browser das Abfragen des Servers und überprüft direkt das nächste <source>-Element.

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

• Im Fall eines <picture>-Elements wird der Browser auf das Bild zurückgreifen, das im <img>-Kind des <picture>-Elements angegeben ist.
• Im Fall eines <audio>- oder <video>-Elements zeigt der Browser den Inhalt innerhalb der Öffnungs- und Schlusstags des Elements an.

Für Informationen zu von Webbrowsern unterstützten Bildformaten und Anleitung zur Auswahl geeigneter Formate siehe unseren Leitfaden zu Bilddateitypen und -formaten. Für Details zu den Video- und Audiomedientypen, die Sie verwenden können, siehe den Leitfaden zu Medientypen und -formaten.

Dieses Beispiel zeigt, wie ein Video in verschiedenen Formaten angeboten werden kann: WebM für Browser, die es unterstützen, Ogg für diejenigen, 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. Wenn der Browser das Element unterstützt, aber keines der angegebenen Formate unterstützt, wird ein error-Ereignis ausgelöst, und die Standard-Mediensteuerelemente (falls aktiviert) werden einen Fehler anzeigen. Weitere Details zu den zu verwendenden Mediendateiformaten und deren Browser-Unterstü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 eine alternative Quelldatei für Viewports über einer bestimmten Breite angeboten werden kann. Wenn die Browserumgebung des Benutzers die angegebene media-Bedingung erfüllt, wird das zugehörige <source>-Element ausgewählt. Der Inhalt seines src-Attributs wird dann angefordert und gerendert. Wenn die media-Bedingung nicht erfüllt ist, wird der Browser zum nächsten <source> in der Liste übergehen. Die zweite <source>-Option im untenstehenden Code hat keine media-Bedingung, sodass sie für alle anderen Browserkontexte gewählt wird.

<video controls>
  <source src="foo-large.webm" media="(min-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 Lernbereich eine großartige Ressource.

In diesem Beispiel sind zwei <source>-Elemente innerhalb einer <picture> enthalten, die Versionen eines Bildes bereitstellen, die verwendet werden, 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="(min-width: 800px)" />
  <source srcset="mdn-logo-medium.png" media="(min-width: 600px)" />
  <img src="mdn-logo-narrow.png" alt="MDN Web Docs" />
</picture>

Beim <picture>-Element müssen Sie immer ein <img> mit einem Fallback-Bild einschließen. Stellen Sie außerdem sicher, dass Sie ein alt-Attribut für die Barrierefreiheit hinzufügen, es sei denn, das Bild ist rein dekorativ und für den Inhalt irrelevant.

In diesem Beispiel sind drei <source>-Elemente mit height- und width-Attributen in einem <picture>-Element enthalten. Eine Medienabfrage ermöglicht es dem Browser, ein Bild anzuzeigen, das mit den height- und width-Attributen basierend auf der [Ansichtshafen]-Größe (/de/docs/Glossary/Viewport) ausgewählt wird.

<picture>
  <source
    srcset="landscape.png"
    media="(min-width: 1000px)"
    width="1000"
    height="400" />
  <source
    srcset="square.png"
    media="(min-width: 800px)"
    width="800"
    height="800" />
  <source
    srcset="portrait.png"
    media="(min-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 Bilddateiformaten und -typen
• Leitfaden zu Medientypen und -formaten
• Web-Performance