gatsby-source-contentful should respect the defaults of gatsby-plugin-image

[axe312ger]

The plugin should respect the configured default values of gatsby-plugin-image:

https://www.gatsbyjs.com/plugins/gatsby-plugin-image/#customizing-the-default-options

@njbmartin reported:

I'm seeing an issue with placeholder being set to 'dominantColor' and ignoring defaults set in gatsby-plugin-sharp:

    {
      resolve: `gatsby-plugin-sharp`,
      options: {
        defaults: {
          formats: [`auto`, `webp`],
          placeholder: `blurred`,
          backgroundColor: `transparent`,
        },
      },
    },

I'm querying images from contentful (ie. not downloaded locally) without any params:

narrowImage {
    gatsbyImageData
}

Which returns an image with a background color set:

{
    "image": {
        "images": {
            "sources": [
                {
                    "srcSet": "//images.ctfassets.net/t51bs9y4c70l/5yd9mrc7voT4tQc8cEZcKV/7c2b672d9f6862c58764ffdb24be211a/us-vs-them.jpg?w=225&h=225&q=50&fm=webp 225w,\n//images.ctfassets.net/t51bs9y4c70l/5yd9mrc7voT4tQc8cEZcKV/7c2b672d9f6862c58764ffdb24be211a/us-vs-them.jpg?w=450&h=450&q=50&fm=webp 450w,\n//images.ctfassets.net/t51bs9y4c70l/5yd9mrc7voT4tQc8cEZcKV/7c2b672d9f6862c58764ffdb24be211a/us-vs-them.jpg?w=900&h=900&q=50&fm=webp 900w",
                    "sizes": "(min-width: 900px) 900px, 100vw",
                    "type": "image/webp"
                }
            ],
            "fallback": {
                "src": "//images.ctfassets.net/t51bs9y4c70l/5yd9mrc7voT4tQc8cEZcKV/7c2b672d9f6862c58764ffdb24be211a/us-vs-them.jpg?w=900&h=900&fl=progressive&q=50&fm=jpg",
                "srcSet": "//images.ctfassets.net/t51bs9y4c70l/5yd9mrc7voT4tQc8cEZcKV/7c2b672d9f6862c58764ffdb24be211a/us-vs-them.jpg?w=225&h=225&fl=progressive&q=50&fm=jpg 225w,\n//images.ctfassets.net/t51bs9y4c70l/5yd9mrc7voT4tQc8cEZcKV/7c2b672d9f6862c58764ffdb24be211a/us-vs-them.jpg?w=450&h=450&fl=progressive&q=50&fm=jpg 450w,\n//images.ctfassets.net/t51bs9y4c70l/5yd9mrc7voT4tQc8cEZcKV/7c2b672d9f6862c58764ffdb24be211a/us-vs-them.jpg?w=900&h=900&fl=progressive&q=50&fm=jpg 900w",
                "sizes": "(min-width: 900px) 900px, 100vw"
            }
        },
        "layout": "constrained",
        "backgroundColor": "#f8f8f8",
        "width": 900,
        "height": 900
    }
}

Originally posted by @njbmartin in https://github.com/gatsbyjs/gatsby/issues/30408#issuecomment-858146640

[jdahdah]

This is also the case with locally downloaded files. I haven't tested all combinations, but it's definitely happening with the following setup. Leaving in the query options in case they make a difference.

gatsby-config.js:

{
  resolve: "gatsby-plugin-sharp",
  options: {
    defaults: {
      placeholder: "blurred",
    },
  },
},
{
  resolve: `gatsby-source-contentful`,
  options: {
    downloadLocal: true,
    ...
  },
},

query:

logo {
  localFile {
    childImageSharp {
      gatsbyImageData(
        height: 60
        transformOptions: { grayscale: true }
        layout: FIXED
      )
    }
  }
}

The resulting placeholder has a dominantColor backgroundColor instead of being blurred. When I add placeholder: BLURRED to the query options, it works as expected in combination with the other options.

[zremboldt]

Our team is having the same issue as well. I see the Gatsby team is looking into this here: https://github.com/gatsbyjs/gatsby/projects/24#card-62857250. Thank you!

[graysonhicks]

Hi @axe312ger ! I am seeing examples of this error when trying to update a site to v3. I have set the sharp settings to use blurred, but as this PR notes, that is not used by the plugin. Will this PR alleviate that? Thanks!

[axe312ger]

@graysonhicks yes, this is exactly what it tries to solve. Hope to get in merged into asap :)

[serenematt-babbel]

Isn't this fixed with https://github.com/gatsbyjs/gatsby/pull/33536?

[jhowsick]

Yeah the documentation is Poor ;)

I found out that you need to add defaultQuality to the root of your gatsby-plugin-sharp options options.defaultQuality. This way the images are downloaded losslessly. The default is [50-75] which is why the queries return poor results no matter the quality set in options.defaults.

There seems to be another processing step that occurs when downloading the images per downloadLocal. The options.defaults are ignored and only the other root options parameters are used.

You can verify that the downloaded images are Lossless by setting the options.defaultQuality: 100 and then comparing the files that are downloaded / generated in public/static to the ones you have uploaded in Contentful.

I hope this helps anyone scratching their head wondering what the fish! :)

[bebe84]

Is this fixed? I updated my site to Gatsby v3 + converted to gatsby-plugin-image but still default options for placeholder are ignored.

[axe312ger]

Fix was published in https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-source-contentful/CHANGELOG.md#7140-2022-06-07

If you still have issues using that or later versions, please open a new ticket.