I have the following HTML:
<picture>
<source srcset="/images/product/foo.webp" type="image/webp">
<img src="/images/product/foo.jpg">
</picture>
When I use the Chrome developer tools to inspect the img, I can see it's not using the WebP image (the "Current source:" when you hover over it is the .jpg file, and lighthouse complains about the old image format).
However, the WebP file works just fine, and I can even see it when I hover over the <source> tag. Can anyone explain why Chrome seems to be ignoring the WebP source and using the .jpg one instead?
It turns out I was using the WebP version, but Chrome was giving misleading information. To figure out which image it actually was using I right-clicked on the image and selected "Copy Image Address".
By then pasting the URL (into the URL bar) I could see that it was in fact using the WebP image. It's strange though because other <picture> tags on the page do show that the WebP image is used in the developer tools ... there seems to be a bug in Chrome here.