Gatsby: Add an option to configure default image quality for ImageSharp queries

[kripod]

Currently, the default quality of ImageSharp-generated images are too low for most of the projects I participate in. I would like to configure a global default for ImageSharp query parameters, because it may become tedious to always specify quality: 92 in every single image query.

Issue #3837 is related, but it's about specifying a default locale for Moment.js date queries.

[pieh]

If anyone is interested in doing this - this could be done by adding optional config paramater to gatsby-transformer-sharp and using it instead of default 50 in https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-transformer-sharp/src/extend-node-type.js

[kripod]

Also, I think it would be a good idea to adjust that default value to a higher one (e.g. 92, like ImageMagick does so: _"The default is to use the estimated quality of your input image if it can be determined, otherwise 92."_)

[KyleAMathews]

50 quality is often recommended as a good default as it's good enough quality while providing significant size savings. I agree that providing a way to override it globally for a project makes sense.

[KyleAMathews]

ImageMagick has many other uses other than generating thumbnails for the web so its default isn't necessarily what you'd want for the web.

[kripod]

@KyleAMathews Sounds fair, thank you for the explanation!

[gricard]

If no one else is working on this then I'll snag it for Hacktoberfest. :)

[gricard]

To be clear here, before I start in on the code, the goal is to be able to have an optional parameter for this plugin, like how gatsby-transformer-screenshot has this one:

// in your gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: `gatsby-transformer-screenshot`,
      options: {
        nodeTypes: [`StartersYaml`, `WhateverType`],
      },
    },
  ],
}

Right? So, in this case the config would be:

// in your gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: `gatsby-transformer-sharp`,
      options: {
        quality: 92,
      },
    },
  ],
}

[DSchau]

@gricard exactly! For some additional context, I _started_ on this but never finished, so that's probably as good a starting point as any!

https://github.com/gatsbyjs/gatsby/pull/7548

Definitely check out the comments for how we can make this more globally applicable.

[gricard]

Cool. Thanks!

[gricard]

I'm super sorry, but I've been real busy with other stuff and traveling for work and never ended up having time to work on this. If anyone else wants to take it, go for it. Otherwise I'll see if I can get to it soon. :(

[SheldonNunes]

I am happy to pick this one up :)

[SheldonNunes]

I was looking to use the Cache util like so const Cache = require('gatsby/src/utils/cache') from the gatsby project. It doesn't look like any other plugins use it explicitly. I am wanting to use it to store the defaultQuality value so it can be more globally applicable. Is this a correct use of it or should I use another caching mechanism?

Otherwise would implementing a gatsby-transformer-sharp-quality plugin that can hold that quality option be more appropriate?

[justinformentin]

I could be completely wrong, so hopefully someone will add to this post.

gatsby-remark-images has a quality option, so why not look to emulate what that plugin's doing? If you go to the index file, there's nothing about quality anywhere.

https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-remark-images/src/index.js

But you'll notice const { fluid } = require(gatsby-plugin-sharp) So if we go to the plugin-sharp's index, you'll see the default quality: 50 under const generalArgs.

https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-plugin-sharp/src/index.js

So, I'm not sure what needs to be done to connect it all together to get the same thing in transformer-sharp, but hopefully I'm on the right track.

Also, for what it's worth, I think a separate plugin just to set the default quality is overkill.

That being said, I don't have knowledge of the inner workings of transformer-sharp or the cache util, so I could be totally wrong.

[gatsbot[bot]]

Old issues will be closed after 30 days of inactivity. This issue has been quiet for 20 days and is being marked as stale. Reply here or add the label "not stale" to keep this issue open!