<source>: Das Media- oder Bildquellen-Element

Dieses Element unterstützt alle globalen Attribute. Zudem können folgende Attribute verwendet werden:

type

Gibt den MIME-Mediatyp 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 erlaubt, wenn das übergeordnete Element <picture> ist.

srcset

Gibt eine durch Kommas getrennte Liste von einem oder mehreren Bild-URLs und ihren 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 angeben, die der Browser verwenden kann. Jede Zeichenfolge besteht aus:

• Einer URL, die einen Bildstandort angibt.
• Einer optionalen Breitenbeschreibung—einer positiven ganzen Zahl, gefolgt von "w", wie 300w.
• Einer optionalen Pixeldichte-Beschreibung—einer positiven Gleitkommazahl, gefolgt von "x", wie 2x.

Jede Zeichenfolge in der Liste muss entweder eine Breiten- oder Pixeldichte-Beschreibung haben, um gültig zu sein. Diese beiden Beschreibungen sollten nicht zusammen verwendet werden; nur eine sollte durchgängig in der Liste verwendet werden. Der Wert jeder Beschreibung in der Liste muss einzigartig sein. Der Browser wählt das am besten geeignete Bild zur Anzeige aus, basierend auf diesen Beschreibungen. Wenn die Beschreibungen nicht angegeben sind, wird standardmäßig 1x verwendet. Wenn das sizes-Attribut ebenfalls vorhanden ist, muss jede Zeichenfolge eine Breitenbeschreibung enthalten. Wenn der Browser srcset nicht unterstützt, wird src als Standardbildquelle verwendet.

sizes

Gibt eine Liste von Quellen-Größen 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 Quellen-Größen, die durch Kommas getrennt sind. Jede Quellen-Größe ist ein Medienbedingungs-Längen-Paar. Bevor die Seite aufgebaut wird, verwendet der Browser diese Informationen, um zu bestimmen, welches Bild im srcset angezeigt werden soll. Beachten Sie, dass sizes nur wirksam wird, wenn Breitenbeschreibungen mit srcset bereitgestellt werden, nicht Pixeldichte-Beschreibungen (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 Ganzzahl 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 Ganzzahl ohne Einheiten sein.

Das <source>-Element ist ein leeres Element, das bedeutet, es hat nicht nur keinen Inhalt, sondern auch keinen Schlusstag. Das heißt, Sie verwenden niemals </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 type-Attribut nicht angegeben ist, ruft der Browser die Art des Mediums vom Server ab und prüft, 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 an den Server und prüft direkt das nächste <source>-Element.

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

• Im Fall eines <picture>-Elements wird der Browser auf das im <picture>-Element spezifizierte Bild im <img>-Kind zurückfallen.
• Im Fall eines <audio>- oder <video>-Elements wird der Browser die Inhalte zwischen dem öffnenden und schließenden Tag des Elements anzeigen.

Für Informationen zu von Webbrowsern unterstützten Bildformaten und Anleitungen zur Auswahl geeigneter Formate, siehe unseren Leitfaden zu Bilddateitypen und -formaten. Für Details zu den Video- und Audio-Medientypen, 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 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 keine der angegebenen Formate, wird ein error-Ereignis ausgelöst und die Standard-Mediensteuerungen (falls aktiviert) zeigen einen Fehler an. Für weitere Details zu den zu verwendenden Mediendateiformaten und deren Browserunterstützung, siehe unseren 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 demonstriert, wie man eine alternative Quelldatei für Ansichtsfenster über einer bestimmten Breite anbietet. Wenn die Browserumgebung eines Benutzers die angegebene media-Bedingung erfüllt, wird das zugehörige <source>-Element ausgewählt. Die Inhalte seines src-Attributs werden dann angefordert und gerendert. Wenn die media-Bedingung nicht erfüllt ist, geht der Browser zum nächsten <source> in der Liste über. Die zweite <source>-Option im untenstehenden Code hat keine media-Bedingung, sodass sie für alle anderen Browserkontexte 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, die verwendet werden, wenn der verfügbare Platz bestimmte Breiten überschreitet. Wenn die verfügbare Breite kleiner als die kleinste dieser Breiten ist, fällt der Browser auf das im <img>-Element spezifizierte 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 Ersatzbild 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 irrelevant für den Inhalt.

In diesem Beispiel sind drei <source>-Elemente mit den Attributen height und width in einem <picture>-Element enthalten. Eine Media-Query ermöglicht es dem Browser, ein Bild zur Anzeige mit den Attributen height und width basierend auf der Ansichtsfenster-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