gatsby-plugin-sharp defaultQuality not applied.

[VanDoornP]

Summary
I defined defaultQuality: 80 in gatsby-config.js, but when I view fluid image src-set in the frontend, it stubbornly remains at 50. What am I missing? It works when I define the quality in the GraphQL query.

Relevant information
Gatsby Config:

module.exports = {
  plugins: [
    'gatsby-plugin-react-helmet',
    {
      resolve: 'gatsby-source-filesystem',
      options: {
        name: 'images',
        path: `${__dirname}/src/images`,
      },
    },
    'gatsby-transformer-sharp',
    {
      resolve: 'gatsby-plugin-sharp',
      options: {
        useMozJpeg: false,
        stripMetadata: true,
        defaultQuality: 80,
      },
    },
    {
      resolve: 'gatsby-plugin-manifest',
      options: {
        name: 'gatsby-starter-default',
        short_name: 'starter',
        start_url: '/',
        background_color: '#663399',
        theme_color: '#663399',
        display: 'minimal-ui',
        icon: 'src/images/gatsby-icon.png', // This path is relative to the root of the site.
      },
    },
    {
      resolve: 'gatsby-source-contentful',
      options: {
        ...
      },
    },
    ...
  ],
};

Environment

  System:
    OS: Linux 4.15 Ubuntu 18.04.2 LTS (Bionic Beaver)
    CPU: (4) x64 Intel(R) Core(TM) i7-7500U CPU @ 2.70GHz
    Shell: 4.4.19 - /bin/bash
  Binaries:
    Node: 10.6.0 - ~/.nvm/versions/node/v10.6.0/bin/node
    Yarn: 1.12.3 - /usr/bin/yarn
    npm: 6.4.1 - ~/.nvm/versions/node/v10.6.0/bin/npm
  Languages:
    Python: 2.7.15 - /usr/bin/python
  Browsers:
    Chrome: 73.0.3683.86
    Firefox: 66.0.3
  npmPackages:
    gatsby: ^2.0.76 => 2.1.19 
    gatsby-image: ^2.0.41 => 2.0.41 
    gatsby-plugin-google-tagmanager: ^2.0.13 => 2.0.13 
    gatsby-plugin-manifest: ^2.0.9 => 2.0.20 
    gatsby-plugin-offline: ^2.0.16 => 2.0.24 
    gatsby-plugin-react-helmet: ^3.0.2 => 3.0.7 
    gatsby-plugin-sass: ^2.0.7 => 2.0.10 
    gatsby-plugin-sharp: ^2.0.35 => 2.0.35 
    gatsby-source-contentful: ^2.0.54 => 2.0.54 
    gatsby-source-filesystem: ^2.0.8 => 2.0.23 
    gatsby-transformer-sharp: ^2.1.18 => 2.1.18 
  npmGlobalPackages:
    gatsby-cli: 2.4.8

I hope someone can help me find the problem.

[sidharthachatterjee]

What image format are you seeing this with?

I just tried this out with a png image and it looks like the quality option is ignored and only works with jpeg and webp

gatsby/packages/gatsby-plugin-sharp/src/index.js

Line 178 in fe152d8

pipeline

[VanDoornP]

@sidharthachatterjee, thank you for your response.

I tested it out with both JPG and PNG files, but the quality stubbornly remains stuck at 50, regardless of file type. The URLs in the srcset keeps saying q=50, unless I declare the quality in the query.:

images {
  fluid(maxWidth: 500, maxHeight: 500, quality:80) {
    ...GatsbyContentfulFluid
  }
}

The above query works perfectly. The quality defined in the image URLs immediately changes to q=80. But we would prefer not having to declare the quality all over the place.

I also looked at the GatsbyContentfulFluid fragment, but that one doesn't declare quality either, so that's not the problem.

Unrelated, but still odd: The gatsby-plugin-sharp.options.pngCompressionSpeed setting is not passed to the image URL at all. Not sure why not.

[gatsbot]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.

If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!

As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contributefor more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜

[gatsbot]

Hey again!

It’s been 30 days since anything happened on this issue, so our friendly neighborhood robot (that’s me!) is going to close it.

Please keep in mind that I’m only a robot, so if I’ve closed this issue in error, I’m HUMAN_EMOTION_SORRY. Please feel free to reopen this issue or create a new one if you need anything else.

As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks again for being part of the Gatsby community!

[antoinerousseau]

I think it's because defaultQuality applies to images processed by sharp, not Contentful asset URLs.
It would be nice to have that defaultQuality option in the gatsby-source-contentful plugin options too.

[gatsbot]

Hey again!

It’s been 30 days since anything happened on this issue, so our friendly neighborhood robot (that’s me!) is going to close it.

Please keep in mind that I’m only a robot, so if I’ve closed this issue in error, I’m HUMAN_EMOTION_SORRY. Please feel free to reopen this issue or create a new one if you need anything else.

As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks again for being part of the Gatsby community!