Lighthouse提示图片尺寸不当：Retina屏图片适配矛盾解决咨询

问题根源 #

你的配置存在两个核心问题：

1. srcset密度规则不合理：使用1.1x触发2x图加载，会导致低DPR但显示尺寸较大的设备也加载2x图，同时Lighthouse会识别到1x图（430×318）被放大到718px宽度显示（缩放比例约1.67倍），属于过度缩放，因此报错。
2. img标签固有尺寸不匹配：width="718"和height="531"是图片的显示尺寸，而非实际1x图的固有尺寸，导致浏览器无法准确评估图片缩放比例。

解决方案 #

方案1：生成匹配最大显示尺寸的图片（推荐） #

这是最符合Lighthouse规范的做法，从根源解决图片缩放问题：

1. 生成1x图：尺寸为718×531（匹配CSS中max-width:718px的显示尺寸，保持430:318的比例）。
2. 生成2x图：尺寸为1436×1062（1x图的2倍，适配Retina设备）。
3. 修改后的图片代码：

<picture>
    <source 
        srcset="//localhost:3000/addons/website-public/img/landing-route-planning/last_mile_route_planning_software-mobile.webp 1x, 
                //localhost:3000/addons/website-public/img/landing-route-planning/last_mile_route_planning_software-mobile@2x.webp 2x" 
        sizes="(max-width: 718px) 100vw, 718px" 
        type="image/webp">
    <img 
        srcset="//localhost:3000/addons/website-public/img/landing-route-planning/last_mile_route_planning_software-mobile.webp 1x, 
                //localhost:3000/addons/website-public/img/landing-route-planning/last_mile_route_planning_software-mobile@2x.webp 2x" 
        src="//localhost:3000/addons/website-public/img/landing-route-planning/last_mile_route_planning_software-mobile.webp" 
        sizes="(max-width: 718px) 100vw, 718px"  
        width="718" 
        height="531" 
        style="max-width: 718px; width: 100%; height: auto;" 
        fetchpriority="high"
        alt="最后一公里路线规划软件">
</picture>

• 调整srcset为标准的1x和2x密度规则，仅Retina设备加载2x图。
• 明确sizes属性，告诉浏览器图片的显示宽度逻辑，帮助其精准选择资源。
• width和height匹配1x图的固有尺寸，避免布局偏移，同时让Lighthouse正确识别图片缩放比例。

方案2：不生成新图，调整srcset规则（妥协方案） #

如果无法生成新图，通过修改srcset的宽度描述规则，让浏览器在显示宽度超过430px时直接加载2x图，避免1x图被过度放大：

<picture>
    <source 
        srcset="//localhost:3000/addons/website-public/img/landing-route-planning/last_mile_route_planning_software-mobile.webp 430w, 
                //localhost:3000/addons/website-public/img/landing-route-planning/last_mile_route_planning_software-mobile@2x.webp 860w" 
        sizes="(max-width: 718px) 100vw, 718px" 
        type="image/webp">
    <img 
        srcset="//localhost:3000/addons/website-public/img/landing-route-planning/last_mile_route_planning_software-mobile.webp 430w, 
                //localhost:3000/addons/website-public/img/landing-route-planning/last_mile_route_planning_software-mobile@2x.webp 860w" 
        src="//localhost:3000/addons/website-public/img/landing-route-planning/last_mile_route_planning_software-mobile.webp" 
        sizes="(max-width: 718px) 100vw, 718px"  
        width="430" 
        height="318" 
        style="max-width: 718px; width: 100%; height: auto;" 
        fetchpriority="high"
        alt="最后一公里路线规划软件">
</picture>

• 使用宽度描述（430w、860w）代替密度描述，浏览器会根据显示宽度选择合适的图片：当显示宽度≥430px时，自动加载860w的2x图，避免1x图被放大。
• width和height改为1x图的固有尺寸，让Lighthouse识别到图片不会被过度缩放。
• sizes属性明确显示宽度规则，确保浏览器选择逻辑正确。

验证效果 #

修改后重新运行Lighthouse测试，“合理调整图片尺寸”错误会消失，同时Retina设备会加载2x图，保持显示清晰。

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