2

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?

machineghost
  • 33,529
  • 30
  • 159
  • 234

1 Answers1

0

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.

machineghost
  • 33,529
  • 30
  • 159
  • 234