完全响应式图片

标签的各种用法，利用浏览器属性来根据视窗宽度轻松改变图片源，还可以利用 picture 元素更改图片内容，而且图片并不总是必要的，许多可以用符号代替，比如图标字体以及 CSS 样式等。

图片作为现代网站开发工作流中一个重要的部分，占据了很大一部分的页面加载、屏幕尺寸，而其构成的因素也十分的多样。响应式设计要求你的图片能够适应任何设备。

响应屏幕功能和视图

如何为每个不同性能的设备和不同尺寸的显示器挑选图片？

之前学到了使用 CSS 背景图片这个方法，通过媒体查询为不同尺寸的视窗显示不同的图片。那样是可以，但也存在问题。使用像这样的媒体查询是企图在设计的时候猜测什么图片在运行时会最合适，你在强迫图片选择浏览器而不是给浏览器提供信息以让它做出最好的选择。媒体查询的另一个问题是它们只参考视窗的大小，而不是图片的实际显示尺寸。

srcset

srcset 有两种自定义方式，一种使用 x 来区分设备像素比 (DPR)，另一种使用 w 来描述图像的宽度。

对设备像素比（x）的反应

<img src="image_2x.jpg" srcset="image_2x.jpg 2x, image_1x.jpg 1x" alt="a cool image">

将 srcset 设置为与逗号分隔的一连串 filename multiplier 对相等，其中每个 multiplier 必须是后跟 x 的整数。还有一个作为备用的 src 属性。浏览器会下载与其 DPR 对应的最佳图片。

例如，1x 表示 1 倍显示屏，2x 表示像素密度为两倍的显示屏，如 Apple 的 Retina 显示屏。

对图片宽度（w）的反应

<img src="image_200.jpg" srcset="image_200.jpg 200w, image_100.jpg 100w" alt="a cool image">

将 srcset 设置为与逗号分隔的一连串 filename widthDescriptor 对相等，其中每个 widthDescriptor 都以像素为测量单位， 并且必须是后跟 w 的整数。在这里，widthDescriptor 指定每个图片文件的自然宽度，使浏览器能够根据窗口大小和 DPR 选择要请求的最适当的图片。 （如果没有 widthDescriptor，浏览器需要下载图片才能知道其宽度！）

sizes

sizes 属性为浏览器提供了有关图片元素显示大小的信息，它实际上不会导致图片大小调整，该操作在 CSS 中执行。

srcset 与 sizes 配合使用

<img  src="images/great_pic_800.jpg"
      sizes="(max-width: 400px) 100vw, (min-width: 401px) 50vw"
      srcset="images/great_pic_400.jpg 400w, images/great_pic_800.jpg 800w"
      alt="great picture">

sizes 由以逗号分隔的 mediaQuery width 对组成。sizes 会在加载流程初期告诉浏览器，该图片会在点击 mediaQuery 时以某个 width 显示。

实际上，如果 sizes 缺失，浏览器会将 sizes 默认为 100vw，表示它预计图片将以全窗口宽度显示。

sizes 会为浏览器额外提供一条信息，以确保它根据图片的最终显示宽度下载正确的图片文件。

在本示例中，如果浏览器的窗口宽度等于或小于 400 像素，浏览器知道图片将为全窗口宽度；如果窗口宽度大于 400 像素，则为一半窗口宽度。浏览器知道它具有两个图片选项 - 一个具有 400 像素的自然宽度，另一个具有 800 像素。