Revision 891947 of <picture>

<p>{{SeeCompatTable}}</p>

<h2 id="Summary">サマリー</h2>

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

<h2 id="Usage_Context">使用コンテキスト</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="Attributes">属性</h2>

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

<h2 id="Example_1.3A_Using_the_media_attribute">例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="Example_2.3A_Using_the_type_attribute">例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="Specifications">仕様</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</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_compatibility">ブラウザ実装状況</h2>

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

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>38</td>
   <td>{{ CompatGeckoDesktop("33") }} behind the <code>dom.image.picture.enabled</code> preference (off by default)</td>
   <td>{{CompatNo}}</td>
   <td>25</td>
   <td>{{CompatNo}}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>Chrome 38</td>
   <td>{{ CompatGeckoMobile("33") }} behind the <code>dom.image.picture.enabled</code> preference (off by default)</td>
   <td>{{CompatNo}}</td>
   <td>25</td>
   <td>{{CompatNo}}</td>
  </tr>
 </tbody>
</table>
</div>

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

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

<p>{{HTMLRef}}</p>