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

问题描述

我一直在努力将网站上的图像转换为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 =替代文字"></图片> 

在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屋！