2

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:

Danoz
  • 977
  • 13
  • 24
  • Are you sure it's not rendering? https://stackoverflow.com/a/30900438/5385381 – ksav Mar 31 '20 at 23:27
  • I can't answer your question but here is a hint how to narrow down the problem: Try using gatsby-image in a static query without MDX like in this tutorial: https://www.gatsbyjs.org/tutorial/gatsby-image-tutorial/#querying-data-for-a-single-image . That way you can determine that gatsby-image or MDX is causing the error. – EliteRaceElephant Mar 31 '20 at 23:27
  • 1
    @ksav , your suggestion is the right answer. – Danoz Apr 01 '20 at 01:13

2 Answers2

1

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.

ksav
  • 20,015
  • 6
  • 46
  • 66
Danoz
  • 977
  • 13
  • 24
  • 1
    Developer tools for the `picture` tag and `srcSet` are still quite frustrating. It's never been very obvious to me exactly which version is rendering. Glad you solved this! – ksav Apr 01 '20 at 01:20
0

If your gatsby project converts other extensions like png, jpg to Gatsby Image component and in place of Webp image rendering tag only this is the solution In case you are using gatsby-remark-copy-linked-files, this plugin by default copy all content to static folder only ignore defaults extensions [png, jpg, jpeg, bmp, tiff] , so we have pass 'webp' to gatsby-remark-copy-linked-files options to ignore this file.

ignoreFileExtensions: [`png`, `jpg`, `jpeg`, `bmp`, `tiff` ,`webp`],
Abdul Waqar
  • 9
  • 4