• home > webfront > SGML > web >

    HTTP Client Hints让服务器知道你响应式图片的三围

    Author:zhoulujun Date:

    HTTP Client Hints,。利用这项技术,HTTP 客户端(通常可以认为是浏览器)能够主动将一些特性告诉服务端,以便服务端更有针对性地输出内容。

    原来在搞响应式网站的时候(Responsive images ),常用的方法,也懒的一一介绍了!

    比如:

    Further Reading on SmashingMag:


    Responsive Images
    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 the wdescriptor 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">

    02-clienthints101-opt.png


    参考文章: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