πŸ‘€ See Sanity in action: Watch product demo now β†’

GatsbySanityImageFluid Results in Low Resolution Image

6 replies
Last updated: Apr 15, 2020
I'm pulling down a big image file with ...GatsbySanityImageFluid but it's showing up in pretty low resolution

image {
  asset {
    fluid(maxWidth: 2000) {
      ...GatsbySanityImageFluid
    }
  }
}
It looks like a proper size image is being sent over the wire but it's not actually being displayed

&lt;img sizes="(max-width: 2000px) 100vw, 2000px" srcset="<https://cdn.sanity.io/images/6vy4jhfn/production/15243ac50200b5b85db669e2da43eb46bc686d2c-1500x893.jpg?w=500&amp;h=298&amp;fit=crop> 500w,
<https://cdn.sanity.io/images/6vy4jhfn/production/15243ac50200b5b85db669e2da43eb46bc686d2c-1500x893.jpg?w=1000&amp;h=595&amp;fit=crop> 1000w" src="<https://cdn.sanity.io/images/6vy4jhfn/production/15243ac50200b5b85db669e2da43eb46bc686d2c-1500x893.jpg?w=2000&amp;h=1191&amp;fit=crop>" alt="" loading="lazy" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; object-fit: cover; object-position: center center; opacity: 1; transition: opacity 500ms ease 0s;"&gt;
Here's the image

&lt;Img
  fluid={image.asset.fluid}
  className="mb-3 border rounded-sm"
  style={{ height: "50vh" }}
/&gt;
Apr 15, 2020, 10:26 AM
Try adding a quality parameter like this
Apr 15, 2020, 11:05 AM
Thanks – so far I've only used GatsbySanityImageFluid and am seeing some issues
How did you get GatsbyImageSharpFluid working?
Apr 15, 2020, 12:50 PM
quality
itself isn't recognised on the standard Sanity
asset.fluid
Apr 15, 2020, 12:51 PM
Ah sorry, thought you were using GatsbyImageSharpFluid.
Apr 15, 2020, 1:22 PM
No worries, will just use
image-url
and hope it gets added to GatsbySanity
Apr 15, 2020, 1:26 PM
Adding my support for the ability to add a quality parameter to
gatsby-image
on this issue: https://github.com/sanity-io/gatsby-source-sanity/issues/62
Apr 15, 2020, 1:29 PM

Sanity.io – build remarkable experiences at scale

Sanity is a customizable solution that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Categorized in