Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
kelvindecosta opened this issue Feb 27, 2021 · 1 comment
Closed

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

kelvindecosta opened this issue Feb 27, 2021 · 1 comment
Labels
type: bug An issue or pull request relating to a bug in Gatsby

Comments

@kelvindecosta
Copy link
Contributor

kelvindecosta commented Feb 27, 2021

Description

As mentioned in these pull requests (#29147, #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
@kelvindecosta kelvindecosta added the type: bug An issue or pull request relating to a bug in Gatsby label Feb 27, 2021
@gatsbot gatsbot bot added the status: triage needed Issue or pull request that need to be triaged and assigned to a reviewer label Feb 27, 2021
@LekoArts LekoArts removed the status: triage needed Issue or pull request that need to be triaged and assigned to a reviewer label Mar 1, 2021
@LekoArts
Copy link
Contributor

LekoArts commented Mar 1, 2021

Hi! Please direct this feedback to here: #27950
Thanks!

@LekoArts LekoArts closed this as completed Mar 1, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
type: bug An issue or pull request relating to a bug in Gatsby
Projects
None yet
Development

No branches or pull requests

2 participants