HTTP Client Hints让服务器知道你响应式图片的三围
Author：zhoulujun Date：
原来在搞响应式网站的时候(Responsive images )，常用的方法，也懒的一一介绍了！
比如：
Further Reading on SmashingMag:
Good old problem: responsive images. Image credit: Eric Portis.
但是现在：HTTP Client Hints，一个属性帮我搞定所有！
why？
其实之前浏览器已经将很多自身特性放在 HTTP 请求中，例如下面这些头部字段：
User-Agent：提供浏览器类型及版本、操作系统及版本、浏览器内核等信息；
Accept：表明浏览器支持哪些 MIME type（例如 Chrome 通过 Accept 表明自己支持 image/webp 图片格式）；
Accept-Encoding：表明本浏览器支持哪些内容编码方式（例如：gzip、deflate、sdch）；
Accept-Language：表明本浏览器支持那些语言；
通过以上这些头部字段，我们已经可以针对不同客户端输出不同内容。例如本博客对支持 Webp 格式的浏览器会使用 Webp 来减少图片大小；本博客还会通过 User-Agent 针对 IE 老版本禁用 localStorage 缓存策略。
但是有一些浏览器特性，我们无法直接获取，如屏幕分辨率、设备像素比（devicePixelRatio）、用户带宽等。而在移动 Web 中，为了尽可能节省用户流量，需要输出尺寸最合适的图片资源。为了解决这个问题，常见的方案有：1）使用 JS 获取这些特性，动态拼接图片 URL；2）使用 HTML 中的 sizes 和 srcset 属性、picture 标签或 CSS 中的 image-set 属性来实现响应式图片。方案 1 很简单，这里略过；方案 2 网上有很多相关文章，不熟悉的同学可以自行搜索「响应式图片」了解下。
自从有了HTTP Client Hints，浏览器通过请求头可以让服务器自动 请求的三围：
DPR 图片分辨率
This stands for “device pixel ratio,” the ratio of physical pixels on the screen to CSS pixels.Viewport-Width 视窗宽度
This is the width of the viewport in CSS pixels. (CSS pixels means the units used in CSS to describe a layout. A CSS width of 100 pixels would be 200 device pixels (DP) if the device pixel ratio (DPR) was 2.)Width 图片真实宽度
This is the actual width of an image in real physical pixels (similar to thewdescriptor made famous by responsive images).Downlink /这个目前暂时不支持-忘记吧
This is the client’s maximum download speed.Save-Data /这个目前暂时不支持-忘记吧
This boolean indicates whether extra measures should be taken to reduce the payload.
如何使用呢？只需一行代码丢到html头就可以了：
<meta http-equiv="Accept-CH" content="DPR,Width,Viewport-Width">
参考文章：HTTP Client Hints 介绍 https://imququ.com/post/http-client-hints.html
https://www.smashingmagazine.com/2016/01/leaner-responsive-images-client-hints/（推荐一读！）
转载本站文章《HTTP Client Hints让服务器知道你响应式图片的三围》,
请注明出处：https://www.zhoulujun.cn/html/webfront/SGML/web/2017_0508_8008.html