研究一下响应式图片加载属性srcset和sizes

元旦过后又长一岁,然而活到老学到老这个道理是不变的。这几天把手上一部分WordPress网站升级到最新版4.4,就学到新东西了。发现4.4版给所有在文章内容区的图片都加上了两个属性:srcset和sizes。比如:
srcset
这俩个属性的作用是为不同显示尺寸加载不同的图片源,这样就能在图片本身做到“响应式”,而不仅仅是跟随屏幕尺寸了。
比如上面图中的srcset为

srcset=".../gt-scavenger_1-300x507.jpg 300w, .../gt-scavenger_1-768x1298.jpg 768w, .../gt-scavenger_1-606x1024.jpg 606w, .../gt-scavenger_1-624x1055.jpg 624w, .../gt-scavenger_1.jpg 1407w"

其中每一段的格式为srcset=”[图片URL] [图片宽度], [图片URL] [图片宽度]…”,按最新的标准,单位“w”表示当前显示宽度的像素值。解释起来就是这张图片在低于300px宽度的时候,显示小图“gt-scavenger_1-300×507.jpg”;高于300像素且低于606像素时,显示中等尺寸图片“gt-scavenger_1-606×1024.jpg”;当图片显示尺寸大于1407像素时就显示全尺寸图“gt-scavenger_1.jpg”。
另外一个属性sizes的写法

sizes="(max-width: 1407px) 100vw, 1407px"

其格式为sizes=”[media query] [视窗宽度], [media query] [视窗宽度] …”。这里的宽度为视窗宽度,即我们常说的viewport宽度。和我们在媒体CSS中写的媒体查询是一致的,这里最后一个“1407px”指默认状态下,即前面的媒体查询没有描述到的情况下这张图片显示的宽度。以上代码的通俗解释是,这张图片在1407px宽的视窗内撑满视窗(100vw),而视窗宽度超过1407px,图片就按1407px的最大尺寸显示。

srcset和sizes为HTML5的最新属性,合理使用它们,尤其是srcset,可以有效避免资源的过度加载,在移动端通过按需加载,减少图片的加载量,加快网页打开速度。不过在实际开发中这样分级显示图片是很麻烦的,要制作多个尺寸的图片,HTML里还要加那么多代码…想想就头疼。

令人惊喜的是在最新版WordPress中你完全不需要进行任何额外操作,只需像平时那样在文章中插图片即可。WordPress会自动根据你上传的图片给,按照各级缩略图规划出适合的显示分级,真的很强大!

不过在一些旧的WordPress项目中我们也碰到了问题。比如在有些页面中我已经做了“懒加载”,即预先在img的src里放一张空图片,把实际URL写到data-original属性里,再根据页面滚动的高度,把data-original的值放到src属性里。当图片被赋予了srcset属性时,所做的这一切就形同虚设了。页面载入的时候,浏览器已经从srcset属性中读取了一张适配的图片到src属性中:
页面载入的时候,图片就会从srcset属性中读取一张适配的图片到src属性中
要避免这种情况,我只能在懒加载和srcset之间二取其一。如果要在WordPress中禁用srcset和sizes,你可以把以下代码加到主题的function文件中:

1
2
3
4
5
//disable srcset on images
function disable_srcset( $sources ) {
	return false;
}
add_filter( 'wp_calculate_image_srcset', 'disable_srcset' );

最后,如果你想要深挖srcset和sizes,可以看一下 这篇文章

本站所有文章均为原创,欢迎转载,请注明文章出处:https://blog.brain1981.com/1323.html。百度和各类采集站皆不可信,搜索请谨慎鉴别。技术类文章一般都有时效性,本人习惯不定期对自己的博文进行修正和更新,因此请访问出处以查看本文的最新版本。

如本文对你有用,请在页面右侧栏扫码领取我的支付宝红包,作为打赏吧 (喂到底是我赏你还是你赏我啊-_-!)

关注我们的微信公众号-JennyStudio 本站记录了近几年的工作中遇到的一些技术问题和解决过程,“作品集”还收录了本人的大部分作品展示。除了本博客外,我们的工作室网站 – JennyStudio,内有更多作品回顾和展示。
您也可以扫描左边的二维码,关注我们的微信公众号,在微信上查看我们的案例。

2 关于 “研究一下响应式图片加载属性srcset和sizes” 的评论

发表评论

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