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

Created on 28 Oct 2017 · 3Comments · Source: gatsbyjs/gatsby

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?

documentation question or discussion

Source

dustinhorton

Most helpful comment

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

taktran on 9 Nov 2018

👍6

All 3 comments

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.

KyleAMathews on 28 Oct 2017

👍1

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,
            },
          },
        ],
      },
    },
  ],
}

dustinhorton on 28 Oct 2017

❤3 👍3

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

taktran on 9 Nov 2018

👍6

Was this page helpful?

0 / 5 - 0 ratings