srcset图片未在PageSpeed Insights中正确缩放，Chrome Lighthouse测试正常

问题背景 #

我有一个基于HubSpot Blog运行的页面，图片采用srcset实现，代码如下：

<img loading="lazy" src="
https://emobility-magazin.com/hs-fs/hubfs/Element%2023@300x.png?width=480&amp;name=Element%2023@300x.png" 
alt="Element 23@300x" width="480" style="width: 480px;" srcset="
https://emobility-magazin.com/hs-fs/hubfs/Element%2023@300x.png?width=240&amp;name=Element%2023@300x.png 240w, 
https://emobility-magazin.com/hs-fs/hubfs/Element%2023@300x.png?width=480&amp;name=Element%2023@300x.png 480w, 
https://emobility-magazin.com/hs-fs/hubfs/Element%2023@300x.png?width=720&amp;name=Element%2023@300x.png 720w, 
https://emobility-magazin.com/hs-fs/hubfs/Element%2023@300x.png?width=960&amp;name=Element%2023@300x.png 960w, 
https://emobility-magazin.com/hs-fs/hubfs/Element%2023@300x.png?width=1200&amp;name=Element%2023@300x.png 1200w, 
https://emobility-magazin.com/hs-fs/hubfs/Element%2023@300x.png?width=1440&amp;name=Element%2023@300x.png 1440w" 
sizes="(max-width: 480px) 100vw, 480px">

遇到的问题 #

Google PageSpeed Insights测试提示“properly size images”优化建议，指出上述图片存在未正确缩放的问题，srcset似乎在测试中未生效；通过PageSpeed Insights API获取的测试数据也显示同样问题。但在Chrome开发者工具的隐身模式下运行Lighthouse测试时，该问题不存在，图片能通过srcset实现正确缩放。

疑问 #

是否存在某些因素导致PageSpeed Insights测试时图片无法正确缩放？我的srcset实现是否存在问题？或是PageSpeed Insights的Bug？

问题分析与解答 #

1. srcset实现的隐含问题 #

你的srcset语法本身符合规范，但原始图片尺寸是核心问题：文件名Element 23@300x.png说明原始图片仅300px宽，而你在src和srcset中请求了480px、720px等更大尺寸的资源。HubSpot的图片CDN只能对原始图片进行缩小处理，无法放大，因此这些大尺寸URL实际返回的还是300px的图片。当页面以480px宽度显示时，浏览器会把300px的图片拉伸到480px，这就是PageSpeed提示“未正确缩放”的根本原因——实际图片像素远小于显示尺寸。

2. PageSpeed与本地Lighthouse的差异原因 #

• 检测逻辑严格度不同：PageSpeed Insights会严格校验图片实际像素尺寸与页面显示尺寸的匹配度，一旦发现拉伸/压缩比例超出合理范围就会触发提示；而本地Lighthouse的检测逻辑可能在某些场景下（如缓存干扰、设备像素比适配）未触发该提示。
• 测试环境差异：PageSpeed Insights在云端模拟移动设备（默认类似Pixel 5的视口）加载，而本地测试的视口、网络环境或缓存状态与云端不同，导致资源选择逻辑和检测结果出现差异。
• 懒加载的影响：图片添加了loading="lazy"，若该图片在首屏范围内，云端测试的资源优先级判断可能未触发srcset的尺寸选择逻辑，直接加载了默认的src资源，进一步放大了尺寸不匹配的问题。

3. 修复方案 #

• 上传足够大的原始图片：上传至少1440px宽的原始图片到HubSpot，确保CDN能生成srcset中所有指定尺寸的缩小版资源，避免图片被拉伸。
• 调整srcset与sizes配置：根据原始图片的实际尺寸，删除srcset中超过原始尺寸的选项，或调整sizes属性，确保显示尺寸不超过原始图片的最大像素尺寸。
• 优化懒加载设置：若图片在首屏内，建议移除loading="lazy"，确保PageSpeed能正确识别资源加载逻辑和尺寸匹配情况。

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