Chrome 仅将某些图像显示为 webp [英] Chrome only displaying some images as webp

问题描述

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

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

<图片><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="替代文字"></图片>

在 Chrome 的开发工具和

有问题的页面在显示之前使用 Algolia 的 InstantsearchJS 获取结果.这与使用与上述相同的 HTML 输出图像的其他页面不同，这可能是问题的原因(虽然我不明白为什么).

Chrome 选择为页面上的部分而非所有图像呈现 Webp 有什么明显的原因吗?

解决方案

这是否是解决方案，我不知道，但在应用程序和 Chrome 中清除了大量缓存后，我保存(更新)了一个在网站上记录(博客文章).这会触发对 Algolia 的调用以更新记录，神奇的是，所有图像现在都被报告为显示为 webp...

I've been working on converting images on my website to Webp to improve performance.

Typically I'm using the following HTML to display them:

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

Using the Lighthouse auditing feature in Chrome's Dev Tools and in the pagespeed insights I keep getting told that image could be served in next-gen formats despite the Webp format images being available.

This issue occurs only on some of the images - other are using the webp version. My test for this is simply to hover over the img tag src in Dev Tools:

The page in question uses Algolia's InstantsearchJS to fetch results before displaying them. This differs from the other pages that use the same HTML as above to out images and could possibly be the reason for the issue (although I can't see why).

Is there any obvious reason why Chrome would choose to render Webp for some but not all images on a page?

解决方案

Whether or not this was the solution, I can't tell but after a lot of cache clearing in the application and in Chrome, I saved (updated) a record (a blog post) on the site. This triggers a call to Algolia to update the record and magically, all the images are now being reported as displaying as webp...

这篇关于Chrome 仅将某些图像显示为 webp的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！