<picture> Tag - Flexibel Bilder einbinden

Beispiel:

<picture>
  <source media="(min-width: 800px)" srcset="a_welli.jpg">
  <source media="(min-width: 465px)" srcset="a_welli_xs.jpg">
  <img src="a_welli_xs.jpg" alt="Wellis" style="width:auto;">
</picture>

Online testen

Verwendung

Mit dem picture Tag können Bilder flexibler in responsive Designs eingebunden werden. So können z.B. auf kleinen Bildschirmen kleinere Bilder angegeben und geladen werden. Innerhalb des picture Tags wird ein Bild mit img Tag eingebunden, die anderen Bilder mittels des source Tags. Die Bilder werden im source Tag mit dem srcset Attrribut festgelegt. Die Einstellungen können im media Attribut anolog wie im CSS-Code festgelegt werden.