菜单

一言以蔽之-聊聊响应式图片

2019年2月6日 - 金沙前端

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 请求中,例如上边这几个尾部字段:

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

而是有局部浏览器特性,我们鞭长莫及直接获取,如显示器分辨率、设备像素比(devicePixelRatio)、用户带宽等。而在运动
Web
中,为了尽量节约用户流量,须要输出尺寸最合适的图样资源。为精晓决这么些题材,常见的方案有:1)使用
JS 获取这个特点,动态拼接图片 URL;2)使用 HTML 中的 sizes 和 srcset
属性、picture 标签或 CSS 中的 image-set 属性来落成响应式图片。方案 1
很粗略,那里略过;方案 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”> <!– 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>

那段冗长的代码只是为了已毕一张响应式图片,即使有局部夸张,实际利用时一般不会写这么全,但从中能够赢得一个结论:在客户端完结的策略愈来愈多,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)?那就须求在响应头中增添上面那个字段作为 DPR 的答应:

Content-DPR: 2

1
Content-DPR: 2

亟待小心的是,请求头中的 Width 字段,是根据 img 标签上的 sizes
属性算出来的。假设图片并未点名 sizes,或者图片请求是经过 JS
创设的,浏览器无法获知 Width,也就不会带领这几个尾部。

事实上,除了 DPR、Viewport-Width 和 Width
之外,文档还规定了七个字段,不过经过自家的测试 Chrome 46
并从未援救它们,那里大致介绍下:

能够看到那五个属性,也是为了尽量给用户节省带宽而设计的。可以预知,后续还会有愈多字段加到
HTTP Client Hints 协议中来。随着 HTTP/2
的推广,尾部压缩使得增加几个底部字段带来的支付变得很小了。

值得注意的是,使用了 HTTP Client Hints 之后,服务端针对同一个 URL
可能会输出分裂的始末,所以无论中间节点,依然浏览器,在贯彻响应 Cache
时务必小心,需求针对区其余事态缓存多份内容。那亟需用到 HTTP/1 中的 
Vary 响应头,例如:

Vary: DPR, Width, Downlink

1
Vary: DPR, Width, Downlink

标明若是必要缓存那些响应,在生成缓存 Key 的时候要求将请求头中的
DPR、Width 和 Downlink 的值统计进去。

好了,HTTP Client Hints 技术就介绍到那边。很安慰地见到,一大半 Web
新技巧都是在给 HTML、CSS 和 JavaScript
扩大效益和特征,而那项技能却是把此前复杂的代码和逻辑以后移,让大家的
HTML
代码可以轻装上阵。一些开源图片处理连串现已初阶接济这些新特征了,海外的一部分
CDN 托管服务一定也在跃跃欲试,我那些可望它的未来。

1 赞 收藏
评论

图片 1

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 请求中,例如下边那个尾部字段:

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

唯独有一对浏览器特性,大家鞭长莫及直接拿走,如屏幕分辨率、设备像素比(devicePixelRatio)、用户带宽等。而在运动
Web
中,为了尽可能节约用户流量,需求输出尺寸最合适的图片资源。为精晓决那么些标题,常见的方案有:1)使用
JS 获取那几个特色,动态拼接图片 URL;2)使用 HTML 中的 sizes 和 srcset
属性、picture 标签或 CSS 中的 image-set 属性来兑现响应式图片。方案 1
很粗略,那里略过;方案 2
网上有多如牛毛相关文章,不熟知的校友可以活动检索「响应式图片」了解下。

此处看一个应用方案 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 是
2、图片宽度是 128px、辅助 Webp 格式,所以输出 256px 的双倍 Webp
图最合适。可是浏览器怎么了然这几个图形需求用作双倍图来行使呢(也就是说照旧显得为
128px)?那就需求在响应头中增添下边这几个字段作为 DPR 的答应:

Content-DPR: 2

急需专注的是,请求头中的 Width 字段,是按照 img 标签上的 sizes
属性算出来的。要是图片并未点名 sizes,或者图片请求是由此 JS
成立的,浏览器不能够得知 Width,也就不会带领这一个底部。

其实,除了 DPR、Viewport-Width 和 Width
之外,文档还确定了七个字段,可是透过自身的测试 Chrome 46
并没有协理它们,那里大约介绍下:

能够看来那多个特性,也是为了尽可能给用户节省带宽而布置的。可以预知,后续还会有越来越多字段加到
HTTP Client Hints 协议中来。随着 HTTP/2
的推广,头部压缩使得增加多少个底部字段带来的费用变得很小了。

值得注意的是,使用了 HTTP Client Hints 之后,服务端针对同一个 URL
可能会输出分裂的始末,所以不管中间节点,依旧浏览器,在落实响应 Cache
时必须��心,须求针对差其他场地缓存多份内容。这要求用到 HTTP/1 中的
Vary 响应头,例如:

Vary: DPR, Width, Downlink

标明借使必要缓存这几个响应,在生成缓存 Key 的时候需要将请求头中的
DPR、Width 和 Downlink 的值计算进去。

好了,HTTP Client Hints 技术就介绍到那里。很安详地观察,半数以上 Web
新技巧都是在给 HTML、CSS 和 JavaScript
扩张效果和特色,而这项技术却是把前边复杂的代码和逻辑将来移,让大家的
HTML
代码可以轻装上阵。一些开源图片处理体系已经早先协助那些新特性了,海外的一些
CDN 托管服务一定也在跃跃欲试,我格外意在它的前途。

正文永久更新链接地址:

Client Hints 介绍 如今几年各个 Web
技术平昔在爆炸式发展,天天都有大量新东西涌现出来。针对那些情景,业内两位大佬方今程序发文表…

本文永久更新链接地址:http://www.linuxidc.com/Linux/2015-09/122859.htm

<picture>
<source srcset=”smaller.jpg” media=”(max-width: 750px)”>
<source srcset=”default.jpg”>
<img srcset=”default.jpg” />
</picture>

好了,HTTP Client Hints 技术就介绍到此地。很安慰地看出,半数以上 Web
新技巧都是在给 HTML、CSS 和 JavaScript
增添效益和特征,而那项技能却是把此前复杂的代码和逻辑以后移,让大家的
HTML
代码可以轻装上阵。一些开源图片处理体系现已上马扶助这么些新特色了,国外的部分
CDN 托管服务一定也在蠢蠢欲动,我相当企盼它的前景。

但它不援助大家精晓的定义媒体类型:比如screen或者print等等。
除了选用px外,大家还足以利用em、px、cm、vw…,甚至CSS3的calc
,无法选用比例。
sizes=”(max-width: 320px) calc(100vw – 20px), 128px”
代表当视区增幅不高于320像素时候,图片宽度为全方位视区宽度减去20像素的分寸。
包容性查看:包容性
3.3 常见的选拔景况
(1)如果图片的大幅度是成套视口的比例,那么sizes可以这么设置:
sizes=”80vw”

今天自己要向大家介绍的技能是:HTTP Client
Hints,也与质量优化有关。利用这项技艺,HTTP
客户端(常常可以认为是浏览器)能够主动将一些特色告诉服务端,以便服务端更有针对性地出口内容。那项技艺由我们熟习的
Ilya Grigorik
提出,近年来还处于较为早期的等级,较为专业的描述文档可以在那里找到。目前
Chrome 46
(beta)
已帮助它,IE 和 Firefox 则还在设想中。

1、为啥要选拔响应式图片
即使有一张图片的显得涨幅为200px,那么,它在 1x
(即设备像素比为 1 的显示屏) 的显示屏上,是占了 200
个大体像素(即事实上所占的像素);它在 2x
的显示屏上,实际上是占了 400 个大体像素;在 3x
的显示屏上,实际上是占了 600 个大体像素;在 4x
的屏幕上就是占了 800 个大体像素。
如若这些图片只提供 200 像素的尺寸,那么在 2x~4x
的显示器上看起来就很模糊。要是只提供 800 像素的本子,那么在 1x~3x
的装置上会显得多余,因为加载时间会相较长,所以大家要选取响应式图片。
我们有二种艺术来安装响应式图片:
使用<picture>元素(HTML5新增)

在启用了 HTTP Client Hints
的页面中,所有子资源请求(无论什么类型,无论什么样办法创设),都会带走
Accept-CH 属性中所指明的底部,例如:

2、picture元素
在HTML
5中,增添了一个新因素<picture>。用过<video>、<audio>的,会认为<picture>的用法很熟稔:

前不久几年各类 Web
技术一向在爆炸式发展,天天都有大量新东西涌现出来。针对那么些场景,业内两位大佬方今程序发文表明了和睦的意见:Stop
pushing the web
forward、Is
the web platform getting too
big?。其实很早在此以前自己就意识到以自我当下的生气,吃透所有
Web 新技巧大致是不容许成功的义务,我关怀新技巧的重心放在了质量优化上。

注意:即使你用pc浏览器测试那段代码,一定要先进入活动形式,因为一打开页面时可视区大于500px(除非你的微机是迷你版),会先出示大图片,随后固然你缩短显示屏,小图片纵然会加载,你可以在控制台的“Network”里看到,可是来得的如故会是大图片,因为前边大图片已经缓存了,而浏览器会自行匹配最佳彰显的图样。
srcset用来提供图片资源,sizes
品质的作用类似媒体询问,用来设置图片尺寸的临界点。
sizes=”[media query] [length], [media query] [length]…”

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>

要保障使用 sizes
里统计出来的肥瘦始终是图片所占显示屏宽度(length)。
何以说sizes
品质的机能类似媒体询问呢?
因为它只是支撑部分媒体询问,比如:
(min-width: 400px)

图片 2

原文
“响应式(Responsive)”这些词我想我们没有听过一千遍,也有一百遍了。响应式是指完结分化显示屏分辨率的顶峰上浏览网页的不等突显情势。网上介绍响应式的稿子也有不足为奇了,比如:《自适应页面设计》。在那篇小说中,大家不讲页面布局的响应式,大家第一来探视“响应式图片”。那篇小说紧要内容:
干什么要采取响应式图片

可以看来那三个特性,也是为了尽可能给用户节省带宽而设计的。可以预知,后续还会有越多字段加到
HTTP Client Hints 协议中来。随着 HTTP/2
的普及,底部压缩使得扩展多少个尾部字段带来的开销变得很小了。

(not (orientation: landscape) )

相关文章

发表评论

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

网站地图xml地图