html - srcset hiDPI 图像的 Pagespeed 洞察惩罚

Question

我正在使用 srcset 在具有高像素密度的显示器上提供高分辨率图像，使用 srcset，就像这样；

<picture>
    <source srcset="/images/512x256.webp 512w, /images/1024x512.webp 2x, images/1536x1024.webp 3x" type="image/webp">
    <source srcset="/images/512x256.jpg" type="image/jpeg">
    <img src="/images/512x256.jpg" alt="Image">
</picture>

它工作得很好，但 Pagespeed 洞察力抱怨并告诉我应该为移动设备提供正确格式的图像。srcset 的想法是为浏览器提供更高分辨率的多个版本。当然，3x 图像是 1x 的 3 倍。我所做的只是为浏览器提供多个版本，因此它可以为具有高 DPI 的设备提供 hq 图像。浏览器可以根据设备和情况做出明智的决定并提供最佳图像。那么，为什么 Pagespeed 洞察会给予这种惩罚呢？

标签： htmlwebpsrcsetpagespeed-insights