đź‘‹ Next.js Conf 2024: Come build, party, run, and connect with us! See all events

Issue with low-resolution images in Sanity and Next.js

5 replies
Last updated: Nov 29, 2023
Hello,
I'm new to Sanity but I have started using it on an e-commerce website I am creating. So far I have Products in Sanity which include several pictures of my products.

The issue I have is that when I try to display them the image quality is really poor/low resolution. I've searched Google for answers but can't find anything concrete to help.

I am using React/Next.js and the images are being displayed using {Image} from 'next/image'

Any ideas?
Nov 28, 2023, 5:14 PM
Can you share the image url you’re using for these? What params are you adding?
Nov 28, 2023, 7:01 PM
<Image

_src_={product.imageUrl}

_alt_='Product image'

_className_='flex'

_width_={300}

_height_={300}
/&gt;

Then I'm importing ImageBuilder from sanity/image-url


_import_ ImageUrlBuilder _from_ '@sanity/image-url'

_import_ { createClient } _from_ 'next-sanity'


_export_ const client = createClient({
projectId: 'my id',
dataset: 'production',
apiVersion: '2022-03-25',
useCdn: true
})

const builder = ImageUrlBuilder(client)


_export_ function urlFor(source: any) {

_return_ builder.image(source)
}
Nov 29, 2023, 12:04 AM
By default, images are served at something like 70 or 80 percent quality. Try changing that to 100 to see if it fixes it.
Nov 29, 2023, 4:58 PM
user M
where are you seeing this setting / prop?
Nov 29, 2023, 8:03 PM
Just on your
Image
component like this:
<Image
  src={product.imageUrl}
  width={300}
  height={300}
  className='flex'
  alt='Product Image'
  quality={100}
/>
Nov 29, 2023, 10:26 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?