WordPress输出img标签时srcset与sizes属性丢失问题排查

问题现象 #

编写自定义函数生成响应式img标签，函数返回值写入日志时可完整输出包含srcset、sizes属性的标签，但在侧边栏通过echo输出到前端时，这两个属性被自动移除，仅保留基础属性。

相关代码 #

• 自定义响应式图片生成函数

function mytheme_get_responsive_image( $image_id ) {
        $size   = 'full';
        $src    = wp_get_attachment_image_url( $image_id, $size );
        $class  = 'myclass';
        $alt    = get_post_meta( $image_id, '_wp_attachment_image_alt', true );
        $srcset = wp_get_attachment_image_srcset( $image_id, $size );
        $sizes  = '(min-width: 1200px) 354px, (max-width: 767px) 87vw, (max-width: 1024px) 52.2vw, (max-width: 1199px) 27.45vw';

        $output  = '<img src="' . esc_attr( $src ) . '" ';
        $output .= 'alt="' . esc_attr( $alt ) . '" ';
        $output .= 'class="' . esc_attr( $class ) . ' wp-image-' . $image_id . '" ';
        $output .= 'srcset="' . esc_attr( $srcset ) . '" ';
        $output .= 'sizes="' . esc_attr( $sizes ) . '">';

        return $output;
}

• 日志中记录的正常输出结果

<img src="https://local.test/wp-content/uploads/2022/04/picture.jpg" alt="alttext" class="myclass wp-image-2305" srcset="https://local.test/wp-content/uploads/2022/04/picturejpg 1000w, https://local.test/wp-content/uploads/2022/04/picture.jpg 300w, https://local.test/wp-content/uploads/2022/04/picture.jpg 768w" sizes="(min-width: 1200px) 354px, (max-width: 767px) 87vw, (max-width: 1024px) 52.2vw, (max-width: 1199px) 27.45vw">

• 侧边栏调用代码

echo mytheme_get_responsive_image( $image_id );

• 前端实际渲染的异常输出结果

<img src="https://local.test/wp-content/uploads/2022/04/picture.jpg" alt="alttext" class="myclass wp-image-2305">

核心原因 #

日志打印结果证明函数内部字符串拼接逻辑完全正常，属性丢失发生在函数返回值到前端最终渲染的输出链路上，90%以上的场景由以下两类问题导致：

• 侧边栏属于小工具渲染区域，输出内容会经过HTML白名单安全过滤，若过滤规则的img标签允许属性列表未包含srcset、sizes，这两个属性会被直接剔除。
• 主题、缓存/图片优化插件内置了图片重写逻辑，会在输出阶段遍历页面所有img标签，删除原有srcset/sizes准备重新生成；由于自定义拼接的img标签缺少width、height标准属性，这类逻辑会判定该标签为非标准插入图片，跳过重新生成步骤，最终输出的标签就丢失了响应式属性。

排查与解决步骤 #

1. 补全img标签的标准宽高属性
   自定义函数拼接img标签时未输出width、height属性，这是触发绝大多数图片处理逻辑异常的核心诱因。修改函数补充这两个属性即可：

function mytheme_get_responsive_image( $image_id ) {
        $size   = 'full';
        $src    = wp_get_attachment_image_url( $image_id, $size );
        // 补全获取图片宽高逻辑
        $img_meta = wp_get_attachment_metadata( $image_id );
        $width = $img_meta['width'] ?? '';
        $height = $img_meta['height'] ?? '';
        $class  = 'myclass';
        $alt    = get_post_meta( $image_id, '_wp_attachment_image_alt', true );
        $srcset = wp_get_attachment_image_srcset( $image_id, $size );
        $sizes  = '(min-width: 1200px) 354px, (max-width: 767px) 87vw, (max-width: 1024px) 52.2vw, (max-width: 1199px) 27.45vw';

        $output  = '<img src="' . esc_attr( $src ) . '" ';
        $output .= 'alt="' . esc_attr( $alt ) . '" ';
        $output .= 'class="' . esc_attr( $class ) . ' wp-image-' . $image_id . '" ';
        // 拼接宽高属性
        $output .= 'width="' . esc_attr( $width ) . '" height="' . esc_attr( $height ) . '" ';
        $output .= 'srcset="' . esc_attr( $srcset ) . '" ';
        $output .= 'sizes="' . esc_attr( $sizes ) . '">';

        return $output;
}

2. 修复HTML白名单过滤规则
   如果补全宽高后属性仍被过滤，说明安全白名单规则缺失相关属性，通过以下钩子将srcset、sizes加入img标签的允许属性列表：

add_filter( 'wp_kses_allowed_html', function( $allowed_tags, $context ) {
    if ( in_array( $context, ['post', 'widget'], true ) && isset( $allowed_tags['img'] ) ) {
        $allowed_tags['img']['srcset'] = true;
        $allowed_tags['img']['sizes'] = true;
        $allowed_tags['img']['width'] = true;
        $allowed_tags['img']['height'] = true;
    }
    return $allowed_tags;
}, 10, 2 );

3. 定位冲突的插件/主题过滤器
   完成以上两步后问题仍存在的话，通过临时移除小工具输出的相关过滤器定位冲突点：

// 临时移除小工具内容的所有过滤钩子，验证输出
remove_all_filters( 'widget_text_content' );
echo mytheme_get_responsive_image( $image_id );

如果此时输出正常，逐个恢复被移除的钩子，即可定位到是哪个主题/插件的逻辑删除了响应式属性，针对性调整对应规则即可。

注：日志中srcset第一个资源路径picturejpg缺少文件扩展名分隔点，属于测试数据问题，和属性丢失故障无关。

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