News Contents
信息中心

响应式图片srcset全新释义sizes属性w描述符

发表日期:2018/9/17      浏览次数:

新的srcset是功能更加强大,适用场景也更多,只需要提供图片资源、以及断点,其他都交给浏览器智能解决,浏览器会自动根据场景匹配最佳显示图片。你的表情现在是不是这样子啊:

酷毙了 表情

首先看一段HTML代码,关于两个图片:

<img src="128px.jpg"
     srcset="128px.jpg 128w, 256px.jpg 256w, 512px.jpg 512w"
     sizes="(max-width: 360px) 340px, 128px">

<img src="128px.jpg"
     srcset="128px.jpg 128w, 256px.jpg 256w, 512px.jpg 512w"
     sizes="(max-width: 360px) calc(100vw - 20px), 128px">

其中,128px.jpg,256px.jpg,512px.jpg分别指下面3张图片(左上角有尺寸标示):

128宽度图片 256宽度图片 512宽度图片

两个图片HTML的srcset的属性值是一样的,如下:

srcset="128px.jpg 128w, 256px.jpg 256w, 512px.jpg 512w"

表示,当<img>元素的宽度规格为128的时候,加载128px.jpg,宽度规格为256的时候,加载256px.jpg, 宽度规格为512的时候,加载512px.jpg。

这里的宽度规格就是w描述符的另外一种理解,其与sizes属性设定和屏幕密度密切相关。

举个例子,假设屏幕密度是2的iPhone6手机,sizes属性计算值是128px,则此时<img>实际的宽度规格应该是128*2也就是256w,因此会加载256px.jpg这张图。

您可以狠狠地点击这里:srcset与sizes新释义w描述符示意demo

例如,我在我的PC上普通屏幕的windows机子打开此页面。

结果上下两个<img>元素加载的都是128.jpg这张图:

加载128px这张图

原因如下:

上面的<img>元素设置的sizes属性值(max-width: 360px) 340px, 128px表示当视区宽度不大于360像素时候,图片的宽度限制为340像素;其他情况下,使用128像素。
下面的<img>元素设置的sizes属性值(max-width: 360px) calc(100vw - 20px), 128px表示当视区宽度不大于360像素时候,图片的宽度限制为屏幕宽度减20像素;其他情况下,使用128像素。

由于桌面显示宽度远大于360px,所以,此时图片计算的尺寸宽度是128px,加上屏幕密度为1,因此,正好是128w这个规格,于是加载128px.jpg。

现在,我们换到手机模式下预览,选个iPhone6,此时屏幕宽度375px,依然大于360px,但是屏幕密度为2,因此,图片尺寸128px乘以密度2正好是256w这个规格,于是加载256px.jpg。

如下截图:
256

同理,切换成屏幕密度是3的iPhone6 Plus,则会加载512.jpg,因此此时宽规则超过256w,使用上面一个梯度图片资源512w

设备像素比为3时候加载的图片

sizes的媒体查询

下面来看看sizes属性中媒体查询的应用。

我们需要把我们的屏幕宽度调整到360宽度以下,同时为了避免测试干扰,需要设置设备像素比为1。此时,我们可以自定义一个媒体设备,例如,模拟微信浏览器的一个360*680的设备:

模拟微信自定义设备

此时,图片宽度就不是128px,上面的<img>元素340px,下面的<img>元素calc(100vw - 20px)也是340px,此时宽度规格是340w,因此,都是加载的512w下的512px.jpg,截图如下:

加载512规格图片

OK, 下面我们想办法把显示宽度弄成250px,会发现上下两张图的差异来了,如下Firefox浏览器下截图:

Firefox浏览器下响应式不同尺寸图片截图

因为上面<img>元素计算尺寸340px,下面的<img>元素计算尺寸是230px230px256w规格之下,因此,下面的<img>元素加载的是256px.jpg。

然而,我在我的Chrome 62浏览器中测试发现,丫的居然都是加载的512px.jpg,我估计多半是bug。

因为,当初我写这篇文章时候,Chrome38版本,表现还是符合预期的:

上下使用图片尺寸不一样了

尴尬!

四、兼容性以及结束语

目前srcsetsizes属性兼容性相比几年前要好了很多,如下截图:

兼容性截图

移动端可以放心使用,桌面端也可以放心使用(IE嘛就加载一倍图好了),因为有src属性保底。

盛大建站承接个人、公司、企业的网站建设、网页设计、网店制作、独立商城制作、外贸网站制作,也承接同行介绍的业务,欢迎联系!
本站承接主要业务如下:
1、提供免备案虚拟主机(网站空间),有独立国内服务器、高速美国服务器、香港服务器、韩国服务器、日本服务器,>> http://www.fuanxx.com
2、网站建设:个人网店制作、企业建站、公司网站、新闻、下载等;论坛、博客网站搭建,承接外贸英文站制作
3、承接阿里巴巴、京东、淘宝、天猫等的商品数据采集
4、网站防钓鱼,可以过360、QQ、搜狗、金山、微信拦截
5、要就发IP网站限制访问系统,防止同行抄袭并保障海外客户访问不受影响,>> http://www.198ip.com
十年如一日,我们专注于提供高品质 定制网站建设服务!
您的信任,我们的责任,期待与您的合作!