Zum Inhalt springen

source

Definiert eine Quelle für ein <audio>, <video>, oder <picture> Element.

Beispiel:


Picture of a Ha Long Bay sunset
<picture>
 <source
  media="(min-width: 800px)"
  srcset="/images/sunset-360.jpg 360w,
          /images/sunset-720.jpg 720w,
          /images/sunset-1440.jpg 1440w"
  sizes="33.3vw">
 <source
  srcset="/images/sunset-720.jpg 2x,
          /images/sunset-360.jpg 1x">
 <img src="/images/sunset.jpg" alt="Picture of a Ha Long Bay sunset">
</picture>

src

Die URL, unter der die Medien gehostet werden.

"/images/tiramisu.jpg"

Sie können eine relative URL verwenden.

"https://htmlreference.io/images/traffic.jpg"

Sie können eine absolute URL verwenden.

srcset

Definiert eine Liste von verschiedenen Quellen für das gleiche Medium. Der Browser wählt dann die beste Quelle aus.

"/images/sunset-360.jpg 360w,
/images/sunset-720.jpg 720w,
/images/sunset-1440.jpg 1440w"

Sie können einen Breitendeskriptor wie 360w verwenden. Dieser Wert wird durch eine der Quellgrößen (definiert im Attribut sizes) geteilt, um die pixel density zu erhalten.

@html

sizes

Definiert eine Liste von verschiedenen Quell-Größen. Sie können jede von ihnen mit einer Medienabfrage kombinieren.

"(min-width: 800px) 1440px, 720px"

Der Browser verwendet das 1440px Bild (definiert in srcset), wenn der Viewport größer als 800px ist.
Andernfalls verwendet er das 720px.

@html

type

Legt den MIME-Typ der Quelle fest.

"image/jpg"

Sie können nur Audio-, Video- oder Bild-MIME-Typen verwenden.

media

Definiert eine Medienabfrage für eine <Bild>-Quelle.

"(min-width: 800px)"

Die Medien werden nur bei Ansichtsfenstern größer als 800px verwendet.

Nach oben