H5下的 img 骚属性 srcset/sizes
本帖最后由 不二如是 于 2020-3-17 19:08 编辑在026 - 回眸一笑百媚生主课中，小甲鱼老师带我们领略了H5下的图片素材玩法。
由于课程安排知识点很多，img 标签中的新增属性并没有深入介绍，本帖就来好好科普一下。
HTML 5.1 新增加了 img 元素的 srcset 、 sizes 属性，使得响应式图片的实现更为简单便捷。
很多主流浏览器的新版本也对这些新增加的内容支持良好：
srcset 是一个包含一个或多个源图的源图容器，不同源图用逗号分隔，每一个源图由下面两部分组成：
1、图片 URL
2、 x （像素比描述）或w （图片像素宽度描述）描述符（与图片 URL 相隔一个空格）， w 描述符的加载策略是通过 sizes 属性里的声明来计算选择的
上述第2点如果没有给出，则是默认的 1x 。
以下情况是不正确的：
**** Hidden Message *****
对于不正确的情况，不同的浏览器使用不同的处理方法。
sizes 写法与 srcset 差不多，也是用逗号分隔的一个或多个 string ，每个 string 由下面两部分组成：
1、媒体查询。最后一个 string 不能有这个，作为 fallback
2、图片 size （大小）信息。需要注意的是这里不能使用 % 来描述图片大小，如果要用百分比来表示，要使用类似于 vw （100vw = 100%设备宽度(viewport)）这样的单位来描述，其它的像是 px 、 em 等可以正常使用。
sizes 里给出的不同媒体查询选择图片大小的建议只对 w 描述符起作用。
也就是说，如果 srcset 里用的是 x 描述符或根本没有定义 srcset ，这个 sizes 是没有意义的。
演示 x 描述符
代码：
<img
srcset=“
http://ilovefishc.com/2500 5x,
http://ilovefishc.com/1500 3x,
http://ilovefishc.com/1000 2x,
http://ilovefishc.com/500 1x
"
http://ilovefishc.com/500/abc"
/>
5像素比的设备使用2500x2500像素的图片。
（很多安卓手机比如小米、华为的所谓高清2k屏就是5像素比以上的）
3像素比的设备使用1500x1500像素的图片。
2像素比的设备使用1000x1000像素的图片。
1像素比（普通的笔记本电脑显示屏就是1像素比的）的设备使用500x500像素比的图片。
对于不支持 srcset 的浏览器，显示 src 的图片（这个图片是500x500像素、RGB 颜色 abc 的）。
而对于 srcset 里没有给出像素比的设备，不同浏览器的选择策略不同。
比如例子中没有给出1.5像素比的设备要使用哪张图，浏览器可以选择2像素比的也可以选择1像素比的。
当然也可以选择5像素比或者使用 src 的图片，但是这显然不是一个好的选择。
演示 w 描述符和sizes
w 描述符可以简单理解为描述源图的像素大小。
（无关宽度还是高度，大部分情况下可以理解为宽度）
代码：
<img
srcset=“
http://ilovefishc.com/2000 2000w,
http://ilovefishc.com/1500 1500w,
http://ilovefishc.com/1000 1000w,
http://ilovefishc.com/500 500w
"
sizes=“
(max-width: 500px) 500px,
(max-width: 1000px) 1000px,
(max-width: 1500px) 1500px,
2000px
"
src="http://ilovefishc.com/500/abc"
/>
对于 viewport 在 500px 及以下的使用 500w 的图片，以此类推。
最后一个是前面的媒体查询都不符合的情况下使用 2000w 的图片。
这里如果没有相对应的 w 描述，一般选择第一个大于它的。
如上述例子中如果有一个媒体查询是 700px 的，一般加载 1000w 对应的源图。
下面再来一个使用百分比的例子：
<img
srcset=“
http://ilovefishc.com/2000 2000w,
http://ilovefishc.com/1500 1500w,
http://ilovefishc.com/1000 1000w,
http://ilovefishc.com/500 500w
"
sizes=“
(max-width: 500px) 100vw,
(max-width: 1000px) 80vw,
(max-width: 1500px) 50vw,
2000px
"
src="http://ilovefishc.com/500/abc"
/>
viewport 宽度乘以1或0.8或0.5得到的像素来选择不同的 w 。
比如 viewport 为 800px ，对应 size 80vw ，就是 800*0.8=640 像素，应该加载一个 640w 的源图。
如果没有找到 640w ，这时候一般选择第一个大于 640w 的，也就是 1000w 。
对于没有给出 sizes 的，一般是按照 100vw 来选择加载图片。
当然这里也是没有规定的、看浏览器的选择。
http://xxx.fishc.com/forum/201803/20/101934b3igkgm9hgbgz0ck.gif
如果喜欢，别忘了评分{:10_281:} ：
http://xxx.fishc.com/forum/201709/19/094516hku92k2g4kefz8ms.gif
这位鱼油，如果喜欢本系列HTML帖子，请订阅 专辑☞（传送门）（不喜欢更要订阅{:10_278:} ） 这...这几段代码的双引号是不是错了？{:10_266:} 向大佬学习 {:10_257:} {:10_254:} {:10_277:} 学习学习 {:10_243:}
页:
[1]