Chrome only displaying some images as 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?

回答1:

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

来源：https://stackoverflow.com/questions/59626879/chrome-only-displaying-some-images-as-webp