gatsby-image: WebP image sources do not generate PNG fallback

Description

Using a WebP image, only .webp files are generated.

Steps to reproduce

const Image = () => {
  const data = useStaticQuery(graphql`
    query {
      placeholderImage: file(relativePath: { eq: "sample.webp" }) {
        childImageSharp {
          fluid(maxWidth: 300) {
            ...GatsbyImageSharpFluid_withWebp
          }
        }
      }
    }
  `);

  return <Img fluid={data.placeholderImage.childImageSharp.fluid} />;
};

How to Make a Minimal Reproduction: https://www.gatsbyjs.org/contributing/how-to-make-a-reproducible-test-case/

Expected result

A fallback type should be generated, ideally PNG since WebP supports transparency.

Actual result

Only WebP images are created.

Environment

Run gatsby info --clipboard in your project directory and paste the output here.

  System:
    OS: macOS 11.0
    CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 14.12.0 - /usr/local/bin/node
    npm: 6.14.8 - /usr/local/bin/npm
  Languages:
    Python: 2.7.16 - /usr/bin/python
  Browsers:
    Chrome: 85.0.4183.121
    Edge: 85.0.564.63
    Firefox: 80.0.1
    Safari: 14.0.1
  npmGlobalPackages:
    gatsby-cli: 2.12.101

[ascorbic]

@cpboyd I’m on it! https://github.com/gatsbyjs/gatsby/pull/27443

[cpboyd]

@ascorbic Should there perhaps be documentation added to https://www.gatsbyjs.com/docs/working-with-images/ in this regard?

Especially as there’s more prevalence of new image containers with better compression like WebP and HEIF? For example, iPhones now default to HEIF which has led to known issues with systems unprepared to handle that (e.g. SAT testing)

I still think Gatsby should, ideally, focus on being user-friendly with good defaults out of the box. Gatsby already provides default support for polyfills, so I’m not sure how a default preferring an image fallback to a format with good cross-browser support is any different from that.