1

Hello guys i have following problem. On my website a user have the ability to upload images. That images are gonna get resized because of size and space on disk etc.

I am using sharp to resize the image: https://www.npmjs.com/package/sharp

In my test, i uploaded a image ~3000x2000, it is getting resized to 600x600. I also resize it to 300x300 and 120x120. At 120x120 the image looks just blurr..

Here is the image, not resized. This image is 3000x2000 but is resized to ~600x600 with the browser:

enter image description here

And here is the image resized with Sharp to 600x600:

enter image description here

As you can see the image below has a lower quality. Why is that?

Here is the part that is resizing my image:

let resizeData = await sharp(dir + path)
    .resize({ width: 600, height: 600 })
    .toBuffer();

fs.writeFileSync(dir + path, resizeData);

Did i miss some configs? Is it possible to keep the quality?

Dave
  • 356
  • 2
  • 8
bill.gates
  • 14,145
  • 3
  • 19
  • 47

1 Answers1

2

The problem to me looks like one of compression quality. JPEG is a lossy format, which means that data is thrown out in order to get smaller file sizes. This introduces artifacts, which are imperfections in the image.

In the first image, an artifact that is 10x10 pixels may end up being less than a single pixel in size when it's downsized. In the second image, a 10x10 pixel artifact is much more noticeable because its actually 10x10 pixels on your screen.

Looking at the documentation there is a quality option:

options.quality integer 1-100 (optional, default 80)

You could try a quality setting of 90, or even 100, and that should give you a larger file size, but less noticeable compression artifacts.

You could also try PNG format which is a lossless format, meaning the pixels being displayed are not altered. However, the file size will be much larger.

Alex Wayne
  • 178,991
  • 47
  • 309
  • 337
  • I have tried it with 100%, still see small differnces. Tomorrow i am gonna try it with png – bill.gates May 05 '20 at 20:40
  • JPEG will always have artifacts, even at 100% quality. Just less of them. – Alex Wayne May 05 '20 at 20:43
  • i also found out why my 120x120 image is just blurr. i resize the image to 600x600 then i save it, and with the 600x600 i resize it to 300x300 now i lose the quality 2x. then i resize it from 300x300 to 120 and thats just 3x quality loss. – bill.gates May 06 '20 at 12:57