WordPress：如何修改特定图片的loading与decoding媒体属性？

WordPress提供的wp_get_attachment_image_attributes钩子是修改媒体项HTML渲染属性的核心工具，以下是几种针对特定图片调整loading和decoding属性的实用实现方式：

1. 根据图片ID精准修改 #

如果明确目标图片的ID，可直接通过ID判断来覆盖属性值：

add_filter( 'wp_get_attachment_image_attributes', 'custom_image_attr_by_id', 10, 3 );
function custom_image_attr_by_id( $attr, $attachment, $size ) {
    // 指定目标图片ID，示例为123
    $target_id = 123;
    if ( $attachment->ID === $target_id ) {
        // 修改loading属性为"eager"，可选值：lazy/eager/auto
        $attr['loading'] = 'eager';
        // 修改decoding属性为"sync"，可选值：async/sync/auto
        $attr['decoding'] = 'sync';
    }
    return $attr;
}

2. 根据图片类名批量修改 #

如果需要给带有特定类名的图片统一调整属性，可通过类名判断实现：

add_filter( 'wp_get_attachment_image_attributes', 'custom_image_attr_by_class', 10, 3 );
function custom_image_attr_by_class( $attr, $attachment, $size ) {
    // 指定目标类名，示例为"hero-banner"
    $target_class = 'hero-banner';
    if ( strpos( $attr['class'], $target_class ) !== false ) {
        $attr['loading'] = 'lazy';
        $attr['decoding'] = 'async';
    }
    return $attr;
}

3. 根据图片尺寸修改 #

针对特定尺寸（比如自定义的large-feature尺寸）的图片调整属性：

add_filter( 'wp_get_attachment_image_attributes', 'custom_image_attr_by_size', 10, 3 );
function custom_image_attr_by_size( $attr, $attachment, $size ) {
    // 指定目标尺寸名称
    $target_size = 'large-feature';
    if ( $size === $target_size ) {
        $attr['loading'] = 'auto';
        $attr['decoding'] = 'auto';
    }
    return $attr;
}

关键说明 #

• loading属性可选值：lazy（懒加载）、eager（立即加载）、auto（浏览器自动判断）
• decoding属性可选值：async（异步解码）、sync（同步解码）、auto（浏览器自动判断）
• 代码需添加到主题的functions.php文件或自定义插件中，避免主题更新丢失修改

内容的提问来源于stack exchange，提问作者Chris Sears