image quality degraded when using .width property of the @sanity/image-url npm react package

[laurage]

Description of the bug

When using the code provided by @sanity/image-url npm package for react, giving a custom width to the image degrades it, even when the quality property is set to 100.

To Reproduce

Using
<img src={imageUrlFor(buildImageObj(projectNodes[0].mainImage)) .fit('min') .width(1170) .quality(100) .url()} alt={projectNodes[0].mainImage.alt} />
renders an image with a lowered quality (screenshot of the rendered image):

The quality property does work since using it with a parameter of 20 does degrade the quality, as expected:

Expected behavior

When resizing the same image with css instead, the image renders with a good quality (screenshot of the rendered image resized with css): (Look at the body text in white to see the difference more easily)

Original image:

Sanity version
@sanity/cli 0.147.3 (up to date)

Operating system
Mac OS High Sierra 10.13.6

Node.js / npm versions
6.4.1
v8.12.0

[Olezhka-web]

Hi there. I have the same problem with the image quality if I set the width (w) parameter. The quality parameter does not solve the problem in any way, even with a value of 100 - the image quality is very poor (especially at small widths). But I'm not generating the image urls via the @sanity/image-url package, so the problem is probably at a more global level. Or maybe I'm missing some nuance or I don't understand something.

[ObaidAshiq]

having the same issues while using the sanity/image-url , anyone with better options?

[henrybabbage]

try this library instead: https://github.com/coreyward/sanity-image

[LushawnDev]

Has there been any outcome or tip to resolve this?

The main reason I switched to Sanity was because I love the asset pipeline, but unfortunately I'm getting the same issue where despite having quality set to 100, my images are coming out very pixelated and low quality.

Similar to what @Olezhka-web, images seem to be even worse quality at small widths.

All my images are being shrunk to a smaller width using the asset pipeline, and then are rendered at an even smaller width, so there shouldn't be any pixelating.

Thanks so much for any help!

[SachinthaI]

Hi! Anyone found a solution for this. I'm having the same issue.

[LushawnDev]

I've not used Sanity since then, but plan on picking it up again for an upcoming project. I will post on here if I find any new behaviour or fixes.

[LushawnDev]

Following up, I still get the same behaviour after coming back to Sanity.

Is there no comment on this from the Sanity team? I just want to know if this is a common issue or I'm doing something wrong...

Thanks for any help or input.

[Kritsi]

I had the same problem but i set dpr to 2, and that solved the problem for me. The images gets increased in size, but at least they don't look blurry. Hope this helps 😊 https://www.sanity.io/docs/image-urls#dpr-d2055ee879ac