为什么 Lighthouse 抱怨我的响应式图像大小调整？

Question

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">

所以我们有很多宽度：350、760、980、1200、1520、1960、2560、3848

但对于移动设备，lighthous 表示图像太大：

这是工作示例： https://szymon-pgl.github.io/image-size-test/

有人知道图像应该有多细吗？我在一些 Adobe 实现中看到，他们只使用 750 和 2000： https://github.com/adobe/aem-boilerplate/blob/5e7bd30bfb33b8b4681499766adb5ec281691026/scripts/aem.js#L293

Answer 1

此审核并不是抱怨您没有多种图像尺寸（您有！），而是抱怨 JPEG 文件在这些尺寸内不必要太大。

例如，760 图像 可以压缩为更优化的 JPEG，其中 TinyJPG 可以缩小 19%，而不会损失清晰度：