响应式图片之补充

上篇文章里介绍了如何让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会过滤掉位置靠后的那位）