是错误的 <source> “尺寸”还是 GPSI/Lighthouse 检测响应图像尺寸的问题？答案

【问题标题】：Is it an issue with wrong <source> "sizes" or with GPSI/Lighthouse detecting responsive image sizes?是错误的 <source> “尺寸”还是 GPSI/Lighthouse 检测响应图像尺寸的问题？
【发布时间】：2020-06-28 04:11:37
【问题描述】：

使用以下代码提供响应式和优化的图像。

<picture>
<source type="image/webp"
sizes="(max-width: 793px) 100vw, 793px"
srcset="
https://www.example.com/img3/santa-cam-2020,w_200.webp 200w,
https://www.example.com/img3/santa-cam-2020,w_354.webp 354w,
https://www.example.com/img3/santa-cam-2020,w_475.webp 475w,
https://www.example.com/img3/santa-cam-2020,w_581.webp 581w,
https://www.example.com/img3/santa-cam-2020,w_793.webp 793w"
>

<source type="image/jpg"
sizes="(max-width: 793px) 100vw, 793px"
srcset="
https://www.example.com/img3/santa-cam-2020,w_200.jpg 200w,
https://www.example.com/img3/santa-cam-2020,w_354.jpg 354w,
https://www.example.com/img3/santa-cam-2020,w_475.jpg 475w,
https://www.example.com/img3/santa-cam-2020,w_581.jpg 581w,
https://www.example.com/img3/santa-cam-2020,w_793.jpg 793w"
>
<img src="https://www.example.com/img3/santa-cam-2020,w_793.jpg" alt="" >
</picture>

代码有效；基于以下资源；而且，似乎没有争议（？）： Mozilla: Responsive images web.dev: Serve responsive images

GPSI（移动测试）/Lighthouse 虽然说代码没有提供适当大小的图像。见截图。

++++++++++++

灯塔/GPSI 屏幕截图： ++++++++++++++

我玩过“sizes=”（最初由 Cloudinary 在提供 img 文件时提供）但无济于事。

我删除了 srcset 行（从最大文件宽度 793w 开始）。如果删除最后 2 行，GPSI 移动警告将消失。

还删除了 .webp 部分 (jic ;-)

我可以确认以不同的屏幕分辨率加载了适当大小的图像。我使用 Chrome DevTools 对此进行了测试。但是，必须先对浏览器缓存进行硬清除。

我在隐身模式下运行 Lighthouse 时遇到了相同的“正确大小的图像”问题。

我遗漏了什么或者 GPSI/Lighthouse 有什么问题？

【问题讨论】：

标签： image responsive-images lighthouse srcset

【解决方案1】：

不出所料，问题不在于 Lighthouse/GPSI。

我改了这行代码：

sizes="(max-width: 793px) 100vw, 793px"

到这里：

sizes="50vw"

仍然提供正确的图像（在 DevTools 中确认）并且不再有 GPSI/Lighthouse 警告。

我认为我对提供响应式图片的了解就这么多了！

【讨论】：