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