Retina尺寸图片触发Lighthouse「正确调整图片大小」警告排查

在Lighthouse移动审计（采用Moto G Power视口）中，图片的显示尺寸为264x270。我通过<picture>元素配置了适配方案：为Retina屏幕提供528x540的图片，为非Retina屏幕提供264x270的图片，代码如下：

<picture>
    <source 
        srcset="/assets/img/mypic_2x.webp 2x"
    />
    <img 
        src="/assets/img/mypic.webp" 
        alt="My Cool Picture" 
        width="264" 
        height="270"
    >
</picture>

但运行Lighthouse审计时仍收到「正确调整图片大小」警告，移除2x源后警告消失。明明是适配Retina的配置，为什么会触发这个错误？

原因分析 #

Lighthouse在检测图片尺寸时，会优先校验<source>提供的图片实际像素与显示尺寸的匹配度。问题出在你仅给<source>的srcset标注了2x，却没有明确指定图片在视口中的显示尺寸信息。

Lighthouse移动审计默认模拟的是设备像素比（DPR）为1的非Retina设备（比如Moto G Power），它会认为2x规格的图片（528x540）远大于当前视口的显示尺寸（264x270），即便你是为高DPR设备准备的，工具仍会判定这是“过度加载”的图片，从而抛出警告。

解决办法 #

方法1：为<source>添加sizes属性 #

明确告诉浏览器图片在视口中的显示宽度，让Lighthouse能正确关联显示尺寸与图片分辨率：

<picture>
    <source 
        srcset="/assets/img/mypic_2x.webp 2x"
        sizes="264px"
    />
    <img 
        src="/assets/img/mypic.webp" 
        alt="My Cool Picture" 
        width="264" 
        height="270"
    >
</picture>

方法2：在srcset中明确标注图片实际像素宽度 #

结合sizes属性，让Lighthouse更清晰地理解你的适配逻辑：

<picture>
    <source 
        srcset="/assets/img/mypic.webp 264w, /assets/img/mypic_2x.webp 528w"
        sizes="264px"
    />
    <img 
        src="/assets/img/mypic.webp" 
        alt="My Cool Picture" 
        width="264" 
        height="270"
    >
</picture>

通过上述配置，Lighthouse就能识别到你是根据不同设备DPR提供对应分辨率的图片，不会再误判为“图片尺寸未正确调整”。

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