HTML <picture>-Element
Mit dem HTML-Element <picture> können Sie verschiedene Bilder für verschiedene Geräte oder Bildschirmgrößen anzeigen.
Das HTML-<picture>-Element
Das HTML-Element <picture> bietet Webentwicklern mehr Flexibilität bei der Angabe von Bildressourcen.
Das Element <picture> enthält ein oder mehrere Elemente <source>, die jeweils über das auf unterschiedliche Bilder verweisen srcset-Attribut. Auf diese Weise kann der Browser das Bild auswählen, das am besten zur aktuellen Ansicht und/oder zum aktuellen Gerät passt.
Jedes <source>-Element verfügt über ein media-Attribut, das definiert, wann das Bild am besten geeignet ist.
Beispiel
Zeigen Sie verschiedene Bilder für verschiedene Bildschirmgrößen an:
<picture>
<source media="(min-width: 650px)" srcset="img_food.jpg">
<source media="(min-width: 465px)" srcset="img_car.jpg">
<img src="img_girl.jpg">
</picture>
Try it Yourself »
Notiz: Geben Sie immer ein <img>-Element als letztes untergeordnetes Element des <picture>-Elements. Das Element <img> wird von Browsern verwendet, die das Element <picture> nicht unterstützen oder wenn es keins unterstützt der <source>-Tags stimmen überein.
Wann sollte das Bildelement verwendet werden?
Es gibt zwei Hauptzwecke für das Element <picture>:
1. Bandbreite
Wenn Sie einen kleinen Bildschirm oder ein kleines Gerät haben, ist es nicht notwendig, eine große Bilddatei zu laden. Der Browser verwendet das erste <source>-Element mit übereinstimmenden Attributwerten und ignoriert alle folgenden Elemente.
2. Formatunterstützung
Einige Browser oder Geräte unterstützen möglicherweise nicht alle Bildformate. Mithilfe des Elements <picture> können Sie Bilder aller Formate hinzufügen. Der Browser verwendet dann das erste Format, das er erkennt, und ignoriert alle folgenden Elemente.
Beispiel
Der Browser verwendet das erste Bildformat, das er erkennt:
<picture>
<source srcset="img_avatar.png">
<source srcset="img_girl.jpg">
<img src="img_beatles.gif" alt="Beatles" style="width:auto;">
</picture>
Try it Yourself »
Notiz: Der Browser verwendet das erste <source>-Element mit passenden Attributwerten und ignoriert alle folgenden <source> Elemente.
HTML Bild-Tags
| Tag | Beschreibung |
|---|---|
| <img> | Definiert ein Bild |
| <map> | Definiert eine Imagemap |
| <area> | Definiert einen anklickbaren Bereich innerhalb einer Imagemap |
| <picture> | Definiert einen Container für mehrere Bildressourcen |
Eine vollständige Liste aller verfügbaren HTML-Tags finden Sie in unserer HTML-Tag-Referenz auf unserer Website W3SchoolsDE. DasBeste.
