Join our next Developer Virtual Meetup – Live Q&A, Project Showcase, Swag raffle, and more πŸ”₯

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="<> 500w,
<> 1000w" src="<>" 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:
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?