---
title: <picture>
slug: Web/HTML/Element/picture
translation_of: Web/HTML/Element/picture
---
<div>{{HTMLRef}}</div>

<p>Das <strong>HTML-Element <code>&lt;picture&gt;</code> </strong>ist ein Container, der zur Angabe mehrerer {{HTMLElement("source")}}s (Bildquellen) für ein {{HTMLElement("img")}} dient. Der Browser wird die Quelle verwenden, die aufgrund des gegenwärtigen Seitenlayouts (die Begrenzungen der Box, in der das Bild auftaucht) und dem Anzeigegerät (z.B. ein normales or hiDPI-Gerät) am geeignesten erscheint.</p>

<h2 id="Usage_Context">Usage Context</h2>

<table class="properties">
 <tbody>
  <tr>
   <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Content categories</a></th>
   <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Flow content</a>, phrasing content, embedded content</td>
  </tr>
  <tr>
   <th scope="row">Permitted content</th>
   <td>Null oder mehr {{HTMLElement("source")}}-Elemente, gefolgt von einem {{HTMLElement("img")}}-Element, optional vermischt mit Skript-unterstützenden Elementen.</td>
  </tr>
  <tr>
   <th scope="row">Tag omission</th>
   <td>{{no_tag_omission}}</td>
  </tr>
  <tr>
   <th scope="row">Permitted parent elements</th>
   <td>
    <p>Jegliches Element, das eingebetteten Inhalt erlaubt.</p>
   </td>
  </tr>
  <tr>
   <th scope="row">DOM interface</th>
   <td>{{domxref("HTMLPictureElement")}}</td>
  </tr>
 </tbody>
</table>

<h2 id="Attribute">Attribute</h2>

<p>Dieses Element beinhaltet nur <a href="/en-US/docs/Web/HTML/Global_attributes">globale Attribute</a>.</p>

<h2 id="Beispiel_1_Verwendung_des_Attributs_media">Beispiel 1: Verwendung des Attributs <code>media</code></h2>

<p>Das Attribut <code>media</code> erlaubt die Angabe eines Media-Query, das der User Agent auswertet, um das gewünschte {{HTMLElement("source")}}-Element auszuwählen. Wenn ein Media Query zu <code>false</code> evaluiert, wird das {{HTMLElement("source")}}-Element übersprungen.</p>

<pre class="brush: html">&lt;picture&gt;
 &lt;source srcset="mdn-logo-wide.png" media="(min-width: 600px)"&gt;
 &lt;img src="mdn-logo-narrow.png" alt="MDN"&gt;
&lt;/picture&gt;
</pre>

<h2 id="Beispiel_2_Verwendung_des_Attributs_type">Beispiel 2: Verwendung des Attributs <code>type</code></h2>

<p>Das Attribut type erlaubt die Angabe eines MIME-Typs für Ressourcen, die im Attribut srcset des Elements {{HTMLElement("source")}} angegeben sind. Wenn der User Agent den angegebenen Typ nicht unterstützt, wird das {{HTMLElement("source")}}-Element übersprungen.</p>

<pre class="brush: html">​&lt;picture&gt;
 &lt;source srcset="mdn-logo.svg" type="image/svg+xml"&gt;
 &lt;img src="mdn-logo.png" alt="MDN"&gt;
&lt;/picture&gt;
</pre>

<p> </p>

<h2 id="Beispiel_3_Verwendung_des_Attributs_srcset">Beispiel 3: Verwendung des Attributs <code>srcset</code></h2>

<p>Das Attribut srcset erlaubt es verschiedene Bildgrößen auszuliefern. Höhere Auflösungen werden bei höheren Zoomstufen im Browser, oder bei Bildschirmen mit hohen Pixeldichten (DPI) geladen.</p>

<pre class="brush: html">​&lt;picture&gt;
 &lt;source srcset="mdn-logo.png 1x, mdn-logo_x2.png 2x, mdn-logo_x3.png 3x"&gt;
 &lt;img src="mdn-logo.png" alt="MDN"&gt;
&lt;/picture&gt;</pre>

<p> </p>

<h2 id="Spezifikation">Spezifikation</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Spezifikation</th>
   <th scope="col">Status</th>
   <th scope="col">Kommentar</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('HTML WHATWG', 'embedded-content.html#the-picture-element', '&lt;picture&gt;')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td>Initial definition</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>

{{Compat("html.elements.picture")}}

<h2 id="Siehe_auch">Siehe auch</h2>

<ul>
 <li>{{HTMLElement("img")}}-Element</li>
</ul>