客户端提示和响应图像
设备像素比，“像素密度”，一个类似于resolution的值
Viewport-Width – 屏幕尺寸
宽度 – 页面上图像的宽度
其中，DPR 和 Width 是最有用的。正如在之前的文章中已经提到的，视口大小几乎没有用处，在狭窄的智能手机屏幕上，设计人员使图像几乎与屏幕宽度相同，而在台式机上 – 一些大小由页面布局决定，但最终是实际图像宽度到处都是一样的。

好吧，浏览器通知了服务器 DDR 和 Width，服务器接受了它们并知道下一步该做什么，但是我们现在应该做什么呢？
客户提示使标记更容

我们先来看看之前“101系列”文章的示例代码

将 srcset 属性添加到标记的目的是为浏览器提供一组不同大小的图像，以便它可以请求所需的内容。反过来，服务器将知道要将哪个图像发送到浏览器。

这全部由客户端提示中的 Width 属性提供。它根据 sizes 中指定的大小计算所需的大小，并在请求标头中将其报告给服务器：

现在，如果客户端和服务器都支持客户端提示，则标记可以简化为：

这项创新的引入消除了设计人员和 卡塔尔手机号码列表、  开发人员为某些屏幕选择图像大小限制的责任，并将其转移到服务器。

支持多种图像格式
除了这种标记简化之外，还可以通过将 Accept 标头字段与客户端提示功能对齐来实现另一个显着的减少。

浏览器使用此字段来告诉服务器它认为可以接

收哪些类型的数据以响应给定 cz 列表 请求。例如，当 Chrome 请求一张图片时，它会这样写：

它在这里说 Chrome 更喜欢 Webp 图像格式，但如果没有，只要它们的类型以图像开头，它就会接受其他格式。好吧，如果没有，请发送你有的东西，我们会当场解决，Chrome 说。

最后一个条目”告诉服务器 Chrome 对这种特定图像格式的偏好程度。

将 Accept 字段添加到标头可以大大减少标记。这是“之前”发生的事情：

太棒了，对吧？请注意，简化标记中的图像路径不包含文件扩展名。这是因为 Accept 告诉服务器客户端接受哪些类型的图像以及首选哪些图像。这允许服务器自己选择最佳图像并将其发送给客户端。