<source>: Das Media- oder Bildquellenelement

Dieses Element unterstützt alle globalen Attribute. Darüber hinaus können die folgenden Attribute damit verwendet werden:

type

Gibt den MIME-Medientyp des Bildes oder einen 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 zulässig, wenn das übergeordnete Element <picture> ist.

srcset

Gibt eine durch Kommas getrennte Liste von einem oder mehreren Bild-URLs und deren Beschreibungen an. Erforderlich, wenn das übergeordnete Element von <source> <picture> ist. Nicht zulässig, 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 angeben. Jede Zeichenfolge besteht aus:

• Einer URL, die den Speicherort eines Bildes angibt.
• Einem optionalen Breitenbeschreiber—einer positiven ganzen Zahl, die direkt von "w" gefolgt wird, wie 300w.
• Einem optionalen Pixeldichte-Beschreiber—einer positiven Fließkommazahl, die direkt von "x" gefolgt wird, wie 2x.

Jede Zeichenfolge in der Liste muss entweder einen Breiten- oder einen Pixeldichte-Beschreiber haben, um gültig zu sein. Diese beiden Beschreiber sollten nicht zusammen verwendet werden; nur einer sollte konsequent in der gesamten Liste verwendet werden. Der Wert jedes Beschreibers in der Liste muss einzigartig sein. Der Browser wählt das am besten geeignete Bild zur Anzeige zu einem bestimmten Zeitpunkt basierend auf diesen Beschreibern. Wenn die Beschreiber nicht angegeben sind, wird der Standardwert 1x verwendet. Wenn das sizes-Attribut ebenfalls vorhanden ist, muss jede Zeichenfolge einen Breitenbeschreiber enthalten. Wenn der Browser srcset nicht unterstützt, wird src als Standard-Bildquelle verwendet.

sizes

Gibt eine Liste von Quellgrößen an, die die endgültig gerenderte Breite des Bildes beschreiben. Erlaubt, wenn das übergeordnete Element von <source> <picture> ist. Nicht zulässig, wenn das übergeordnete Element <audio> oder <video> ist.

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

media

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

height

Gibt die intrinsische Höhe des Bildes in Pixeln an. Erlaubt, 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. Erlaubt, 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 leeres Element, was bedeutet, dass es keinen Inhalt hat und keinen Schlusstag benötigt. Das heißt, Sie verwenden nie </source> in Ihrem HTML.

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

• 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. Wenn der Typ nicht unterstützt wird, überspringt der Browser die Abfrage des Servers und überprüft direkt das nächste <source>-Element.

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

• Im Falle eines <picture>-Elements wird der Browser auf das Bild zurückgreifen, das im <img>-Kind des <picture>-Elements angegeben ist.
• Im Falle eines <audio>- oder <video>-Elements wird der Browser auf das zwischen den öffnenden und schließenden Tags des Elements enthaltene Content-Element zurückgreifen.

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

Dieses Beispiel zeigt, wie man ein Video in verschiedenen Formaten bereitstellt: 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, jedoch keines der angegebenen Formate, wird ein error-Ereignis ausgelöst und die Standard-Mediensteuerungen (falls aktiviert) zeigen einen Fehler an. Weitere Details zu den zu verwendenden Mediendateiformaten 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 eine alternative Quelldatei für Viewports über einer bestimmten Breite angeboten wird. Wenn die Browserumgebung eines 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 übereinstimmt, geht der Browser zum nächsten <source> in der Liste über. Die zweite <source>-Option im untenstehenden Code hat keine media-Bedingung, daher wird sie für alle anderen Browsing-Kontexte ausgewählt.

<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 eines <picture> enthalten, die Versionen eines Bildes bieten, die verwendet werden sollen, wenn der verfügbare Platz bestimmte Breiten übersteigt. 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>

Mit dem <picture>-Element müssen Sie immer ein <img> mit einem Fallback-Bild einfügen. 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 Media Query ermöglicht es dem Browser, ein Bild mit den height- und width-Attributen basierend auf der Viewport-Größe auszuwählen.

<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 Bilddateitypen und -formaten
• Leitfaden zu Medientypen und -formaten
• Web-Performance