禁用WordPress响应式图片属性srcset和sizes

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

我们有很多网友发现在WordPress上传的有些大图片并不是显示自己自定义的图片尺寸,好像是被程序或者模板自带的样式固定图片的最大尺寸。于是通过查看源代码发现网站图片有属性srcset/sizes限制图片大小。

禁用WordPress响应式图片属性srcset和sizes 网站建设教程 第1张

现在大部分的WordPress主题已经做了“懒加载”,即预先在img的src里放一张空图片,把实际URL写到data-original属性里,再根据页面滚动的高度,把data-original的值放到src属性里。当图片被赋予了srcset属性时,所做的这一切就形同虚设了。

 

禁用WordPress响应式图片属性srcset和sizes

在主题的 functions.php 文件末尾追加下面的函数

//禁用WordPress响应式图片属性srcset和sizes
function disable_srcset( $sources ) {
return false;
}
add_filter( 'wp_calculate_image_srcset', 'disable_srcset' );