HTTP Client Hints 介绍

HTTP Client Hints 介绍

2015/09/14 · HTML5 ·
算法

初稿出处:
imququ(@屈光宇)   

近日几年种种 Web
技术一贯在爆炸式发展,天天都有雅量新东西涌现出来。针对那一个情景,业内两位大佬目前先后发文表达了投机的眼光:Stop
pushing the web
forward、Is
the web platform getting too
big?。其实很早此前本人就发现到以我当下的肥力,吃透全数Web 新技巧大概是无法已毕的职务,作者关心新技巧的基本点放在了性能优化上。

明天自家要向大家介绍的技艺是:HTTP Client
Hints,也与特性优化有关。利用那项技艺,HTTP
客户端(常常可以认为是浏览器)可以主动将一些特点告诉服务端,以便服务端更有指向地出口内容。那项技能由大家熟谙的
Ilya Grigorik
提议,近来还地处较为早期的等级,较为专业的叙说文档可以在此处找到。目前 Chrome
46
(beta) 已扶助它,IE
和 Firefox 则还在考虑中。

实际前边浏览器已经将过多自己特点放在 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 获取这么些特色,动态拼接图片 U卡宴L;2)使用 HTML 中的 sizes 和 srcset
属性、picture 标签或 CSS 中的 image-set 属性来促成响应式图片。方案 1
很粗略,那里略过;方案 2
网上有成百上千有关小说,面生的校友可以自行检索「响应式图片」精通下。

那里看2个运用方案 2 中关系的 picture、sizes 和 srcset
完毕的响应式图片代码(via):

<picture> <!– serve WebP to Chrome and Opera –> <source
media=”(min-width: 50em)” sizes=”50vw” srcset=”/image/thing-200.webp
200w, /image/thing-400.webp 400w, /image/thing-800.webp 800w,
/image/thing-1200.webp 1200w, /image/thing-1600.webp 1600w,
/image/thing-2000.webp 2000w” type=”image/webp”> <source
sizes=”(min-width: 30em) 100vw” srcset=”/image/thing-crop-200.webp 200w,
/image/thing-crop-400.webp 400w, /image/thing-crop-800.webp 800w,
/image/thing-crop-1200.webp 1200w, /image/thing-crop-1600.webp 1600w,
/image/thing-crop-2000.webp 2000w” type=”image/webp”> <!– serve
JPEGXR to Edge –> <source media=”(min-width: 50em)” sizes=”50vw”
srcset=”/image/thing-200.jpgxr 200w, /image/thing-400.jpgxr 400w,
/image/thing-800.jpgxr 800w, /image/thing-1200.jpgxr 1200w,
/image/thing-1600.jpgxr 1600w, /image/thing-2000.jpgxr 2000w”
type=”image/vnd.ms-photo”> <source sizes=”(min-width: 30em) 100vw”
srcset=”/image/thing-crop-200.jpgxr 200w, /image/thing-crop-400.jpgxr
400w, /image/thing-crop-800.jpgxr 800w, /image/thing-crop-1200.jpgxr
1200w, /image/thing-crop-1600.jpgxr 1600w, /image/thing-crop-2000.jpgxr
2000w” type=”image/vnd.ms-photo”> <!– serve JPEG to others –>
<source media=”(min-width: 50em)” sizes=”50vw”
srcset=”/image/thing-200.jpg 200w, /image/thing-400.jpg 400w,
/image/thing-800.jpg 800w, /image/thing-1200.jpg 1200w,
/image/thing-1600.jpg 1600w, /image/thing-2000.jpg 2000w”> <source
sizes=”(min-width: 30em) 100vw” srcset=”/image/thing-crop-200.jpg 200w,
/image/thing-crop-400.jpg 400w, /image/thing-crop-800.jpg 800w,
/image/thing-crop-1200.jpg 1200w, /image/thing-crop-1600.jpg 1600w,
/image/thing-crop-2000.jpg 2000w”> <HTTP Client Hints 介绍。!– fallback for browsers that
don’t support picture –> <img src=”/image/thing.jpg”
width=”50%”> </picture>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<picture>
  <!– serve WebP to Chrome and Opera –>
  <source
    media="(min-width: 50em)"
    sizes="50vw"
    srcset="/image/thing-200.webp 200w, /image/thing-400.webp 400w,
        /image/thing-800.webp 800w, /image/thing-1200.webp 1200w,
        /image/thing-1600.webp 1600w, /image/thing-2000.webp 2000w"
    type="image/webp">
  <source
    sizes="(min-width: 30em) 100vw"
    srcset="/image/thing-crop-200.webp 200w, /image/thing-crop-400.webp 400w,
        /image/thing-crop-800.webp 800w, /image/thing-crop-1200.webp 1200w,
        /image/thing-crop-1600.webp 1600w, /image/thing-crop-2000.webp 2000w"
    type="image/webp">
  <!– serve JPEGXR to Edge –>
  <source
    media="(min-width: 50em)"
    sizes="50vw"
    srcset="/image/thing-200.jpgxr 200w, /image/thing-400.jpgxr 400w,
        /image/thing-800.jpgxr 800w, /image/thing-1200.jpgxr 1200w,
        /image/thing-1600.jpgxr 1600w, /image/thing-2000.jpgxr 2000w"
    type="image/vnd.ms-photo">
  <source
    sizes="(min-width: 30em) 100vw"
    srcset="/image/thing-crop-200.jpgxr 200w, /image/thing-crop-400.jpgxr 400w,
        /image/thing-crop-800.jpgxr 800w, /image/thing-crop-1200.jpgxr 1200w,
        /image/thing-crop-1600.jpgxr 1600w, /image/thing-crop-2000.jpgxr 2000w"
    type="image/vnd.ms-photo">
  <!– serve JPEG to others –>
  <source
    media="(min-width: 50em)"
    sizes="50vw"
    srcset="/image/thing-200.jpg 200w, /image/thing-400.jpg 400w,
        /image/thing-800.jpg 800w, /image/thing-1200.jpg 1200w,
        /image/thing-1600.jpg 1600w, /image/thing-2000.jpg 2000w">
  <source
    sizes="(min-width: 30em) 100vw"
    srcset="/image/thing-crop-200.jpg 200w, /image/thing-crop-400.jpg 400w,
        /image/thing-crop-800.jpg 800w, /image/thing-crop-1200.jpg 1200w,
        /image/thing-crop-1600.jpg 1600w, /image/thing-crop-2000.jpg 2000w">
  <!– fallback for browsers that don’t support picture –>
  <img src="/image/thing.jpg" width="50%">
</picture>

那段冗长的代码只是为了贯彻一张响应式图片,就算有一部分夸张,实际运用时相似不会写这么全,但从中能够得到2个结论:在客户端落成的国策越多,HTML
体量就越大越冗余,可维护性和可读性就越差。

而使用了 HTTP Client Hints
之后,浏览器在页面发起子财富请求时,会透过新增的一种种尾部字段带上分辨率、设备像素比、图片宽度等音信,使得种种复杂的政策可以挪到服务端去落到实处了。上边来看一看具体细节:

第一,,有了帮衬 HTTP Client Hints
的浏览器之后,页面上还亟需显式启用它。这是因为不是富有服务端都落实了响应式输出策略,每一回都发送那些新增的头顶恐怕会促成浪费。

与往常同一,那一个功用也得以因而 HTTP 响应头和 meta
标签二种方法打开并布署:

Accept-CH: DPR, Width, Viewport-Width

1
Accept-CH: DPR, Width, Viewport-Width

或:

<meta http-equiv=”Accept-CH” content=”DPR, Width, Viewport-Width”>

1
<meta http-equiv="Accept-CH" content="DPR, Width, Viewport-Width">

在启用了 HTTP Client Hints
的页面中,全体子财富请求(无论怎么着项目,无论如何是好法创制),都会辅导Accept-CH 属性中所指明的头顶,例如:

Accept: image/webp,image/*,*/*;q=0.8 Accept-Encoding: gzip, deflate,
sdch Accept-Language:
zh-CN,zh;q=0.8,en;q=0.6,en-US;q=0.4,ja;q=0.2,de;q=0.2,zh-TW;q=0.2,cs;q=0.2,pt;q=0.2,ko;q=0.2
Connection: keep-alive DPR: 2 Host: qgy18.imququ.com User-Agent:
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_0) AppleWebKit/537.36
(KHTML, like Gecko) Chrome/46.0.2490.13 Safari/537.36 Viewport-Width:
1280 Width: 128

1
2
3
4
5
6
7
8
9
Accept: image/webp,image/*,*/*;q=0.8
Accept-Encoding: gzip, deflate, sdch
Accept-Language: zh-CN,zh;q=0.8,en;q=0.6,en-US;q=0.4,ja;q=0.2,de;q=0.2,zh-TW;q=0.2,cs;q=0.2,pt;q=0.2,ko;q=0.2
Connection: keep-alive
DPR: 2
Host: qgy18.imququ.com
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/46.0.2490.13 Safari/537.36
Viewport-Width: 1280
Width: 128

有了那么些底部,图片服务器可以精通客户端的 devicePixelRatio 是
2、图片宽度是 128px、帮衬 Webp 格式,所以输出 256px 的双倍 Webp
图最合适。不过浏览器怎么了解这一个图片要求用作双倍图来使用呢(约等于说依然突显为
128px)?那就须求在响应头中伸张下边这一个字段作为 DP宝马7系 的答复:

Content-DPR: 2

1
Content-DPR: 2

内需注意的是,请求头中的 Width 字段,是基于 img 标签上的 sizes
属性算出来的。假设图片并未点名 sizes,可能图片请求是由此 JS
成立的,浏览器无法得知 Width,也就不会指导那么些底部。

实际上,除了 DPPAJERO、Viewport-Width 和 Width
之外,文档还鲜明了五个字段,然则通过本身的测试 Chrome 46
并不曾协助它们,那里差不离介绍下:

  • Downlink:用来提醒当前互联网的下行链路带宽,单位是 Mbps;
  • Save-Data:用来提示当前浏览器是或不是工作在省流格局之下,取值为 1 或 0;

可以看出那五个属性,也是为了尽可能给用户节省带宽而规划的。可以预言,后续还会有越多字段加到
HTTP Client Hints 协议中来。随着 HTTP/2
的普及,底部压缩使得增添多少个底部字段带来的支出变得很小了。

值得注意的是,使用了 HTTP Client Hints 之后,服务端针对同三个 U卡宴L
可能会输出不一致的内容,所以不管中间节点,依旧浏览器,在落到实处响应 Cache
时必须小心,要求针对不一致的情事缓存多份内容。那必要用到 HTTP/1 中的 
Vary 响应头,例如:

Vary: DPR, Width, Downlink

1
Vary: DPR, Width, Downlink

标明若是急需缓存那个响应,在生成缓存 Key 的时候必要将请求头中的
DP奔驰G级、Width 和 Downlink 的值总括进去。

好了,HTTP Client Hints 技术就介绍到那边。很安详地见到,半数以上 Web
新技巧都以在给 HTML、CSS 和 JavaScript
增添效益和特色,而那项技能却是把此前复杂的代码和逻辑将来移,让我们的
HTML
代码可以轻装上阵。一些开源图片处理系统已经起头协理那一个新特色了,海外的部分
CDN 托管服务一定也在跃跃欲试,作者卓殊希望它的前景。

1 赞 收藏
评论

图片 1

新近几年各个 Web
技术平素在爆炸式发展,每一天都有恢宏新东西涌现出来。针对那些场所,业内两位大佬目前先后发文表达了上下一心的视角:Stop
pushing the web
forward、Is
the web platform getting too
big?。其实很早以前自身就发现到以自个儿眼下的肥力,吃透全部Web 新技巧大约是不容许成功的职分,作者关心新技巧的主导放在了品质优化上。

HTTP Client Hints 介绍

不久前些年各个 Web
技术一向在爆炸式发展,每一日都有大气新东西涌现出来。针对那几个情况,业内两位大佬近期程序发文表明了温馨的视角:Stop
pushing the web forward、Is the web platform getting too
big?。其实很早以前自身就发现到以自家当下的活力,吃透全数 Web
新技巧大约是不容许完结的任务,小编关切新技巧的主脑放在了质量优化上。

明天自个儿要向我们介绍的技术是:HTTP Client
Hints,也与品质优化有关。利用这项技艺,HTTP
客户端(平时可以认为是浏览器)可以主动将一些特色告诉服务端,以便服务端更有针对性地出口内容。那项技艺由我们熟谙的
Ilya Grigorik
提议,方今还处于较为早期的级差,较为专业的描述文档可以在此地找到。近来Chrome 46 (beta) 已帮忙它,IE 和 Firefox 则还在考虑中。

实质上前面浏览器已经将过多自家特点放在 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 获取那几个特色,动态拼接图片 U奥迪Q5L;2)使用 HTML 中的 sizes 和 srcset
属性、picture 标签或 CSS 中的 image-set 属性来完结响应式图片。方案 1
很粗略,那里略过;方案 2
网上有好多有关小说,不熟谙的同班可以活动检索「响应式图片」精通下。

此间看1个拔取方案 2 中涉及的 picture、sizes 和 srcset
落成的响应式图片代码(via):

HTML<picture>
  <!-- serve WebP to Chrome and Opera -->
  <source
    media="(min-width: 50em)"
    sizes="50vw"
    srcset="/image/thing-200.webp 200w, /image/thing-400.webp 400w,
        /image/thing-800.webp 800w, /image/thing-1200.webp 1200w,
        /image/thing-1600.webp 1600w, /image/thing-2000.webp 2000w"
    type="image/webp">
  <source
    sizes="(min-width: 30em) 100vw"
    srcset="/image/thing-crop-200.webp 200w, /image/thing-crop-400.webp 400w,
        /image/thing-crop-800.webp 800w, /image/thing-crop-1200.webp 1200w,
        /image/thing-crop-1600.webp 1600w, /image/thing-crop-2000.webp 2000w"
    type="image/webp">
  <!-- serve JPEGXR to Edge -->
  <source
    media="(min-width: 50em)"
    sizes="50vw"
    srcset="/image/thing-200.jpgxr 200w, /image/thing-400.jpgxr 400w,
        /image/thing-800.jpgxr 800w, /image/thing-1200.jpgxr 1200w,
        /image/thing-1600.jpgxr 1600w, /image/thing-2000.jpgxr 2000w"
    type="image/vnd.ms-photo">
  <source
    sizes="(min-width: 30em) 100vw"
    srcset="/image/thing-crop-200.jpgxr 200w, /image/thing-crop-400.jpgxr 400w,
        /image/thing-crop-800.jpgxr 800w, /image/thing-crop-1200.jpgxr 1200w,
        /image/thing-crop-1600.jpgxr 1600w, /image/thing-crop-2000.jpgxr 2000w"
    type="image/vnd.ms-photo">
  <!-- serve JPEG to others -->
  <source
    media="(min-width: 50em)"
    sizes="50vw"
    srcset="/image/thing-200.jpg 200w, /image/thing-400.jpg 400w,
        /image/thing-800.jpg 800w, /image/thing-1200.jpg 1200w,
        /image/thing-1600.jpg 1600w, /image/thing-2000.jpg 2000w">
  <source
    sizes="(min-width: 30em) 100vw"
    srcset="/image/thing-crop-200.jpg 200w, /image/thing-crop-400.jpg 400w,
        /image/thing-crop-800.jpg 800w, /image/thing-crop-1200.jpg 1200w,
        /image/thing-crop-1600.jpg 1600w, /image/thing-crop-2000.jpg 2000w">
  <!-- fallback for browsers that don't support picture -->
  <img src="/image/thing.jpg" width="50%">
</picture>

那段冗长的代码只是为着落成一张响应式图片,尽管有局地言过其实,实际行使时一般不会写那样全,但从中可以取得一个定论:在客户端完毕的策略更多,HTML
体量就越大越冗余,可维护性和可读性就越差。

而使用了 HTTP Client Hints
之后,浏览器在页面发起子能源请求时,会经过新增的一名目繁四头部字段带上分辨率、设备像素比、图片宽度等新闻,使得种种繁复的政策可以挪到服务端去完成了。上边来看一看具体细节:

率先,有了扶助 HTTP Client Hints
的浏览器之后,页面上还索要显式启用它。那是因为不是富有服务端都完成了响应式输出策略,每一遍都发送那一个新增的底部大概会招致浪费。

与以后同样,那么些功能也足以透过 HTTP 响应头和 meta
标签两种格局拉开并安排:

Accept-CH: DPR, Width, Viewport-Width

或:

<meta http-equiv="Accept-CH" content="DPR, Width, Viewport-Width">

在启用了 HTTP Client Hints
的页面中,全部子财富请求(无论什么样项目,无论怎么样点子开创),都会教导
Accept-CH 属性中所指明的底部,例如:

BASHAccept: image/webp,image/*,*/*;q=0.8
Accept-Encoding: gzip, deflate, sdch
Accept-Language: zh-CN,zh;q=0.8,en;q=0.6,en-US;q=0.4,ja;q=0.2,de;q=0.2,zh-TW;q=0.2,cs;q=0.2,pt;q=0.2,ko;q=0.2
Connection: keep-alive
DPR: 2
Host: qgy18.imququ.com
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/46.0.2490.13 Safari/537.36
Viewport-Width: 1280
Width: 128

有了那个底部,图片服务器可以了解客户端的 devicePixelRatio 是
二,图片宽度是 128px、协理 Webp 格式,所以输出 256px 的双倍 Webp
图最合适。但是浏览器怎么了然这几个图片需求作为双倍图来使用呢(也就是说依然突显为
128px)?那就需求在响应头中扩展上面这么些字段作为 DPTiggo 的作答:

Content-DPR: 2

亟待专注的是,请求头中的 Width 字段,是依照 img 标签上的 sizes
属性算出来的。借使图片并未点名 sizes,可能图片请求是透过 JS
创制的,浏览器不可能获知 Width,也就不会带走那个尾部。

实际,除了 DP汉兰达、Viewport-Width 和 Width
之外,文档还规定了七个字段,不过经过自家的测试 Chrome 46
并从未帮助它们,那里差不多介绍下:

  • Downlink:用来提示当前网络的下水链路带宽,单位是 Mbps;
  • Save-Data:用来提示当前浏览器是不是工作在省流方式之下,取值为 1 或 0;

可以观望这多少个属性,也是为了尽量给用户节省带宽而规划的。可以预言,后续还会有越多字段加到
HTTP Client Hints 协议中来。随着 HTTP/2
的普及,底部压缩使得增添多少个底部字段带来的支出变得很小了。

值得注意的是,使用了 HTTP Client Hints 之后,服务端针对同2个 UHavalL
或者会输出差异的始末,所以随便中间节点,照旧浏览器,在促成响应 Cache
时务必��心,须求针对不一致的情形缓存多份内容。那亟需用到 HTTP/1 中的
Vary 响应头,例如:

Vary: DPR, Width, Downlink

注明倘若急需缓存那个响应,在生成缓存 Key 的时候必要将请求头中的
DPKoleos、Width 和 Downlink 的值计算进去。

好了,HTTP Client Hints 技术就介绍到那边。很安详地察看,一大半 Web
新技巧都以在给 HTML、CSS 和 JavaScript
伸张效益和特色,而那项技能却是把之前复杂的代码和逻辑未来移,让我们的
HTML
代码可以轻装上阵。一些开源图片处理系统已经起首辅助那么些新特色了,外国的局部CDN 托管服务一定也在摩拳擦掌,小编分外期待它的前景。

本文永久更新链接地址:

Client Hints 介绍 近来几年各样 Web
技术一向在爆炸式发展,每一天都有多量新东西涌现出来。针对这么些场景,业内两位大佬近来程序发文表…

Android 包罗了两种 HTTP Client:HttpURLConnectionApache HTTP
Client
。两者都帮忙 HTTPS,流上传和下载,访问超时设置,IPV6 和连接池。

明天自作者要向大家介绍的技能是:HTTP Client
Hints,也与天性优化有关。利用那项技艺,HTTP
客户端(平时可以认为是浏览器)能够积极将部分特征告诉服务端,以便服务端更有针对性地出口内容。那项技能由大家熟知的
Ilya Grigorik
提出,近年来还处于较为早期的等级,较为专业的叙述文档可以在那里找到。目前
Chrome 46
(beta)
已援助它,IE 和 Firefox 则还在考虑中。


事实上前边浏览器已经将广大本身特点放在 HTTP 请求中,例如上面这一个尾部字段:

Apache HTTP Client
DefaultHttpClient 和她的姐妹 AndroidHttpClient 都从 HTTP Client
继承而来。它们有大气、灵活的 API,落成也安静,bug 少。
不过大批量的 API 也使得 Android
团队在不损坏包容性的动静下对其改进比较不方便。所以 Android
团队前日对其的维护相比较少了。

  • User-Agent:提供浏览器类型及版本、操作系统及版本、浏览器内核等新闻;
  • Accept:申明浏览器协助什么 MIME type(例如 Chrome 通过 Accept
    评释自己帮助 image/webp 图片格式);
  • Accept-Encoding:评释本浏览器扶助什么内容编码方式(例如:gzip、deflate、sdch);
  • Accept-Language:声明本浏览器辅助那3个语言;

经过上述那么些底部字段,大家曾经足以针对分裂客户端输出不一致内容。例如本博客对支撑
Webp 格式的浏览器会采取 Webp 来收缩图片大小;本博客还会通过 User-Agent
针对 IE 老版本禁用 localStorage 缓存策略。

HttpURLConnection
HttpU酷威LConnection 是三个通用的、轻量化的 HTTP
Client。刚开头其落到实处过于简短,然则也相比较便于稳固地创新。
Froyo(2.2)此前,HttpUSportageLConnection 有一部分令人心寒的 bug。

不过有部分浏览器性子,大家鞭长莫及直接获取,如显示器分辨率、设备像素比(devicePixelRatio)、用户带宽等。而在移动
Web
中,为了尽量节约用户流量,需求输出尺寸最合适的图样财富。为了缓解那一个题材,常见的方案有:1)使用
JS 获取那几个特点,动态拼接图片 U奇骏L;2)使用 HTML 中的 sizes 和 srcset
属性、picture 标签或 CSS 中的 image-set 属性来落到实处响应式图片。方案 1
很简单,那里略过;方案 2
网上有不少连锁文章,不熟稔的校友可以自行检索「响应式图片」精通下。


那里看一个运用方案 2 中关系的 picture、sizes 和 srcset
完结的响应式图片代码(via):

Android 6.0 移出了对 Apache HTTP Client 的支撑。倘若您的 App 的 target
API 高于等于 Android 2.3(API 9),应该利用
HttpUCRUISERLConnection。HttpU奥迪Q5LConnection
的品质更好,因为它经过活动削减和响应缓存裁减了互连网请求,还收缩电量消耗。假使您依然坚韧不拔时候用
Apache HTTP API 的话,你势需求在build.gradle
中声明:

HTML<picture>
  <!-- serve WebP to Chrome and Opera -->
  <source
    media="(min-width: 50em)"
    sizes="50vw"
    srcset="/image/thing-200.webp 200w, /image/thing-400.webp 400w,
        /image/thing-800.webp 800w, /image/thing-1200.webp 1200w,
        /image/thing-1600.webp 1600w, /image/thing-2000.webp 2000w"
    type="image/webp">
  <source
    sizes="(min-width: 30em) 100vw"
    srcset="/image/thing-crop-200.webp 200w, /image/thing-crop-400.webp 400w,
        /image/thing-crop-800.webp 800w, /image/thing-crop-1200.webp 1200w,
        /image/thing-crop-1600.webp 1600w, /image/thing-crop-2000.webp 2000w"
    type="image/webp">
  <!-- serve JPEGXR to Edge -->
  <source
    media="(min-width: 50em)"
    sizes="50vw"
    srcset="/image/thing-200.jpgxr 200w, /image/thing-400.jpgxr 400w,
        /image/thing-800.jpgxr 800w, /image/thing-1200.jpgxr 1200w,
        /image/thing-1600.jpgxr 1600w, /image/thing-2000.jpgxr 2000w"
    type="image/vnd.ms-photo">
  <source
    sizes="(min-width: 30em) 100vw"
    srcset="/image/thing-crop-200.jpgxr 200w, /image/thing-crop-400.jpgxr 400w,
        /image/thing-crop-800.jpgxr 800w, /image/thing-crop-1200.jpgxr 1200w,
        /image/thing-crop-1600.jpgxr 1600w, /image/thing-crop-2000.jpgxr 2000w"
    type="image/vnd.ms-photo">
  <!-- serve JPEG to others -->
  <source
    media="(min-width: 50em)"
    sizes="50vw"
    srcset="/image/thing-200.jpg 200w, /image/thing-400.jpg 400w,
        /image/thing-800.jpg 800w, /image/thing-1200.jpg 1200w,
        /image/thing-1600.jpg 1600w, /image/thing-2000.jpg 2000w">
  <source
    sizes="(min-width: 30em) 100vw"
    srcset="/image/thing-crop-200.jpg 200w, /image/thing-crop-400.jpg 400w,
        /image/thing-crop-800.jpg 800w, /image/thing-crop-1200.jpg 1200w,
        /image/thing-crop-1600.jpg 1600w, /image/thing-crop-2000.jpg 2000w">
  <!-- fallback for browsers that don't support picture -->
  <img src="/image/thing.jpg" width="50%">
</picture>
android { useLibrary 'org.apache.http.legacy'}

发表评论

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

网站地图xml地图