HTML Element - picture

Beispiel

<picture>
<source media="(min-width:800px)" srcset="images/point-red-dark.png">
<source media="(min-width:400px)" srcset="images/point-red-middle.png">
<img src="point-red-light.png" alt="roter Punkt">
</picture>

Definition und Verwendung

Das picture-Element bietet mehr Flexibilität bei der Angabe von Bildressourcen.

Das picture-Element besteht aus zwei weiteren Elementen: einem oder mehreren source-Elementen und einem img-Element.

Der Browser sucht nach dem ersten source-Element, dessen Media Query der aktuellen Viewport-Breite entspricht. Die dort angegebene Bilddatei (im srcset-Attribut) wird dann im img-Element angezeigt. Das img-Element ist als letztes Kindelement des picture-Elements erforderlich und wird verwendet, wenn keines der source-Elemente zutrifft.

Das picture-Element funktioniert ähnlich wie video und audio. Sie definieren verschiedene Bildquellen, und die erste Quelle, die den Anforderungen entspricht, wird verwendet.

Attribute

Attribute erweitern Elemente um zusätzliche Eigenschaften oder Informationen und beeinflussen deren Bedeutung, Verhalten oder Darstellung. Sie bestehen in der Regel aus einem Attributnamen und einem zugehörigen Wert, wobei die zulässigen Attribute vom jeweiligen Element abhängen und teils allgemein, teils elementbezogen definiert sind.

Eine besondere Gruppe bilden die aria-*-Attribute, die zur Unterstützung der Barrierefreiheit zusätzliche Informationen für assistive Technologien bereitstellen.

Unterstützung von Global- und Event-Attributen

Das picture-Tag unterstützt auch Global- und Event-Attribute.

Browserunterstützung

Die Unterstützung von Elementen und Attributen ist in den gängigen modernen Browsern weitgehend einheitlich gewährleistet. Unterschiede können dennoch in Details, im Einführungszeitpunkt neuer Funktionen oder bei experimentellen Features auftreten.