> 譯文出處：http://www.w3cplus.com/responsive/responsive-images-101-part-3-srcset-display-density.html
> 英文原文：http://blog.cloudfour.com/responsive-images-101-part-3-srcset-display-density/
自從蘋果發布帶retina顯示屏的iPhone 4，網頁設計人員一直在找一個處理高分屏的方案。于是引入了`srcset`和它的顯示密度。
## 使用srcset的切換解決方案
首先提醒大家，顯示密度是一種分辨率切換使用情況。當我們解決分辨率切換問題時，我們需要使用`srcset`。
我們想要使用`srcset`的原因是它讓瀏覽器可以選擇。當使用`<picture>`元素提供的`media`屬性時，實際上我們在告訴瀏覽器必須使用哪個圖片。這對于藝術切換很有效。
遇到分辨率切換的情況時，瀏覽器知道哪張圖片顯示效果最好。它可以根據網絡情況或用戶行為等因素來做決定。
因此除非是藝術切換的情況，我們應該讓瀏覽器本身來自動選擇。
## 顯示密度描述
顯示密度的語法很直觀：
`srcset`屬性被添加在`<img>`元素上的。`srcset`的值是一個用逗號分隔的列表。列表中的每個項包含一張圖片的路徑并且按倍數（例如,`1x`,`2x`,`3x`...）提供多張分辨率的圖片。
~~~
<img src="cat.jpg" alt="cat" srcset="cat.jpg, cat-2X.jpg 2x">
~~~
顯示密度值`1x`,`2x`等等代表顯示密度描述符。如果沒有提供顯示密度描述，默認是`1x`。
## 這看起來很簡單...
這很簡單,試想你需要關心的是顯示密度。那么我們會經常碰到嗎？
讓我們來看一下[第1部分](http://www.w3cplus.com/responsive/responsive-images-101-definitions.html)中的Apple Watch圖片
像之前提到的那樣，這張圖片是`5144px × 1698px`并且在`2`倍下大小為`398K`。還有一張`1`倍的版本。讓我們把它們與[Blackberry Curve 9310](http://us.blackberry.com/smartphones/blackberry-curve-9310.html)上單一分辨率的圖片尺寸做對比：
| Image | Width | Height | File Size |
| --- | --- | --- | --- |
| [2x large](http://www.w3cplus.com/sites/default/files/blogs/2015/1509/hero_ygold_edition_large_2x.jpg) | 5144 | 1698 | 398K |
| [1x large](http://www.w3cplus.com/sites/default/files/blogs/2015/1509/hero_ygold_edition_large.jpg) | 2572 | 849 | 256K |
| [320px, Single Density](http://www.w3cplus.com/sites/default/files/blogs/2015/1509/hero_ygold_edition-320.jpg) | 320 | 106 | 8K |
表格中的最后一行，我把圖片大小改變為`320px`寬另存為JPEG從而看看它會怎樣。
顯然兩個尺寸的圖片是不夠的。當然，我們可以把`320`作為1倍圖然后重寫標記如下：
~~~
<img srcset="cat.jpg, cat-2X.jpg 2x, cat-3x.jpg 3x, […], cat-16x.jpg 16x">
~~~
這會讓我們有從`320px`到`5144px`的圖片，但我覺得這樣很愚蠢。
這就是我認為顯示密度描述比其他解決方案不可取的另一個主要原因。我沒有任何興趣來維護一大堆不同顯示密度的可用性。
我們難道要提供`1x`,`1.5x`,`2x`,`3x`更多種情況嗎？如果算上其他例如iPhone6 Plus的[縮減像素](http://www.paintcodeapp.com/news/iphone-6-screens-demystified)呢？
有一點我在大家開始用響應式圖片時沒有提到。如果在多個圖片斷點上有多個圖片密度，有時候就需要重復圖片源,因為尺寸很小的2倍圖可能與1倍在大的圖片斷點上是一樣的。
很快這樣就會變得糟糕。
## 顯示密度描述符最適合固定寬度圖片
當你在處理固定寬度圖片元素的密度可選時，屏幕密度描述顯得很不方便而且存在許多不足。
需要什么來代替呢？本系列的第四部分將會介紹：`Srcset`寬度描述符。
