响应式图像终于有超赞的解决方案了！

固定宽度图像：基于设备像素比选择

视网膜屏幕的广泛应用，使我们不仅需要考虑屏幕分辨率，而且也需要考虑像素密度。视网膜屏幕，4K显示器，UltraHD-它们都比相同尺寸的标准分辨率显示器填充了更多的像素。更多的像素=更清晰的图像。

有些图片不管屏幕尺寸，始终以固定宽度显示-如站点logo或人物简介图像，也就是说需要根据设备像素比来选择。浏览器将根据设备像素比来选择加载哪张图像。

srcset属性列出了浏览器可以选择加载的源图像池，是一个由逗号分隔的列表。x描述符表示图像的设备像素比。浏览器根据运行环境，利用这些信息来选择适当的图像。不理解srcset的浏览器会直接加载src属性中声明的图像。

上例中，我们告诉浏览器在viewport宽度小于400像素时，使图像的宽度与viewport等宽。在viewport宽度小于960像素时，使图像的宽度为viewport宽度的75％。当viewport大于960像素时，使图像的宽度为640像素。如果你不熟悉vw ，可以看看Tim Severien的大文viewport单位详解 。

浏览器利用srcset和sizes信息来选择最符合规定条件的图像。如果浏览器的viewport是600像素，图像最可能以75vw的宽度显示。浏览器将尝试加载第一张大于450像素（600*0.75）的图像，也就是uswnt-480.jpg。如果我的是dpr为2的Retina显示屏，那么浏览器就会尝试加载第一张大于900像素（600*0.75*2）的图像，也就是uswnt-960.jpg。我们无法确定究竟显示哪张图像，因为每个浏览器根据我们提供的信息挑选适当图像的算法是有差异的。(译者注：srcset和size列表是对浏览器的一个建议(hint)，而非指令。例如，设备像素比(dpr)为1.5的设备，亦可用1x也可用2x的图像，由浏览器根据其能力、网络等因素来决定。)

前两个例子都是以不同质量显示相同的图像，仅用srcset属性就足够了。不必担心老旧浏览器，老旧浏览器会把它看作为一个普通的图像并从src中加载。如果你想在不同宽度下显示稍微不同的图像，比如在较窄屏幕下仅显示图像的关键部分，那么要使用picture元素。

picture：基于Art direction（美术设计）选择

picture元素就像是图像和其源的容器。浏览器仍然需要img元素，用来表明需要加载图片，如果没有img，那么什么都不会渲染。source为浏览器提供了要显示图像的供选版本。基于美术设计选择的适用场景为：在一个特定的转效点（breakpoint）需要显示一个特定的图像。使用picture元素选择图像，不会有歧义。