Images quality degraded when

[laurage]

trafficstars

Hello,

When using getFluidGatsbyImage from gatsby-source-sanity, the images returned are degraded.

Using const fluidProps = getFluidGatsbyImage(node.asset._ref, {maxWidth: 3000}, clientConfig.sanity) returns images with a lowered quality. The smaller the image, the worst the compression.

Expected behavior

When resizing the same image with css instead, the image renders with a good quality (screenshot of the rendered image resized with css):

Question Is there any way to enhance the quality of the images? What else can I do to remedy to this?

Sanity version @sanity/cli 0.147.3 (up to date)

[leevi978]

I too am having this problem. Any updates on this?

[jfgilmore]

I have noticed this too; there is a configuration in gatsby-config.(js|ts) that may help, I have it set to the following:

{
  resolve: `gatsby-plugin-sharp`,
  options: {
    defaults: {
      formats: [`auto`, `webp`],
      placeholder: `none`,
      quality: 50,
      breakpoints: [640, 800, 1200, 1920],
    },
  },
},

Increasing the quality value may help, but will also increase image file size and slow down your page loads (depends on the priority of your project, quality vs. speed).

[Hahlh]

@jfgilmore I don't think that images from Sanity ever go through sharp. They are served via the Sanity image pipeline as far as I understand.