Search code examples
javascriptnode.jssharp

Losing image quality after resizing it

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?

Solution

  • 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.