适当大小的图像的 Lighthouse Pagespeed 问题答案

【问题标题】：Lighthouse Pagespeed issue with appropriately-sized images适当大小的图像的 Lighthouse Pagespeed 问题
【发布时间】：2021-09-03 21:44:14
【问题描述】：

我遇到了以前从未遇到过的 Lighthouse Pagespeed 问题，无法在我管理的任何其他网站上复制。

我收到的错误信息是：

提供大小合适的图片，以节省蜂窝数据并缩短加载时间。

Screenshot from Pagespeed Insights

这是其中一张图片的源代码（为便于阅读而格式化）：


<img
  width="300"
  height="300"
  class="attachment-woocommerce_thumbnail size-woocommerce_thumbnail"
  src="https://example.com/assets/c1-300x300.jpg"
  srcset="https://example.com/assets/c1-300x300.jpg 300w,
    https://example.com/assets/c1-600x599.jpg 600w,
    https://example.com/assets/c1-902x900.jpg 902w,
    https://example.com/assets/c1-100x100.jpg 100w,
    https://example.com/assets/c1.jpg 938w"
  sizes="(max-width: 300px) 100vw, 300px"
  alt=""
  loading="lazy"
/>

我发现一个长期关闭的 GitHub 问题解决了这种行为，其中开发人员回应说这是有意的，而 Lighthouse 故意使用 3.0 的设备像素比。这解释了为什么它选择三倍图像大小，但我仍然无法弄清楚我应该如何在代码中“修复”这个问题。

我已经尝试对图像进行进一步优化，但要么是无关紧要，要么是我没有进行足够的优化。

有没有人有同样的经历，或者至少能够在不同的网站上复制它？

找出原因（因为错误消息并没有真正说明任何内容）和解决方案会很棒。

【问题讨论】：

标签： pagespeed lighthouse pagespeed-insights

【解决方案1】：

好的，我已经找到原因了。我在想我的最小图像尺寸足够接近最小的必要图像尺寸（至少根据 Lighthouse），但是，无论是它还是它的值乘以 3 都不是。

因此，解决方案是找出 Lighthouse Pagespeed 用于移动测试的屏幕宽度，即 425 像素，然后提供专门针对该屏幕尺寸以及 2x 和 3x 版本的新图像尺寸。

【讨论】：

【解决方案2】：

我努力确保设备上加载了正确的图像。实际上，我发现这给了我更多的控制权，尤其是在与预加载响应图像结合使用时。例如，

<body>
  <picture>
    <source srcset="image-1200.jpg" media="(min-width: 992px)">
    <source srcset="image-800.jpg" media="(min-width: 768px)">
    <source srcset="image-500.jpg" media="(min-width: 0px)">
    <img src="image-500.jpg" height="300" width="500" class="img-responsive" loading="eager" alt="Blah">
  </picture>
 </body>

【讨论】：