(四)：srcset寬度描述符

譯文出處：http://www.w3cplus.com/responsive/responsive-images-101-part-4-srcset-width-descriptors.html
英文原文：http://blog.cloudfour.com/responsive-images-101-part-4-srcset-width-descriptors/

在響應(yīng)式圖片101系列教程中的第三篇中，我們學(xué)習(xí)了顯示密度描述，并且總結(jié)出它們適合用于固定寬度圖片，但是對(duì)于自適應(yīng)圖片有所不足。

伸縮使圖片就需要用到srcset的寬度描述符。

寬度描述符

寬度描述符的語法與屏幕密度描述符類似。srcset屬性值是逗號(hào)分隔的圖片源和描述列表。

區(qū)別在于不是用1x,2x或其他值來表示密度，我們列出了圖片源的寬度例如320w，480w等。

<img src="cat.jpg" alt="cat" 
  srcset="cat-160.jpg 160w, cat-320.jpg 320w, cat-640.jpg 640w, cat-1280.jpg 1280w">

圖片源的寬度會(huì)讓人很困惑。寬度描述符會(huì)根據(jù)分辨率來尋找圖片源文件。

換句話說如果在一個(gè)圖片編輯器中打開一張圖片，它的分辨率是多少呢？獲取圖片的寬度放置在srcset屬性中。

瀏覽器選擇最佳圖片資源

當(dāng)使用寬度描述符，你給瀏覽器提供了一系列圖片以及它們的真實(shí)寬度,因此瀏覽器可以選擇最佳圖片源。瀏覽器是怎么做的呢？

你的第一反應(yīng)一定是瀏覽器檢查頁(yè)面上元素的尺寸并與圖片列表尺寸對(duì)比。這有點(diǎn)道理，但實(shí)際上并不是這樣。

我們來看，當(dāng)瀏覽器開始下載圖片時(shí)，通常它并不知道頁(yè)面中圖片的尺寸。

瀏覽器預(yù)加載和合理資源下載

如果查看瀏覽器渲染頁(yè)面的時(shí)間線，你會(huì)發(fā)現(xiàn)一些引人注目的事情。

就在瀏覽器下載HTML后不久，它繼續(xù)請(qǐng)求CSS和JavaScript。但是在CSS和JavaScript完成下載前，瀏覽器開始下載圖片。

因?yàn)镃SS和JavaScript都沒下載完成，瀏覽器下載圖片時(shí)并不知道頁(yè)面布局。由于不知道布局，它就不知道圖片元素的尺寸。

順帶一提，預(yù)加載行為正是為什么我們不能用CSS或JavaScript解決內(nèi)聯(lián)響應(yīng)式圖片的原因。在瀏覽器開始下載時(shí)它們還不可用。

瀏覽器唯一知道的是視窗尺寸。一旦我們過渡到了顯示密度選擇符，一切都與視窗尺寸緊緊相關(guān)。

為什么影響呢？

視窗是真實(shí)圖片尺寸的抽象替代品。用Walmart’s Grocery頁(yè)面上的圖片作為例子：

在小視窗下，圖片幾乎和視窗寬度尺寸相同。

然而在大屏幕中，情況不同：

在第二個(gè)例子里，視窗寬度為1540px，但是圖片寬度只有254px。知道視窗尺寸不足以給瀏覽器提供選擇合適圖片源的信息。

尺寸屬性來解決!

我們?nèi)绾巫尀g覽器知道頁(yè)面中的圖片尺寸，從而讓瀏覽器可以在srcset列表中下載正確的圖片呢？如何使用圖片尺寸屬性，歡迎閱讀本系列教程的第五部分——圖片尺寸！