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

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?

Can you share the image url you’re using for these? What params are you adding?

<Image

_src_={product.imageUrl}

_alt_='Product image'

_className_='flex'

_width_={300}

_height_={300}

/>

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

_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)

}

By default, images are served at something like 70 or 80 percent quality. Try changing that to 100 to see if it fixes it.

where are you seeing this setting / prop?

Just on your

Image

component like this: