響應式圖片之補充

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

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

在更新的過程當中，圖片源集合裏只放入第一個<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會過濾掉位置靠後的那位）