๐Ÿ”ฎ Sanity Create is here. Writing is reinvented. Try now, no developer setup

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) {
It looks like a proper size image is being sent over the wire but it's not actually being displayed

<img sizes="(max-width: 2000px) 100vw, 2000px" srcset="<https://cdn.sanity.io/images/6vy4jhfn/production/15243ac50200b5b85db669e2da43eb46bc686d2c-1500x893.jpg?w=500&h=298&fit=crop> 500w,
<https://cdn.sanity.io/images/6vy4jhfn/production/15243ac50200b5b85db669e2da43eb46bc686d2c-1500x893.jpg?w=1000&h=595&fit=crop> 1000w" src="<https://cdn.sanity.io/images/6vy4jhfn/production/15243ac50200b5b85db669e2da43eb46bc686d2c-1500x893.jpg?w=2000&h=1191&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;">
Here's the image

  className="mb-3 border rounded-sm"
  style={{ height: "50vh" }}
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
itself isn't recognised on the standard Sanity
Apr 15, 2020, 12:51 PM
Ah sorry, thought you were using GatsbyImageSharpFluid.
Apr 15, 2020, 1:22 PM
No worries, will just use
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
on this issue: https://github.com/sanity-io/gatsby-source-sanity/issues/62
Apr 15, 2020, 1:29 PM

Sanityโ€“ build remarkable experiences at scale

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

Was this answer helpful?