Gatsby: Images webp doesn't work

[Steffi3rd]

My images .webp doesn't work.

How to fix .webp please ? Or not to using it, prefering .png

Thanks

Description

My images .webp doesn't work on Chrome/Safari.

Steps to reproduce

Nothing

Expected result

.webp should be status 200 instead 404.

Actual result

.webp has status 404.

Environment

  System:
    OS: macOS 10.14.3
    CPU: (8) x64 Intel(R) Core(TM) i5-8259U CPU @ 2.30GHz
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 10.16.0 - /usr/local/opt/node@10/bin/node
    Yarn: 1.16.0 - /usr/local/bin/yarn
    npm: 6.9.0 - /usr/local/opt/node@10/bin/npm
  Languages:
    Python: 2.7.10 - /usr/bin/python
  Browsers:
    Chrome: 75.0.3770.100
    Firefox: 67.0.4
    Safari: 12.0.3
  npmPackages:
    gatsby: ^2.0.24 => 2.10.4 
    gatsby-cli: ^2.4.5 => 2.7.2 
    gatsby-image: ^2.0.15 => 2.0.29 
    gatsby-plugin-lodash: ^3.0.1 => 3.0.3 
    gatsby-plugin-manifest: ^2.0.5 => 2.0.14 
    gatsby-plugin-netlify: ^2.1.0 => 2.1.0 
    gatsby-plugin-offline: ^2.0.6 => 2.0.22 
    gatsby-plugin-react-helmet: ^3.0.0 => 3.0.5 
    gatsby-plugin-sharp: ^2.0.13 => 2.0.18 
    gatsby-plugin-sitemap: ^2.0.1 => 2.0.4 
    gatsby-plugin-styled-components: ^3.0.1 => 3.0.4 
    gatsby-source-prismic: ^2.0.0 => 2.2.0 
    gatsby-transformer-sharp: ^2.1.4 => 2.1.12 
  npmGlobalPackages:
    gatsby-cli: 2.4.8

[lannonbr]

So I am not sure what is breaking with Chrome on your end, but I loaded the page and the webp files are loading in properly.

As well, Safari doesn't support webp yet as shown by the page on caniuse

[lannonbr]

@Steffi3rd So yes that particular image is not working for some reason as seen here:

Would you be able to either share the codebase or make a reproduction of this?

[Steffi3rd]

Yes indeed, It doesn't work.

All "Fluid" images seems doesn't work...

I don't understand why.

[lannonbr]

I'm not sure why either, but with this, would you be able to share the repo for this site? If not, be able to make a site that is similar to this that reproduces the bug?

[Steffi3rd]

I think I have an idea.

The buggy images are only .webp and .tiff. I don't know why...
Everything else (png, jpg, gif) are okay.

[scandeezy]

I seem to be experiencing an issue that sounds like this, so I'd be interested in knowing if you discovered anything @Steffi3rd . I'm more than okay with finding out I've done something wrong if it gets me moving forward.

We have a few .webp images on the page, and they don't seem to generate a request now. I'm not getting a 404 in the chrome network tab, which makes be believe the resource isn't being requested for some reason.

[jimmed]

I've reproduced this when attempting to build my gatsby site; locally the webP images are generated just fine, but on our CI service (with a node:lts-alpine base docker image), this fails silently. All other formats in use (png, jpg, svg) are generated as expected.

[alexlee-dev]

Same. .webp images are failing silently.

[lewislbr]

I fixed that by deleting the .cache folder before building.

[craftedsystems]

Same here. Deleting .cache folder solved it.