H5下的 img 骚属性 srcset/sizes

不二如是

在026 - 回眸一笑百媚生主课中，小甲鱼老师带我们领略了H5下的图片素材玩法。

由于课程安排知识点很多，img 标签中的新增属性并没有深入介绍，本帖就来好好科普一下。

HTML 5.1 新增加了 img 元素的 srcset 、 sizes 属性，使得响应式图片的实现更为简单便捷。

很多主流浏览器的新版本也对这些新增加的内容支持良好：

srcset 是一个包含一个或多个源图的源图容器，不同源图用逗号分隔，每一个源图由下面两部分组成：

1、图片 URL
2、 x （像素比描述）或  w （图片像素宽度描述）描述符（与图片 URL 相隔一个空格）， w 描述符的加载策略是通过 sizes 属性里的声明来计算选择的

上述第2点如果没有给出，则是默认的 1x 。

以下情况是不正确的：

游客，如果您要查看本帖隐藏内容请回复

对于不正确的情况，不同的浏览器使用不同的处理方法。

sizes 写法与 srcset 差不多，也是用逗号分隔的一个或多个 string ，每个 string 由下面两部分组成：

1、媒体查询。最后一个 string 不能有这个，作为 fallback
2、图片 size （大小）信息。需要注意的是这里不能使用 % 来描述图片大小，如果要用百分比来表示，要使用类似于 vw （100vw = 100%设备宽度(viewport)）这样的单位来描述，其它的像是 px 、 em 等可以正常使用。

sizes 里给出的不同媒体查询选择图片大小的建议只对 w 描述符起作用。

也就是说，如果 srcset 里用的是 x 描述符或根本没有定义 srcset ，这个 sizes 是没有意义的。

演示 x 描述符

代码：

1. <img
   
2.         srcset=“
   
3.         http://ilovefishc.com/2500 5x,
   
4. http://ilovefishc.com/1500 3x,
   
5. http://ilovefishc.com/1000 2x,
   
6. http://ilovefishc.com/500 1x
   
7. "
   
8. http://ilovefishc.com/500/abc"
   
9. />

复制代码

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 描述符可以简单理解为描述源图的像素大小。
（无关宽度还是高度，大部分情况下可以理解为宽度）

代码：

1. <img
   
2.         srcset=“
   
3.         http://ilovefishc.com/2000 2000w,
   
4. http://ilovefishc.com/1500 1500w,
   
5. http://ilovefishc.com/1000 1000w,
   
6. http://ilovefishc.com/500 500w
   
7. "
   
8. sizes=“
   
9. (max-width: 500px) 500px,
   
10. (max-width: 1000px) 1000px,
    
11. (max-width: 1500px) 1500px,
    
12. 2000px
    
13. "
    
14. src="http://ilovefishc.com/500/abc"
    
15. />

复制代码

对于 viewport 在 500px 及以下的使用 500w 的图片，以此类推。

最后一个是前面的媒体查询都不符合的情况下使用 2000w 的图片。

这里如果没有相对应的 w 描述，一般选择第一个大于它的。

如上述例子中如果有一个媒体查询是 700px 的，一般加载 1000w 对应的源图。

下面再来一个使用百分比的例子：

1. 
   
2. <img
   
3.         srcset=“
   
4.         http://ilovefishc.com/2000 2000w,
   
5. http://ilovefishc.com/1500 1500w,
   
6. http://ilovefishc.com/1000 1000w,
   
7. http://ilovefishc.com/500 500w
   
8. "
   
9. sizes=“
   
10. (max-width: 500px) 100vw,
    
11. (max-width: 1000px) 80vw,
    
12. (max-width: 1500px) 50vw,
    
13. 2000px
    
14. "
    
15. src="http://ilovefishc.com/500/abc"
    
16. />

复制代码

viewport 宽度乘以1或0.8或0.5得到的像素来选择不同的 w 。

比如 viewport 为 800px ，对应 size 80vw ，就是 800*0.8=640 像素，应该加载一个 640w 的源图。

如果没有找到 640w ，这时候一般选择第一个大于 640w 的，也就是 1000w 。

对于没有给出 sizes 的，一般是按照 100vw 来选择加载图片。

当然这里也是没有规定的、看浏览器的选择。

---

                               
登录/注册后可看大图

如果喜欢，别忘了评分 ：

                               
登录/注册后可看大图

这位鱼油，如果喜欢本系列HTML帖子，请订阅 专辑&#9758;（传送门）（不喜欢更要订阅 ）

542624047

这...这几段代码的双引号是不是错了？

巫马三及

向大佬学习

Qmh

tjuwlb

tianyuan

知了和蜜蜂

学习学习

年少的梦想