WordPress禁用Responsive Images(2021)

最后更新于 2021 年 11 月 29 日

WordPress4.4引入了Responsive Images，所有附件图片都会添加srcset和sizes属性，对移动设备非常友好，但也有需要禁用Responsive Images的时候，方法如下。

什么是Responsive Images

响应式图片，使用srcset属性指定一系列图片源，浏览器根据当前视口大小和分辨率选择尺寸合适的图片。同时，可以通过sizes属性指定一些规则，告诉浏览器当视口尺寸满足媒体查询条件时，应该选多大的图片。

举例，你在WordPress Editor里插入了图片，源代码如下，注意srcset属性和sizes属性。

<figure class="wp-block-image size-full">
    
    <img loading="lazy" width="1238" height="745" src="https://www.solagirl.net/woocommerce-payment-test-enable.png" alt="" class="wp-image-5783" 

    srcset="https://www.solagirl.net/woocommerce-payment-test-enable-1238.png 1238w,
            https://www.solagirl.net/woocommerce-payment-test-enable-640.png 640w" 

    sizes="(max-width: 1238px) 100vw, 1238px">
</figure>

srcset告诉我们备选图片有两站，一张宽度是1238px，另一张是640px，注意“w”是单位，描述图片的实际宽度，可以理解为像素。

下面，有请浏览器选择图片。浏览器看了一下sizes，当视口尺寸小于1238px时，按照viewport=100vw选择图片，比如手机屏幕viewport是400px，就从列表里选择大于400px的图片源，retina屏幕还会考虑分辨率，选一张更大的。当viewport大于1238px时，就当viewport是1238px来选图片。

禁用Responsive Images

如果你的图片本来就不大，把img标签弄的如此臃肿就显得多余，在child theme的functions.php里加入如下代码可禁用此功能。

function sola_disable_responsive_images( $sources ) {

    //只在archive页面禁用
    if( is_archive() ){
        return false;
    }

    return $sources;
}
 
add_filter( 'wp_calculate_image_srcset', 'sola_disable_responsive_images' );

可以选择性的在某些页面禁用。参考WordPress Conditional Tags或WooCommerce Conditional Tags。

WordPress如何输出Responsive Images

理解WordPress如何控制responsive images，可以更好的解决实际问题。WordPress给图片添加属性的方法有三个途径：

通过wp_get_attachment_image()输出的图片。
post_content里的图片，通过add_filter( ‘the_content’, ‘wp_filter_content_tags’ )增加srcset和sizes。
gutenberg编辑器的元素，通过wp_filter_content_tags( $content )增加srcset和sizes属性。

可用fitler总共有四个，如下：

// 控制延迟加载的filter
apply_filters( 'wp_lazy_loading_enabled', $default, $tag_name, $context );

// 控制srcset属性的filter
apply_filters( 'wp_calculate_image_srcset', $sources, $size_array, $image_src, $image_meta, $attachment_id );

// 控制size属性的filter
apply_filters( 'wp_calculate_image_sizes', $sizes, $size, $image_src, $image_meta, $attachment_id );

// 控制所有属性的filter,仅适用于通过wp_get_attachment_image()输出的图片
apply_filters( 'wp_get_attachment_image_attributes', $attr, $attachment, $size );

这几个filter里，改变sizes属性可能最实用，WordPress的sizes规则过于简单，只要viewport尺寸大于图片尺寸，就会选择最大的图片，一张产品图我选择输出medium尺寸，比如768px宽，但一栏显示4个产品，图片渲染的宽度只有300px。结果会怎样：

viewport小于768px时，可能会选择尺寸小于768px的图片，比如thumbnail
viewport大于768px，就选最大的，即使实际渲染宽度只有300px。

结局就是，viewport越小越会用小图，越大则用大图，对一行一张图片的布局来说没问题，但对分栏布局不一定适用。所以我们可以适当修改sizes属性，例如：

viewport小于480px时一行一个产品，按viewport=100vw选择图片
viewport小于768px时一行两个产品，按viewport=240px选择图片
大于768px一行四个产品，按viewport=300px选择图片

add_filter( 'wp_calculate_image_sizes', 'sola_custom_image_sizes_attribute' );
 
function sola_custom_image_sizes_attribute( $sizes ) {
  return '(max-width: 480px) 100vw, (max-width: 768px) 240px, 300px';
}

延伸阅读：什么是响应式图片。