Resizing results in low quality/blurry image

crypto-design-club commented 3 months ago

Possible bug

Resizing images produces low-quality/blurry images. I tried using different downsizing kernels but the results were consistently bad.

FYI I'm getting to this code looking through the Strapi upload plugin code and https://github.com/nicolashmln/strapi-plugin-responsive-image, but it also happens when I try to resize an image standalone with the code sample provided below.

Is this a possible bug in a feature of sharp, unrelated to installation?

[x] Running npm install sharp completes without error.
[x] Running node -e "require('sharp')" completes without error.

If you cannot confirm both of these, please open an installation issue instead.

Are you using the latest version of sharp?

[x] I am using the latest version of sharp as reported by npm view sharp dist-tags.latest.

If you cannot confirm this, please upgrade to the latest version and try again before opening an issue.

If you are using another package which depends on a version of sharp that is not the latest, please open an issue against that package instead.

What is the output of running `npx envinfo --binaries --system --npmPackages=sharp --npmGlobalPackages=sharp`?

System: OS: macOS 14.5 CPU: (8) arm64 Apple M3 Memory: 934.55 MB / 24.00 GB Shell: 5.9 - /bin/zsh Binaries: Node: 22.4.1 - /opt/homebrew/bin/node Yarn: 1.22.22 - /opt/homebrew/bin/yarn npm: 10.8.1 - /opt/homebrew/bin/npm bun: 1.1.18 - ~/.bun/bin/bun npmPackages: sharp: ^0.33.4 => 0.33.4

Does this problem relate to file caching?

The default behaviour of libvips is to cache input files, which can lead to EBUSY or EPERM errors on Windows. Use sharp.cache(false) to switch this feature off.

[x] Adding sharp.cache(false) does not fix this problem.

Does this problem relate to images appearing to have been rotated by 90 degrees?

Images that contain EXIF Orientation metadata are not auto-oriented. By default, EXIF metadata is removed.

To auto-orient pixel values use the parameter-less rotate() operation.
To retain EXIF Orientation use keepExif().
[x] Using rotate() or keepExif() does not fix this problem.

What are the steps to reproduce?

Copy the code sample below into a .js file
Create a folder images and place the test image there, call it test.jpeg
Created a folder processed_images
Run with node yourfile.js
Compare the output image with the input, the quality is way lower now

What is the expected behaviour?

The output image quality should be about equal than the input, since it only does resizing.

Please provide a minimal, standalone code sample, without other dependencies, that demonstrates this problem

const sharp = require('sharp')
const fs = require('fs')
const path = require('path')

const writeStreamToFile = (stream, path) =>
  new Promise((resolve, reject) => {
    const writeStream = fs.createWriteStream(path);
    // Reject promise if there is an error with the provided stream
    stream.on("error", reject);
    stream.pipe(writeStream);
    writeStream.on("close", resolve);
    writeStream.on("error", reject);
  });

const resize = async () => {
  const fileStream = fs.createReadStream(path.join(__dirname, 'images', 'test.jpeg'))
  const filePath = 'processed_images/test.jpeg'
  const sharpInstance = sharp()
  sharpInstance.resize({
    width: 1000,
  });
  await writeStreamToFile(fileStream.pipe(sharpInstance), filePath);
}

resize()

Please provide sample image(s) that help explain this problem

here

lovell commented 3 months ago

If you want JPEG output, which is always lossy, the quality parameter provides control over this.

https://sharp.pixelplumbing.com/api-output#jpeg

const sharpInstance = sharp()
  .resize({
    width: 1000,
  })
  .jpeg({
    quality: 100,
  })

The sample image provided is a screenshot and would probably be better served using a lossless image format such as PNG.

crypto-design-club commented 3 months ago

@lovell Thanks for coming back so quickly!

I had a try with .jpeg({ quality: 100 }) and it didn't go much better.

Then I tried to follow your advice and converted the image into a PNG and ran my script again, but still no luck:

const sharpInstance = sharp()
  .resize({
    width: 1000,
  })
  .png({
    quality: 100, // I tried without this setting too, just resize({ width: 1000 })
  })

Please find the PNG image here, the original seems quite sharp to me, but the output unfortunately not when viewed in its proper size (1000px wide) in Mac Preview or in my Chrome.

I don't know how this library works internally but I guess it is because there is quite a lot of small text?

lovell commented 3 months ago

If you want small, light text on a dark background to "pop" more, perhaps try adding sharpen to your pipeline.

crypto-design-club commented 3 months ago

@lovell I tried adding sharpen to it, but didn't really help. It's not so much about making the text pop more vs. the whole image being blurry after resizing...

I tried adding sharpen without parameters and with some variation (give by GPT):

  const sharpInstance = sharp()
  sharpInstance.resize({
    width: 1000,
    kernel: 'lanczos3',
    withoutEnlargement: true,
  })
  .sharpen({
    sigma: 1,
    m1: 1,
    m2: 2,
    x1: 0,
    y2: 1.5,
    y3: 2
  })
  .png({
    quality: 100,
    compressionLevel: 9,
    adaptiveFiltering: true,
  })

Unfortunately, nothing I try seems to make a big difference... If it's of any help I'm using CleanShot X now taking screenshots and they appear really sharp in a much greater resolution. Not sure what to try next to resize this properly, seems like I might have to use a different resizing tool and only do the image conversion with sharp then. Any guidance here would be appreciated as I assumed resizing to be a standard operation and to work out of the box for many different screenshots I intend to upload on my CMS.

crypto-design-club commented 3 months ago

Closing this one, it's not a sharp issue, I couldn't get this resized with other tools either. Downsizing screenshots containing fonts seems to be a general issue, so closing it here.

mertalev commented 3 months ago

This post might help with finding the right resizing kernel for the job. Sharp doesn't support as many as ImageMagick, so ImageMagick might be better for this.

There is also Magic Kernel Sharp, which looks very promising.

lovell / sharp