Poor resize quality

[DavidVonAmri]

Hi,

We are trying out netvips in order to resize images for a web application but are experiencing issues with poor quality. I'm not sure if this is because of the large resizing done on the image or if its something else we are missing?

The attached image shows two versions, the left is resized using netvips and the right is resized using windows built in image editor. The original image size is 3642x3642 and is resized to 800x800 on both versions.

The netvips version has visible artifacts especially along the edge of the whole cap. Also the grip area on the cap looks pixilated compared to the right. The green gradient also have artifacts as does the shadow.

The code looks like this:

var image = Image.NewFromFile(imagePath, access: Access.Sequential).Autorot();

double scale = (double)targetWidth / image.Width;
var resized = image.Resize(scale, kernel: Kernel.Lanczos3).Sharpen();
var outputBytes = resized.WriteToBuffer(".webp");

return File(outputBytes, "image/webp");

Is there anything we can do in order to improve the result?

[kleisauke]

Are you able to provide the input image that allows someone else to reproduce this issue?

There are a few issues with the sample you provided:

• The Sharpen call shouldn't be necessary.
• Prefer using the static Image.Thumbnail* functions instead of Resize or ThumbnailImage, see:
  Image Resizing #97 (comment).
• Saving to lossy WebP can introduce compression artefacts. To avoid this, use either the lossless or nearLossless options. See the libvips documentation for Webpsave for details.

Here's a revised version of your code:

const int targetWidth = 800;
const string imagePath = "image.jpg";

using var thumb = Image.Thumbnail(imagePath, targetWidth);
thumb.Webpsave("thumbnail.webp", lossless: true);

[DavidVonAmri]

Thanks!

Yes, the original image is here.

I've tried your suggestion and indeed it looks a lot better now, even without Sharpen. Overall I'm happy with the result of this test but the right version still looks a tad more sharp, it's visible on the text "cosmetic mockups" primarily.

Cheers!

[kleisauke]

Hmm, it's hard to say which of the two images looks better to the naked eye. You could try performing the image shrinking in linear space, for example:

@@ -1,5 +1,5 @@
 const int targetWidth = 800;
 const string imagePath = "image.jpg";
 
-using var thumb = Image.Thumbnail(imagePath, targetWidth);
+using var thumb = Image.Thumbnail(imagePath, targetWidth, linear: true);
 thumb.Webpsave("thumbnail.webp", lossless: true);

Unfortunately, this conversion is not cheap and things like shrink-on-load, essential for good performance, do not support linear light. The libvips documentation explains this in more detail.