HTML <Bild> -Element
Das HTML <picture>-Element ermöglicht es Ihnen, unterschiedliche Bilder für unterschiedliche Geräte oder Bildschirmgrößen anzuzeigen.
Das HTML <Bild>-Element
Das HTML <picture>-Element gibt Webentwicklern mehr Flexibilität bei der Angabe von Bildressourcen.
Das <picture>Element enthält ein oder mehrere Elemente, die jeweils über das
Attribut <source>auf verschiedene Bilder verweisen . srcsetAuf diese Weise kann der Browser das Bild auswählen, das am besten zur aktuellen Ansicht und/oder zum Gerät passt.
Jedes <source>Element hat ein
mediaAttribut, das definiert, wann das Bild am besten geeignet ist.
Beispiel
Unterschiedliche Bilder für unterschiedliche Bildschirmgrößen anzeigen:
<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>
Hinweis: Geben Sie ein <img>Element immer als letztes untergeordnetes Element des <picture>Elements an. Das <img>Element wird von Browsern verwendet, die das Element nicht unterstützen <picture>, oder wenn keines der <source>Tags übereinstimmt.
Wann das Bildelement verwendet werden sollte
Es gibt zwei Hauptzwecke für das <picture>Element:
1. Bandbreite
Wenn Sie einen kleinen Bildschirm oder ein kleines Gerät haben, ist es nicht erforderlich, 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. Durch die Verwendung des
<picture>Elements können Sie Bilder aller Formate hinzufügen, und der Browser verwendet 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>
Hinweis: Der Browser verwendet das erste <source>Element mit übereinstimmenden Attributwerten und ignoriert alle folgenden <source>Elemente.
HTML-Bild-Tags
| Tag | Description |
|---|---|
| <img> | Defines an image |
| <map> | Defines an image map |
| <area> | Defines a clickable area inside an image map |
| <picture> | Defines a container for multiple image resources |
Eine vollständige Liste aller verfügbaren HTML-Tags finden Sie in unserer HTML-Tag-Referenz .