Why doesn't browser load webp images? (gatsby site, page generated from mdx)

user_4347889 0
Viewed 689

I'm wondering if anyone can please help me determine why webp images are not rendered when viewing my gatsby site in the browser?

i'm using gatsby-plugin-mdx and gatsby-remark-images with option withWebp: true

With this setup, the resulting output source that is sent to the browser looks (roughly) like this...

<picture>
  <source srcset-"/static/11aaa2b.../a12bc/example-image-1.webp ... etc... snipped
  <source srcset-"/static/33ccc4d.../a12bc/example-image-1.jpg ... etc... snipped
  <img src="/static/33ccc4d.../a12bc/example-image-1.jpg ... etc... snipped
</picture>

However, the browser is only rendering the <img> version, i.e. the jpg.

I can see that the webp file is there.

I have also confirmed that the webp version is accessible (i.e. I can navigate specifically to the webp file...

Why isn't the browser rendering the webp version?

Thanks in advance for your time/thoughts on this to help me understand it.

I have searched for, but haven't yet found, an answer using the following:

webp gatsby
1 Answers

Answered by @ksav in comments above.

Turns out, the browser actually is serving the webp version of the image.

By using this method to inspect the element properties and looking at the currentSrc property, I can confirm that webp is actively used.

The issue was with how I was previously inspecting.

I was relying on what Chrome Developer Tools was highlighting in the Elements window. In that highlighted area, it looked like it was the <img> tag that was being rendered.

But now, on closer inspection of the properties (now that I'm aware of how to use it properly) I can see that all is ok.

Thank you @ksav for the suggestion. This answers the question.

user_43478890
Related