Chrome 仅将某些图像显示为 webp答案

【问题标题】：Chrome only displaying some images as webpChrome 仅将某些图像显示为 webp
【发布时间】：2020-04-24 20:51:31
【问题描述】：

我一直致力于将我网站上的图像转换为 Webp 以提高性能。

通常我使用以下 HTML 来显示它们：

<picture>
    <source srcset="/img/about/image.webp" type="image/webp">
    <source srcset="/img/about/image.jpg" type="image/jpeg">
    <img src="/img/about/image.jpg" alt="alt text">
</picture>

使用 Chrome 的开发工具和 pagespeed insights 中的 Lighthouse 审核功能，我一直被告知，尽管 Webp 格式的图像可用，但图像可以以下一代格式提供。

此问题仅出现在某些图像上 - 其他图像使用 webp 版本。我对此的测试只是将鼠标悬停在开发工具中的img 标签src 上：

相关页面使用 Algolia 的 InstantsearchJS 在显示结果之前获取结果。这与使用与上述相同的 HTML 来输出图像的其他页面不同，这可能是问题的原因（尽管我不明白为什么）。

Chrome 会选择为页面上的部分而不是所有图像呈现 Webp 是否有任何明显的原因？

【问题讨论】：

标签： google-chrome algolia webp instantsearch.js

【解决方案1】：

这是否是解决方案，我无法判断，但在应用程序和 Chrome 中的大量缓存清除之后，我在网站上保存（更新）了一条记录（一篇博客文章）。这会触发对 Algolia 的调用以更新记录，神奇的是，所有图像现在都被报告为显示为 webp...

【讨论】：