Revision 1105279 of <picture>

<div>{{HTMLRef}}{{SeeCompatTable}}</div>

<p><strong><code>HTML &lt;picture&gt;</code> 要素</strong>は、特定の{{HTMLElement("img")}}のための複数の{{HTMLElement("source")}}を含むことができるコンテナです。ブラウザは、現在のページレイアウト（画像が表示されるボックスの制約）と（通常やhiDPIデバイスのような）表示のためのデバイスに応じて最適な source を選択します。</p>

<h2 id="使用コンテキスト">使用コンテキスト</h2>

<ul class="htmlelt">
 <li><dfn><a href="/ja/docs/Web/HTML/Content_categories">コンテンツカテゴリ</a></dfn> <a href="https://developer.mozilla.org/ja/docs/Web/HTML/Content_categories#Flow_content">フローコンテンツ</a>、フレージングコンテンツ、埋め込みコンテンツ</li>
 <li><dfn>許可されたコンテンツ</dfn>0個以上の{{HTMLElement("source")}} 要素とオプションとしてscript-supporting要素と混合された1つの{{HTMLElement("img")}} 要素</li>
 <li><dfn>タグの省略</dfn> {{no_tag_omission}}</li>
 <li><dfn>許可された親要素</dfn>埋め込みコンテンツを受け入れるすべての要素</li>
 <li><dfn>DOMインターフェイス</dfn> {{domxref("HTMLPictureElement")}}</li>
</ul>

<h2 id="属性">属性</h2>

<p>この要素は<a href="https://developer.mozilla.org/ja/docs/Web/HTML/Global_attributes" title="HTML/Global attributes"><u><font color="#0066cc">グローバル属性</font></u></a>のみを持ちます。</p>

<h2 id="例1_media属性の使用">例1: media属性の使用</h2>

<p>media属性でユーザーエージェントが {{HTMLElement("source")}}要素の選択をするためのメディアクエリを設定できます。メディアクエリがfalseと評価した場合、その {{HTMLElement("source")}} 要素はスキップされます。</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="例2_type属性の使用">例2: type属性の使用</h2>

<p>type属性は、{{HTMLElement("source")}} 要素のsrcset属性で与えられるリソースのMIMEタイプを指定します。ユーザーエージェントが与えられたtypeをサポートしてない場合、その {{HTMLElement("source")}} 要素はスキップされます。</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>

<h2 id="仕様">仕様</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">仕様</th>
   <th scope="col">状態</th>
   <th scope="col">コメント</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>初期定義</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザ実装状況</h2>

<p>{{ CompatibilityTable() }}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>機能</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>基本サポート</td>
   <td>38</td>
   <td>{{ CompatGeckoDesktop("38") }}</td>
   <td>Edge 13</td>
   <td>25</td>
   <td>9.1</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>機能</th>
   <th>Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>基本サポート</td>
   <td>38</td>
   <td>{{ CompatGeckoMobile("38") }}</td>
   <td>{{CompatNo}}</td>
   <td>25</td>
   <td>iOS 9.3</td>
  </tr>
 </tbody>
</table>
</div>

<h2 id="関連項目"><br />
 関連項目</h2>

<ul>
 <li>{{HTMLElement("img")}}要素</li>
</ul>