<source>: Das Medien- oder Bildquellenelement

Dieses Element unterstützt alle globalen Attribute. Zusätzlich können die folgenden Attribute 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 kommagetrennte 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 — eine positive ganze Zahl, gefolgt von "w", wie 300w.
• Einem optionalen Pixeldichtemerkmal — eine positive Fließkommazahl, gefolgt von "x", wie 2x.

Jede Zeichenfolge in der Liste muss entweder einen Breitenbeschreiber oder einen Pixeldichtemerkmal enthalten, 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 eindeutig sein. Basierend auf diesen Beschreibern wählt der Browser das am besten geeignete Bild zu einem gegebenen Zeitpunkt aus. Wenn die Beschreiber nicht angegeben werden, wird der Standardwert 1x verwendet. Wenn das Attribut sizes 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 Quellenkapazitäten an, die die endgültige gerenderte Breite des Bildes beschreiben. Erlaubt, 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 Quellenkapazitäten. Jede Quellenkapazität ist eine Medienbedingungslängenpaar. Vor der Layout-Berechnung der Seite verwendet der Browser diese Informationen, um zu bestimmen, welches im srcset definierte Bild angezeigt werden soll. Beachten Sie, dass sizes nur wirksam wird, wenn Breitenbeschreiber mit srcset bereitgestellt werden, nicht Pixeldichtemerkmale (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 Pixel an. Erlaubt, wenn das übergeordnete Element von <source> ein <picture> ist. Nicht erlaubt, 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 Pixel an. Erlaubt, wenn das übergeordnete Element von <source> ein <picture> ist. Nicht erlaubt, 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 schließenden Tag hat. 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 er anzeigen kann. Für jedes <source>-Element:

• Wenn das Attribut type nicht angegeben ist, ruft der Browser vom Server den Medientyp ab und bestimmt, 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 Attribut type 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 prüft direkt das nächste <source>-Element.

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

• Im Fall eines <picture>-Elements wird der Browser auf das im <picture>-Element angegebene Bild im untergeordneten <img>-Element zurückfallen.
• Im Fall eines <audio>- oder <video>-Elements wird der Browser den zwischen dem öffnenden und schließenden Tag des Elements eingefügten Inhalt anzeigen.

Für Informationen über von Webbrowsern unterstützte Bildformate und Anleitungen zur Auswahl geeigneter Formate siehe unseren Leitfaden für Bilddateitypen und -formate. 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 wird: WebM für Browser, die es unterstützen, Ogg für jene, 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 eine Notiz angezeigt. Wenn der Browser das Element unterstützt, aber keines der angegebenen Formate unterstützt, wird ein error-Ereignis auf dem <audio>- oder <video>-Element ausgelöst und die standardmäßigen Mediensteuerungen (falls aktiviert) zeigen einen Fehler an. Für weitere Details, welche Medienformate verwendet werden sollen und deren Browserunterstützung, lesen Sie in unserem Leitfaden zu Medientypen und -formaten nach.

<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 Browsing-Umgebung eines Benutzers die angegebene media-Bedingung erfüllt, wird das zugehörige <source>-Element gewählt. Der Inhalt seines src-Attributs wird dann angefordert und gerendert. Wenn die media-Bedingung nicht übereinstimmt, wird der Browser zum nächsten <source> in der Liste übergehen. Die zweite <source>-Option im Code unten hat keine media-Bedingung, sodass sie in allen anderen Browsing-Kontexten ausgewä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 von <picture> enthalten, die Versionen eines Bildes bereitstellen, wenn der verfügbare Platz bestimmte Breiten überschreitet. Wenn die verfügbare Breite kleiner ist als die kleinste dieser Breiten, fällt der Browser auf das im <img>-Element angegebene Bild zurück.

<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 einschließen. Stellen Sie auch 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, basierend auf der Viewport-Größe ein anzuzeigendes Bild mit den height- und width-Attributen 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 für Bilddateitypen und -formate
• Leitfaden zu Medientypen und -formaten
• Web-Performance