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

<p><span class="seoSummary"><strong>HTML <code>&lt;picture&gt;</code> 元素</strong> 包含了零或零以上個 {{HTMLElement("source")}} 元素以及一個 {{HTMLElement("img")}} 元素，以為不同顯示器/裝置提供同張圖片的不同版本。</span> </p>

<p>瀏覽器將會考慮每個 <code>&lt;source&gt;</code> 元素，並且在其中選出最適當的選項。如果沒有找到最適當的選項——或是瀏覽器不支援 <code>&lt;picture&gt;</code> 元素——則 <code>&lt;img&gt;</code> 屬性的 URL 會被選擇。被選擇的圖片將會在 <code>&lt;img&gt;</code> 元素存在的位置顯示。</p>

<div>{{EmbedInteractiveExample("pages/tabbed/picture.html", "tabbed-standard")}}</div>

<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</p>

<p>為了決定載入哪一個 URL，{{Glossary("user agent")}} 會檢視每一個 <code>&lt;source&gt;</code> 的 {{htmlattrxref("srcset", "source")}}、{{htmlattrxref("media", "source")}} 以及 {{htmlattrxref("type", "source")}} 屬性，以選出最適合當前版面以及顯示裝置支援度的圖片。</p>

<p><code>&lt;img&gt;</code> 有兩個作用：</p>

<ol>
 <li>它描述了該圖片的尺寸等屬性以及呈現（presentation）。</li>
 <li>在所有列出的 <code>&lt;source&gt;</code> 都不能提供可用圖片的情況下的 fallback。 </li>
</ol>

<p><code>&lt;picture&gt;</code> 的常見使用案例：</p>

<ul>
 <li><strong>圖像方向（art direction）：</strong> 根據不同的 <code>media</code> 狀況裁切或調整圖片（例如在較小的螢幕上，載入原本有複雜細節圖片的較簡單版本圖片）</li>
 <li><strong>提供替代的圖片格式：</strong>以應對某些特定格式不被支援的情況</li>
 <li><strong>節省頻寬並加速頁面載入速度：</strong>透過針對觀看者的裝置載入最適當的圖片做到這點</li>
</ul>

<p>如果是要為高 DPI （Retina）螢幕提供圖片的高解析度版本時，可改在使用 <code>&lt;img&gt;</code> 上使用 {{htmlattrxref("srcset", "img")}} 屬性。這會讓瀏覽器在 data-saving 模式選擇低解析度的版本，這樣你就不用特地指定 <code>media</code> 條件。</p>

<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>Zero or more {{HTMLElement("source")}} elements, followed by one {{HTMLElement("img")}} element, optionally intermixed with script-supporting elements.</td>
  </tr>
  <tr>
   <th scope="row">Tag omission</th>
   <td>{{no_tag_omission}}</td>
  </tr>
  <tr>
   <th scope="row">Permitted parents</th>
   <td>Any element that allows embedded content.</td>
  </tr>
  <tr>
   <th scope="row">Implicit ARIA role</th>
   <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">No corresponding role</a></td>
  </tr>
  <tr>
   <th scope="row">Permitted ARIA roles</th>
   <td>No <code>role</code> permitted</td>
  </tr>
  <tr>
   <th scope="row">DOM interface</th>
   <td>{{domxref("HTMLPictureElement")}}</td>
  </tr>
 </tbody>
</table>

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

<p>此元素只包含 <a href="/en-US/docs/Web/HTML/Global_attributes">global attributes</a>.</p>

<h2 id="用法筆記">用法筆記</h2>

<p>你可以使用 {{cssxref("object-position")}} 屬性來在元素的 frame 內調整圖片位置，也可以用 {{cssxref("object-fit")}} 屬性控制圖片在 frame 內如何調整大小。</p>

<div class="note">
<p><strong>注意:</strong> 在子元素 <code>&lt;img&gt;</code> 上使用這些屬性，而不是 <code>&lt;picture&gt;</code> 元素.</p>
</div>

<h2 id="範例">範例</h2>

<p>以下例子示範如何根據 {{HTMLElement("source")}} 元素不同的屬性設定選擇 <code>&lt;picture&gt;</code> 中的不同圖片。</p>

<h3 id="media_屬性">media 屬性</h3>

<p><code>media</code> 屬性指定特定的媒體類型（跟 media query 很像），讓 user agent 可對每個 {{HTMLElement("source")}} 元素作出判斷。</p>

<p>如果 {{HTMLElement("source")}} 的指定媒體類型被判斷為 <code>false</code> ，則瀏覽器會跳過它，並繼續判斷 <code>&lt;picture&gt;</code> 中的下個元素。</p>

<pre class="brush: html notranslate">&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>

<h3 id="srcset_屬性">srcset 屬性</h3>

<p>The <a href="/en-US/docs/Web/HTML/Element/source#attr-srcset">{{htmlattrdef("srcset")}}</a> 屬性用來提供根據大小區分的可能圖片清單。</p>

<p>它是由逗號分隔的圖片描述句清單組成的。每一個圖片描述句是由該圖片的 URL 以及以下描述組成（擇一）：</p>

<ul>
 <li>寬度，結尾為 <code>w</code> (例如 <code>300w</code>)；<br>
  <em>或是</em></li>
 <li>像素密度，結尾為 <code>x</code> (例如 <code>2x</code>)，以為高 DPI 螢幕提供高解析度圖片</li>
</ul>

<pre class="brush: html notranslate">&lt;picture&gt;
  &lt;source srcset="logo-768.png 768w, logo-768-1.5x.png 1.5x"&gt;
  &lt;source srcset="logo-480.png, logo-480-2x.png 2x"&gt;
  &lt;img src="logo-320.png" alt="logo"&gt;
&lt;/picture&gt;</pre>

<h3 id="type_屬性">type 屬性</h3>

<p><code>type</code> 屬性為 {{HTMLElement("source")}} 元素中 <code>srcset</code> 屬性的資源 URL 指定  <a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types">MIME type</a> 。如果 user agent 不支援該 type 的話，此 {{HTMLElement("source")}} 元素會被略過。</p>

<pre class="brush: html notranslate">&lt;picture&gt;
  &lt;source srcset="logo.webp" type="image/webp"&gt;
  &lt;img src="logo.png" alt="logo"&gt;
&lt;/picture&gt;
</pre>

<h2 id="規格">規格</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="瀏覽器支援度">瀏覽器支援度</h2>



<p>{{Compat("html.elements.picture")}}</p>

<h2 id="相關資源">相關資源</h2>

<ul>
 <li>{{HTMLElement("img")}} 元素</li>
 <li>{{HTMLElement("source")}} 元素</li>
 <li>在圖片的 frame 中調整其大小與位置： {{cssxref("object-position")}} and {{cssxref("object-fit")}}</li>
 <li><a href="/en-US/docs/Web/Media/Formats/Image_types">圖片檔案類型與格式指南</a></li>
</ul>