響應式圖片之補充

上篇文章里介紹了如何讓user agent（第7條）精準定位合適的圖片源，實現響應式開發。在這裡，我介紹一下user agent選擇圖片源的工作原理。

第一步： 更新圖片源集合（image source set，術語第32條）

在更新的過程中，圖片源集合里只放入第一個<img>的圖片源 以及該<img>之前的兄弟節點<source>的圖片源，其餘的<img>和<source>均被忽略；且type屬性指定的類型 或media指定的媒介不被user agent支持的圖片源也會被過濾掉。

更新的最後一步是為圖片源集合里的所有的圖片源進行密度規範化，什麼意思呢？就是凡是圖片源格式寫成：[image_url] [integer]x 均被轉為[image_url] [integer]w，如果圖片源只有image_url，沒有寬度或密度，則統一轉為[image_url] 1x。

第二步：過濾重複密度條件的

在圖片源集合里，若存在相同密度描述符號條件的圖片源，移掉位置靠後的圖片源。

諸如以下寫法只保留example.jpg 2x

<source srcset="example.jpg 2x, example-HD.jpg 2x">

又諸如以下寫法，<img>指定的圖片源不會被加入圖片源集合，因為與<source>指定的圖片源密度重複，且<img>位置靠後。

<picture> <source srcset="example-HD.jpg 1x"> <img src="example.jpg"></picture>

第三步：按照開發人員指定的條件，從圖片源集合里選擇一個圖片源

第四步：返回所選的圖片源。

從這個過程來看，我們可以得知：

1. 在<picture>里，只能有一個<img>，且該<img>是<picture>的最後一個孩子節點；

2. 在圖片源集合中，type類型或media類型不被user agent支持的圖片源均被過濾；

3. <source>或<img>指定的圖片源要避免密度重複（即使一個用的是寬度描述符號，一個用的是密度描述符號，也要手動進行密度規範化去比較一下哦，當然，重複了也沒關係，只是user agent會過濾掉位置靠後的那位）

推薦閱讀：