[gatsby-plugin-image] Defaults for formats are being ignored

[kelvindecosta]

Description

As mentioned in these pull requests (/pull/29147, /pull/29564), defaults for gatsby-plugin-image can be set as follows:

gatsby-config.js

// ...
[
  // ...
  {
    resolve: "gatsby-plugin-sharp",
    options: {
      defaults: {
        formats: ["avif", "webp"],
        quality: 80,
        placeholder: "none",
      },
    },
  },
  "gatsby-transformer-sharp",
  "gatsby-plugin-image",
  // ...
]
// ...

The defaults for formats are being ignored.

Reproduction

Follow the steps below or refer to this reproduction on CodeSandbox:

• Start with gatsby-starter-default.

• yarn add gatsby-plugin-image

• gatsby-config.js

  plugins: [
      `gatsby-plugin-react-helmet`,
      resolve: `gatsby-source-filesystem`,
      options: {
          name: `images`,
          path: `${__dirname}/src/images`,
      }
      },
  +    {
  +      resolve: "gatsby-plugin-sharp",
  +      options: {
  +        defaults: {
  +          formats: ["avif", "webp"],
  +          quality: 80,
  +          placeholder: "none"
  +        }
  +      }
      },
      `gatsby-transformer-sharp`,
  -    `gatsby-plugin-sharp`,
  +    `gatsby-plugin-image`,

• src/components/image.js

  @@ -1,6 +1,6 @@
   import React from "react"
   import { useStaticQuery, graphql } from "gatsby"
  -import Img from "gatsby-image"
  +import { GatsbyImage, getImage } from "gatsby-plugin-image"
  
  @@ -18,19 +18,15 @@
       query {
         placeholderImage: file(relativePath: { eq: "gatsby-astronaut.png" }) {
           childImageSharp {
  -          fluid(maxWidth: 300) {
  -            ...GatsbyImageSharpFluid
  -          }
  +          gatsbyImageData(width: 128, height: 128, layout: FIXED)
           }
         }
       }
     `)
  
  -  if (!data?.placeholderImage?.childImageSharp?.fluid) {
  -    return <div>Picture not found</div>
  -  }
  +  const image = getImage(data.placeholderImage)
  
  -  return <Img fluid={data.placeholderImage.childImageSharp.fluid} />
  +  return <GatsbyImage {...{ image }} alt="placeholder" />

Behaviors

Expected

The formats provided in the defaults (which is ["avif", "webp"]) should be used by the GatsbyImage and / or StaticImage components.

Actual

On inspecting the generated HTML with Dev Tools, the <picture> tag doesn't have an image with AVIF format.
It seems that the plugin default formats (which is ["auto", "webp"]) is used instead.

When explicitly setting the formats to ["avif", "webp"] from graphql query, the <picture> tag has an image with AVIF format.

Environment

gatsby info on CodeSandbox

  System:
    OS: Linux 5.4 Debian GNU/Linux 10 (buster) 10 (buster)
    CPU: (12) x64 Intel(R) Core(TM) i7-8700 CPU @ 3.20GHz
    Shell: 5.0.3 - /bin/bash
  Binaries:
    Node: 10.23.0 - /usr/local/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 6.14.8 - /usr/local/bin/npm
  Languages:
    Python: 2.7.16 - /usr/bin/python
  npmPackages:
    gatsby: ^2.32.8 => 2.32.8
    gatsby-image: ^2.11.0 => 2.11.0
    gatsby-plugin-gatsby-cloud: ^1.0.2 => 1.0.2
    gatsby-plugin-image: ^0.7.2 => 0.7.2
    gatsby-plugin-manifest: ^2.12.1 => 2.12.1
    gatsby-plugin-offline: ^3.10.2 => 3.10.2
    gatsby-plugin-react-helmet: ^3.10.0 => 3.10.0
    gatsby-plugin-sharp: ^2.14.3 => 2.14.3
    gatsby-source-filesystem: ^2.11.1 => 2.11.1
    gatsby-transformer-sharp: ^2.12.0 => 2.12.0