响应式图片（srcset属性和picture元素）

自适应网页设计意味着，不仅我们的布局能根据设备特性而变化，内容也可以。例如，高分辨率 (2x) 显示屏上高分辨率图形可保证清晰度。当浏览器宽度为 800px 时，一张 50% 宽度的图像或许很适合，但在一款很窄的手机上，则会占用太多屏幕空间，并且缩小图像来适应较小的屏幕时，耗费的带宽开销却是一样的。

你知道吗？加载网页时，平均 60% 以上的流量都来加载图片。HTML 中 img 元素很强大，它可下载、解码然后渲染内容，而现代浏览器支持众多图像格式。跨设备使用图像与桌面端并无太大区别，只需做一些微小调整，就能构建美好体验。

图像使用相对尺寸，在指定图像宽度时，请记得使用相对单位，以防止它们意外溢出视口。例如，width: 50%; 将图片宽度设置为包含元素宽度的 50%

因为 CSS 允许内容溢出其容器，因此可能需要使用 max-width: 100% 来保证图像及其他内容不会溢出。例如：

img, embed, object, video {
  max-width: 100%;
}

请务必借助 img 元素的 alt 属性提供有意义的描述；这些描述有助于提高您的网站的可访问性，因为它们能提供语境给屏幕阅读器及其他辅助性技术。

高 DPI 设备上使用 srcset 来增强 img，srcset 属性增强了 img 元素的行为，让您能够轻松地针对不同设备特性提供多种图片文件。类似于 CSS 原生的 image-set CSS 函数，srcset 也允许浏览器根据设备特性选择最佳图像，例如，在 2x 显示屏上使用 2x 图像，将来甚至允许在网络带宽有限时对 2x 设备使用 1x 图像。

<img srcset="elva-fairy-320w.jpg,
             elva-fairy-480w.jpg 1.5x,
             elva-fairy-640w.jpg 2x"
src="elva-fairy-640w.jpg" alt="Elva dressed as a fairy">

在不支持 srcset 的浏览器上，浏览器只需使用 src 属性指定的默认图像文件。正因如此，无论设备能力如何，一定要始终包含一个在任何设备上都能显示的 1x 图像。如果 srcset 受支持，则会在进行任何请求之前对逗号分隔的图像/条件列表进行解析，并且只会下载和显示最合适的图像。

尽管条件可以包含分辨率和宽度等各种参数，但目前只有分辨率能够得到很好的支持。

在自适应图像中用 picture 实现，若要根据设备特性更改图像，请使用 picture 元素。 picture 元素定义了一个声明性解决办法，可根据设备大小、设备分辨率、屏幕方向等不同特性来提供一个图像的多个版本。类似于 video 元素，它可以包含多个 source 元素，使得根据媒体查询或图片格式指定不同图片文件成为可能。

<picture>
  <source media="(min-width: 800px)" srcset="head.jpg, head-2x.jpg 2x">
  <source media="(min-width: 450px)" srcset="head-small.jpg, head-small-2x.jpg 2x">
  <img src="head-fb.jpg" srcset="head-fb-2x.jpg 2x" alt="a head carved out of wood">
</picture>

上面的例子中，如果浏览器宽度至少为 800px，则将根据设备分辨率使用 head.jpg 或 head-2x.jpg。如果浏览器宽度在 450px 和 800px 之间，则将根据设备分辨率使用 head-small.jpg 或 head-small-2x.jpg。对于屏幕宽度小于 450px，且不支持 picture 元素向后兼容的情况，浏览器将渲染 img 元素，因此要始终包含该元素。