Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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_

Issue Analytics

State:
Created 2 years ago
Reactions:5
Comments:6 (1 by maintainers)

Top GitHub Comments

1reaction

axe312gercommented, Oct 21, 2021

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

0reactions

jhowsickcommented, Aug 6, 2022

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! 😃

Top Results From Across the Web

gatsby-source-contentful

The base host for all the API requests, by default it's 'cdn.contentful.com' , if you want to use the Preview API set it...

gatsby-image | Yarn - Package Manager

Fast, reliable, and secure dependency management.

Gatsby Changelog | 5.3.0

After updating gatsby-plugin-image and gatsby-plugin-sharp , you should see a considerate amount of time saved during image processing as two improvements ...

Error: Cannot find module 'gatsby-plugin-image/graphql-utils'

The README for gatsby-source-contentful has a section that ... You might also need to add gatsby-plugin-sharp , as it mentions in the docs, ......

React Hooks Handbook - Gatsby Plugin Image - Design+Code

Use gatsby-plugin-image for automatic image resizing, formatting, ... values don't respect the original image's aspect ratio, the image will be cropped, ...