Losing img quality in gatsby-image

[flavioalves]

Description

I'm using gatsby-image and I've been noticed that my generated png images have a very low quality.

Trying to figure out why it's happening I got that gatsby-plugin-sharp have in its quality parameter a default value in 50. So our images are losing 50% of quality in this process.

Would be very nice if we could set some sharp parameters as quality and compression levels through gatsby-image plugin. :-)

Seems that we couldn't control the compression quality by gatsby-image, you guys can help me in find one way to improve my image's quality and still using the gatsby-image facilities?

Image without gatsby-image:

Image with gatsby-image:

Environment

Gatsby version: 1.1.10
Node.js version: v6.10.3
Operating System: Mac OS X

[pieh]

You can set quality:

childImageSharp {
  sizes(quality: 90) {
    #your fragment or fields
  }
}

[flavioalves]

\o/ It works!!!

Thank you very much @pieh!!!

[ashadnasim52]

it works thanks

[moritzWa]

For some reason this property only worked for me when I used it in combination with the maxWidth prop like this:

fluid(maxWidth: 3080, quality: 100) {
              ...GatsbyImageSharpFluid
            }

I have that high width since I am using it as a background...

The full code can be found and run of the file at https://github.com/moritzWa/moritz-homepage/blob/master/src/pages/cookup.js

[F-Moody]

This works for me, but i have some images with text and the text gets a little blurry. When i browse into my generated images in the filesystem ( which i get from gatsby ) they have a good quality but when i use them with grapql query in this way i get blurry texts.

[nicco88]

I'm also having blurry images with quality set to 100, not sure what the issue is.

[F-Moody]

I'm also having blurry images with quality set to 100, not sure what the issue is.

My problem in this case was the width of the images, with fluid you can ask for a width, if the width is bigger than the image the image results stretched.

[nicco88]

I'm also having blurry images with quality set to 100, not sure what the issue is.

So, apparently I'm having the blurry image issue by using ...GatsbyImageSharpFluid_withWebp_tracedSVG, and I solved by removing _withWebp. But that means I no longer have webp.

[christianjosephvarriale]

I had the same issue and solution as @moritzWa, the quality of the .jpg images was not increased unless I also set the maxWidth prop as he outlined

[grgcnnr]

I'm also having blurry images with quality set to 100, not sure what the issue is.

So, apparently I'm having the blurry image issue by using ...GatsbyImageSharpFluid_withWebp_tracedSVG, and I solved by removing _withWebp. But that means I no longer have webp.

@nicco88

you can dial up the webP quality separately with webpQuality

            twox: fixed(width: 1416, quality: 80, webpQuality: 90) {
              src
              srcWebp
            }

[lezan]

I'm also having blurry images with quality set to 100, not sure what the issue is.

My problem in this case was the width of the images, with fluid you can ask for a width, if the width is bigger than the image the image results stretched.

I have the same issue but with different condition: I am using fluid and not fixed, with a maxWidth (1920, for example) setted. When window is around 1920px I can not see any kind of low quality, but if I try to reduce size of window image quality decrease dramatically (totaly blurry).

childImageSharp {
	fluid(maxWidth: 1920) {
		...GatsbyImageSharpFluid_withWebp
	}
}

If I try to switch to fixed instead of fluid and query for the same image with width: 1920 and heigth: 450, I see the same quality at all window size.

Any suggestion to overcome?

EDIT: using ...GatsbyImageSharpFluid instead of _withWebp is the same.

[jeffmiller00]

fwiw this is still happening to me too:
fluid(maxWidth: 600, maxHeight: 600, quality: 90, webpQuality: 90) { ...GatsbyImageSharpFluid_withWebp }

Clear in development, completely pixelized in production.

[AugustoTobi]

I've been dealing with this issue. I found that using the prop width inside a <StaticImage /> messes the resolution of the image. I'll explain with this example:
If i have an img element 100px wide i EXPECT that an picture with a resolution of 100px*100px would look fine. So i use the component
<StaticImage width={100} />
In theory this should work right? well... no. The image is 100px wide, but the element is actually bigget than that in real pixels.

This is the basis of an HD screen, each computed px is actually made by multiple real px. So back to the example, if the computed size of the element is 100px, then the real size is (hypothetically) 200px.

Then, using the width prop inside a StaticImage component will prevent gatsby from downloading images bigger than the value provided. So the element is 200px wide, the image is still 100px wide, thus the image looks low quality.

As a fix i decided to not use the width prop, and just control the size of the img with Css.