picture

Wenn wir abhängig der Fenstergröße/ Bereichsgröße unterschiedliche Bilder laden möchten (Traffic!!)

source

srcset=""
- http://bildpfad.de (absolute & relative Pfade möglich)

media=""
- Pflichtangabe! Chronologisch von groß zu klein oder umgekehrt!
- (min-width:950px) (von endlos bis 950 px)
- (min-width:250px) (von endlos (bzw. 950) bis 250 px)

Sind beide Bedingungen nicht erfüllt, wird das normale Bild dargestellt
Unten drunter kommt das Bild, dass angezeigt werden soll, wenn die obigen Bedingungen nicht mehr erfüllt sind. Erst dann wird das Element picture geschlossen



<picture>
    <source srcset="http://volterra.bplaced.de/2.jpg" media="(min-width:1300px)">
    <source srcset="http://volterra.bplaced.de/1.jpg" media="(min-width:900px)">
    <img src="http://volterra.bplaced.de/3.svg" width="500px" alt="BSA">
</picture>


Beispiel