Gatsby: [gatsby-remark-images] Adjust image quality?

[dustinhorton]

Is there an ability to configure image quality within gatsby-remark-images? I'm using UI screenshots in Markdown, and the compression is so heavy-handed that there's considerable artifacting.

Looking at the source, I think it might be controlled via gatsby-plugin-sharp?. README there mentions:

For JPEGs it generates progressive images with a default quality level of 50.

If this is in fact what's setting the quality, this seems like a sensible default, but is too low for my purposes.

Additionally, is there a reason the options aren't exposed in the README? Would PRs adding these to the various READMEs be of interest?

[KyleAMathews]

Yeah, you can pass in a quality key w/ a number from 0-100 to override the default quality of 50. But yeah, documenting this and others would be great! My hope has been that we pick a standard way to document/validate plugin options so that documentation can be automatically generated from this. If this somewhat larger task of investigating this sounds like something you want to tackle, that'd be a huge benefit to the ecosystem.

[dustinhorton]

Thanks! That worked great. Not sure how to start that larger task (will put some thought into it), but will take a pass at some documentation updates for sure.

For anyone following along, here's where you need to define that key:

module.exports = {
  plugins: [
    {
      resolve: 'gatsby-transformer-remark',
      options: {
        plugins: [
          {
            resolve: 'gatsby-remark-images',
            options: {
              quality: 80,
            },
          },
        ],
      },
    },
  ],
}

[taktran]

This worked for me in the graphql too:

graphql`
{
    allImageSharp {
      edges {
        node {
          ... on ImageSharp {
            fluid(quality: 100, maxWidth: 1600) {
              src
              srcSet
              originalImg
              originalName
              aspectRatio
              sizes
            }
          }
        }
      }
    }
}
`

From https://github.com/gatsbyjs/gatsby/issues/3984#issuecomment-364799710