客户端提示中有三个选项可用于请求与浏览器相关的图像:

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

好吧,浏览器通知了服务器 DDR 和 Width,服务器接受了它们并知道下一步该做什么,

但是我们现在应该做什么呢

客户提示使标记更容易
我们先看看之前101系列文章的示例代码:

将 srcset 属性添加到标记的目的是 阿尔巴尼亚手机号码列表 为浏览器提供一组不同大小的图像,以便它可以请求所需的内容。反过来,服务器将知道要将哪个图像发送到浏览器。

这全部由客户端提示中的 Width 属性提供。它根据 sizes 中指定的大小计算所需的大小,

并在请求标头中将其报告给服务器

电话号码列表

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

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

浏览器使用此字段来告诉服务器它认为可以接收哪些类型的数据以响应给定请求。例如,当 Chrome 请求一张图片时,它会这样写:

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

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

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注