4

I'm using node.js and sharp to resize images that my users upload. They are always blurry. I have no idea why. Here is my code:

var sharp = require("sharp");

sharp(file.path)
    .resize(width, height).max()
    .toFormat('png')
    .toBuffer(next);
    ...

Resized image is blurry. What am I missing?

By the way, I'm resizing larger images down to a smaller size. The width and height are proportional to the original size. For example, if the original dimension were 600x300, then the width and height are, for example, 300x150. So, it's definitely not an issue with miscalculating the width and height. I've also tried the same thing using imageMagick and had the same issues. I always get a resized image, but it's very blurry.

joeygrimes
  • 137
  • 2
  • 12
  • Are you scaling down by more than half? If you are, work in steps to half the size of the image until you're close to the final size, then perform a final step to complete your work. – teppic Sep 15 '17 at 01:23
  • Thanks for the suggestion. I just did this and the images are still blurry, although they are less blurry than before. – joeygrimes Sep 15 '17 at 04:01
  • Don't resize repeatedly. Sharp and IM already use a high-quality adaptive downsizer (lanczos3) --- repeated downsizing will reduce quality and be slower. – jcupitt Sep 15 '17 at 06:43
  • 1
    Can you give an example of bad output? If you just want your downsized image to "pop" a bit, try adding an extra `.sharpen()` step to the end of your pipeline: http://sharp.dimens.io/en/stable/api-operation/#sharpen – jcupitt Sep 15 '17 at 06:46

1 Answers1

0

With ImageMagick I found that using filter: "Catrom" https://www.npmjs.com/package/gulp-image-resize/v/0.13.1 and sharpen: "-1.5x1+0.7+0.02" http://www.imagemagick.org/Usage/resize/#resize_unsharp works quite well when downsizing an image.

Wilson Walker
  • 31
  • 1
  • 7