为何Lighthouse会对我的响应式图片尺寸提出警告？

问题背景 #

已配置多规格响应式图片，但Lighthouse仍在移动端提示图片尺寸过大。现有实现代码如下：

<img class="image__img ng-star-inserted"
     sizes="(max-width: 464px) calc(100vw), (min-width: 465px) and (max-width: 767px) calc(100vw), (min-width: 768px) and (max-width: 833px) calc(100vw), (min-width: 834px) and (max-width: 1023px) calc(100vw), (min-width: 1024px) and (max-width: 1365px) 100vw, (min-width: 1366px) and (max-width: 1919px) 100vw, (min-width: 1920px) 100vw"
     srcset="./img/dalyan-beach-turkey-1364201301_350.jpg 350w,./img/dalyan-beach-turkey-1364201301_760.jpg 760w,./img/dalyan-beach-turkey-1364201301_980.jpg 980w,./img/dalyan-beach-turkey-1364201301_1200.jpg 1200w,./img/dalyan-beach-turkey-1364201301_1520.jpg 1520w,./img/dalyan-beach-turkey-1364201301_1960.jpg 1960w,./img/dalyan-beach-turkey-1364201301_2560.jpg 2560w,./img/dalyan-beach-turkey-1364201301_3840.jpg 3840w"
     src="./img/dalyan-beach-turkey-1364201301.jpg" width="3840" height="2560"
     style="object-fit: cover; aspect-ratio: 16 / 9; width: 100%; height: auto"
     alt="Vacation time">

问题分析 #

1. sizes属性冗余且忽略设备像素比（DPR）：所有断点均设置为100vw，但移动端设备普遍DPR为2或3，比如464px视口下，实际需要的图片宽度为464 * 2 = 928px，现有srcset中350w、760w均无法满足，浏览器会自动选择980w的图，导致Lighthouse判定图片尺寸超出实际需求。
2. srcset规格匹配度不足：现有规格的间隔不合理，未覆盖移动端高DPR场景的核心需求。

解决方案 #

1. 简化sizes属性 #

由于所有场景下图片均占满视口宽度，直接简化为：

sizes="100vw"

2. 优化srcset规格（两种思路） #

思路一：精细化覆盖多场景

针对不同DPR和视口调整规格，确保每个场景都有最匹配的图片：

srcset="./img/dalyan-beach-turkey-1364201301_640.jpg 640w,
        ./img/dalyan-beach-turkey-1364201301_960.jpg 960w,
        ./img/dalyan-beach-turkey-1364201301_1280.jpg 1280w,
        ./img/dalyan-beach-turkey-1364201301_1920.jpg 1920w,
        ./img/dalyan-beach-turkey-1364201301_2560.jpg 2560w"

• 640w：适配320px视口（DPR2）
• 960w：适配480px视口（DPR2）
• 1280w：适配640px视口（DPR2）或1280px视口（DPR1）
• 1920w：适配960px视口（DPR2）或1920px视口（DPR1）
• 2560w：适配1280px视口（DPR2）

思路二：参考Adobe极简方案

仅保留两个核心规格，覆盖绝大多数场景：

srcset="./img/dalyan-beach-turkey-1364201301_750.jpg 750w,
        ./img/dalyan-beach-turkey-1364201301_2000.jpg 2000w"

• 750w：适配移动端375px视口（DPR2），满足绝大多数手机场景
• 2000w：适配桌面端1000px视口（DPR2）或2000px视口（DPR1），覆盖桌面端需求

3. 调整width/height属性 #

将width和height设置为图片的最大显示尺寸（而非原始图尺寸），帮助浏览器提前计算布局，同时不影响响应式效果：

width="2000" height="1125"

修改后完整示例（极简方案） #

<img class="image__img ng-star-inserted"
     sizes="100vw"
     srcset="./img/dalyan-beach-turkey-1364201301_750.jpg 750w,./img/dalyan-beach-turkey-1364201301_2000.jpg 2000w"
     src="./img/dalyan-beach-turkey-1364201301.jpg" width="2000" height="1125"
     style="object-fit: cover; aspect-ratio: 16 / 9; width: 100%; height: auto"
     alt="Vacation time">

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