1

I am working on a Gatsby site and sourcing my content from Sanity.io. Some of the images I am getting back from the Sanity.io CDN are of a significantly reduced quality when compared to images that I source through my own file system. I think it has something to do with an incorrect image size being set but I cannot figure out why it is setting this image incorrectly. I am attempting to render both of these elements using gatsby-image.

A screenshot of the images loaded next to each other:

image quality comparison

My graphQL query:

const HEADER_QUERY = graphql`
  query HeaderQuery {
    HeaderImages: sanityHomepageSettings {
      heroOverlayImage {
        asset {
          fluid(maxWidth: 300) {
            ...GatsbySanityImageFluid
          }
        }
      }
    }
    LocalHeaderImages: file(relativePath: {eq: "happy.png"}) {
      childImageSharp {
        fluid(maxWidth: 300) {
          ...GatsbyImageSharpFluid
        }
      }
    }
  }
`

Where I am rendering both of these images:

<div style={{backgroundColor: 'white', width: '100%'}}>
  <Img fluid={data.HeaderImages.heroOverlayImage.asset.fluid} />
  <Img fluid={data.LocalHeaderImages.childImageSharp.fluid} />
</div>

When I inspect the image elements in my devtools I can see that the currentSrc for the image coming from sanity is as follows:

https://cdn.sanity.io/images/<environment-removed>/production/<long-name-removed>-275x132.png?w=150&h=72&fit=crop&fm=webp

It looks like an improperly sized image is being set here because the width and height are ~50% of the original image. As you can see from the string above, w=150&h=72 appear to be sizing the image.

Lastly, I am getting the following warning in my console when starting up my Gatsby environment:

warn: The type `SanityImageAsset` does not explicitly define the field `childImageSharp`. On types with the `@dontInfer` directive, or with the `infer` extension set to `false`, automatically

Is there something a did incorrectly here or is there something I am missing as part of my setup? As a note, I have purged and reinstalled my node modules, public, and cache folders.

Matthew Nelson
  • 55
  • 2
  • 6
  • 1
    Can we maybe cut down on the number of things to debug here? It seems like Sanity is returning the image at the requested width just fine. We don't need the local query in here confusing matters, and let's get clarity on what we're providing the browser before interrogating the `currentSrc` to find which image was actually loaded/requested. With that said: 1) What comes back from the `HeaderImages` query? 2) Is the full `srcSet` being rendered to the `img` DOM element as expected? – coreyward May 27 '20 at 22:25
  • @Matthew Nelson - unrelated - how were you able to query `ChildImageSharp` in your gatsby? I'm also getting images from Sanity CDN, but don't see ChildImageCharp as an option when I query `edges/nodes/`. I did install the lib and added the plugin for gatsby-image, but no dice. Thanks! – Null isTrue Dec 18 '20 at 19:08

1 Answers1

0

Just increase the value of maxwidth like this:

fluid(maxWidth: 300)

in your GraphQL query.

Saeid Amini
  • 1,313
  • 5
  • 16
  • 26
Chigozie Ezechukwu
  • 1