> 譯文出處：http://www.w3cplus.com/responsive/responsive-images-101-part-6-picture-element.html
> 英文原文：http://blog.cloudfour.com/responsive-images-101-part-6-picture-element/
在第[3](http://www.w3cplus.com/responsive/responsive-images-101-part-3-srcset-display-density.html)，[4](http://www.w3cplus.com/responsive/responsive-images-101-part-4-srcset-width-descriptors.html)，[5](http://www.w3cplus.com/responsive/responsive-images-101-part-5-sizes.html)部分中，我們專注于分辨率切換的解決方案。現在是時候來研究如何解決[藝術指導](http://www.w3cplus.com/responsive/responsive-images-101-definitions.html)了。
`<picture>`元素——尤其是媒體屬性——被設計來簡化藝術指導。
`<picture>`元素包含一系列`<source>`子元素后跟著需要的`<img>`元素。`source`元素原理和`video`元素的子源類似。
~~~
<picture>
<source media="(min-width: 900px)" srcset="cat-vertical.jpg">
<source media="(min-width: 750px)" srcset="cat-horizontal.jpg">
<img src="cat.jpg" alt="cat">
</picture>
~~~
每個源必須有一個`srcset`屬性，可選屬性包括`media`，`sizes`和`type`。`<source>`元素上的`sizes`和`srcset`的使用和`<img>`上完全一樣。
我們現在主要研究`media`屬性。
## media屬性
`media`屬性的值是媒體查詢。與`sizes`屬性的媒體情況不同，這里的媒體查詢是你熟知并喜愛的且功能完整。
當瀏覽器檢查`source`元素列表時，使用第一個媒體查詢匹配的源。如果沒有媒體查詢匹配，則使用`<img>`元素。
## media屬性是指令，而不是建議
不像是`srcset`和`sizes`，當使用媒體屬性，你在告訴瀏覽器應該使用哪個源。
瀏覽器無法自由選擇一個不同源。它必須使用第一個媒體屬性匹配當前瀏覽器狀況的第一個`<source>`元素。
這就是帶有媒體屬性的`<picture>`元素非常適合藝術指導的原因。在藝術指導的使用情況中，設計師必須確保在特定視口尺寸下使用的圖片與他們預期的一致否則設計可能會被破壞。
讓我們來實際看一下。
## 實際情況下的picture元素
[Shopify](http://www.shopify.com/)?使用`<picture>`元素來解決藝術指導的問題。Shopify’s在主頁上突出了一個顧客，Corrine Anestopoulos，Biko?Jewelry的聯合創始人。
在狹窄的屏幕上，Anestopoulos小姐的照片被裁減。因為圖片不再是被簡單縮小，這就是考慮到藝術指導的情況。
Shopify使用的標記將`<picture>`元素和`srcset`顯示密度描述符結合。我為了簡化標記而移除了冗長的圖片路徑并總結如下：
~~~
<picture>
<source srcset="homepage-person@desktop.png, homepage-person@desktop-2x.png 2x"
media="(min-width: 990px)">
<source srcset="homepage-person@tablet.png, homepage-person@tablet-2x.png 2x"
media="(min-width: 750px)">
<img srcset="homepage-person@mobile.png, homepage-person@mobile-2x.png 2x"
alt="Shopify Merchant, Corrine Anestopoulos">
</picture>
~~~
**注：新改版的頁面代碼：**
~~~
<picture class="">
<!--[if IE 9]><video style="display: none;"><![endif]-->
<source srcset="muttonhead-feature@desktop-a97f32476dec8ace5bff5581de852720.png 1x, muttonhead-feature@desktop-2x-9dfadafd12daaa37357521b5cfeb71c9.png 2x" media="(min-width: 990px)">
<source srcset="muttonhead-feature@tablet-098c9c293a9fc4625c4e3881c293d284.png 1x, muttonhead-feature@tablet-2x-9e850f53007aca09e7c3b58d7b6d2ba1.png 2x" media="(min-width: 750px)">
<!--[if IE 9]></video><![endif]-->
<img srcset="muttonhead-feature@mobile-46b2bcd7fba4a422861fece5231085a3.png 1x, muttonhead-feature@mobile-2x-4e12c2522c827b69b53ad706aeaf6ba9.png 2x" alt="Shopify online store" class="">
</picture>
~~~
*縮小你的瀏覽器窗口大小，你能看到圖片的更換過程*
仔細觀察這些代碼，Shopify使用了三個不同的圖片斷點。每個斷點的圖片寬度固定－斷點間的寬度轉變是跳躍的而不是連續的。
因為圖片寬度固定，[`srcset`顯示密度描述符]((http://www.w3cplus.com/responsive/responsive-images-101-part-3-srcset-display-density.html)就派上作用。因此對于每個斷點來說，Shopify定義了一個`1`倍和一個`2`倍源文件。分解開來如下所示：
* **`<source … media="(min-width: 990px)">`**:最大尺寸的圖片，Shopify把它稱為桌面，是第一個圖片源。媒體屬性告訴瀏覽器這個源只有在視口寬度大于或等于`990px`才被使用。
* **`<source … media="(min-width: 750px)">`**:第二個源，“平板”圖片，視口寬度大于或等于`750px`時使用。因為第一個源在`990px`時起作用并且瀏覽器選擇匹配的第一個源，第二個源的有效視口寬度范圍是`750px`到`989px`。
* **`<img>`**:如果前兩個源沒有匹配，說明視口寬度一定小于`750px`。這種情況下，會使用`<img>`元素上`srcset`。小屏幕會使用”移動設備”圖片。
如果圖片寬度自適應而不固定，Shopify本可以使用帶`srcset`[寬度描述符](http://www.w3cplus.com/responsive/responsive-images-101-part-4-srcset-width-descriptors.html)的`<picture>`而不是[顯示密度描述符](http://www.w3cplus.com/responsive/responsive-images-101-part-3-srcset-display-density.html)。
## 最后一點小技巧
遇到藝術指導的情況，你會需要`picture`元素。另外`picture`規范的創造者還給網頁開發帶來了一份最終的大禮。在下一節中，將會向大家介紹圖片的新格式相關知識，將帶領大家進入圖片格式的新世界之中。
