Gatsby: 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:
```graphql
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.