<source>: Das Media- oder Bildquellen-Element

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

type

Spezifiziert den MIME-Medientyp des Bildes oder einen anderen Medientyp, optional einschließlich eines codecs-Parameters.

src

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

srcset

Spezifiziert eine durch Kommas getrennte Liste von einem oder mehreren Bild-URLs und deren Deskriptoren. 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 Gruppe möglicher Bilder für den Browser angeben. Jede Zeichenfolge setzt sich zusammen aus:

• Einer URL, die den Speicherort eines Bildes angibt.
• Einem optionalen Breiten-Deskriptor—einem positiven Integer direkt gefolgt von "w", wie z.B. 300w.
• Einem optionalen Pixeldichte-Deskriptor—einer positiven Fließkommazahl direkt gefolgt von "x", wie z.B. 2x.

Jede Zeichenfolge in der Liste muss entweder einen Breiten-Deskriptor oder einen Pixeldichte-Deskriptor haben, damit sie gültig ist. Diese beiden Deskriptoren sollten nicht zusammen verwendet werden; nur einer sollte durchgängig in der Liste verwendet werden. Der Wert jedes Deskriptors in der Liste muss einzigartig sein. Der Browser wählt das am besten geeignete Bild zur Anzeige zu einem gegebenen Zeitpunkt basierend auf diesen Deskriptoren. Wenn die Deskriptoren nicht angegeben sind, wird der Standardwert 1x verwendet. Wenn das sizes-Attribut ebenfalls vorhanden ist, dann muss jede Zeichenfolge einen Breiten-Deskriptor enthalten. Wenn der Browser srcset nicht unterstützt, wird src als Standardbildquelle verwendet.

sizes

Gibt eine Liste von Quellgröß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 Quellgrößen, die durch Kommas getrennt sind. Jede Quellgröße ist ein Medienbedingungs-Längen-Paar. Bevor die Seite dargestellt wird, verwendet der Browser diese Informationen, um zu bestimmen, welches Bild aus srcset angezeigt werden soll. Beachten Sie, dass sizes nur dann wirksam wird, wenn Breiten-Deskriptoren mit srcset bereitgestellt werden, nicht Pixeldichte-Deskriptoren (d.h. 200w sollte anstelle von 2x verwendet werden).

media

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

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 ein Integer 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 ein Integer ohne Einheiten sein.

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

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

• Wenn das type-Attribut nicht angegeben ist, holt der Browser den Medientyp vom Server und ermittelt, ob er 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 Serverabfrage und überprüft direkt das nächste <source>-Element.

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

• Im Falle eines <picture>-Elements verwendet der Browser das im <picture>-Element angegebene Bild im <img>-Kind.
• Im Falle eines <audio>- oder <video>-Elements zeigt der Browser den Inhalt an, der zwischen den öffnenden und schließenden Tags des Elements enthalten ist.

Für Informationen über von Webbrowsern unterstützte Bildformate und Leitfäden 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 eine Meldung 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. Weitere Details zu den zu verwendenden Medien-Dateiformaten 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 Ansichtsfenster über einer bestimmten Breite anbietet. Wenn die Browsing-Umgebung eines Benutzers die angegebene media-Bedingung erfüllt, wird das zugeordnete <source>-Element ausgewählt. Der Inhalt seines src-Attributs wird dann angefordert und gerendert. Wenn die media-Bedingung nicht zutrifft, 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 Browsing-Kontexte 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 Bereich "Lernen" eine großartige Ressource.

In diesem Beispiel sind zwei <source>-Elemente innerhalb von <picture> enthalten und bieten Versionen eines Bildes an, die verwendet werden sollen, wenn der verfügbare Raum bestimmte Breiten überschreitet. Wenn die verfügbare Breite kleiner als die kleinste dieser Breiten ist, fällt der Browser auf das im <img>-Element angegebene Bild zurück.

<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> 

Mit dem <picture>-Element müssen Sie immer ein <img> mit einem Fallback-Bild einschließen. 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, basierend auf der Viewport-Größe ein Bild zur Anzeige mit den height- und width-Attributen 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