search

Donaldcwl / browser-image-compression

Image compression in web browser
MIT License
1.3k stars 160 forks source link

Compressed/Resized image does not preserve quality #73

Closed taltime closed 4 years ago

taltime commented 4 years ago

Using the following config:

const options = {
  maxSizeMB: 1,      
  maxWidthOrHeight: 300,
  useWebWorker: true
}

And uploading any large size image, 2mb, 5mb, etc. It scales it down to 300x300 or similar. However the resulting quality is substantially decreased.

It happens in the demo link as well https://donaldcwl.github.io/browser-image-compression/example/basic.html .

Is it as intended or its a bug?

brycedewitt commented 4 years ago

Given that you have provided maxWidthOrHeight=300, that is the intended functionality of this package. A 300x300 image simply does not have enough pixels to display the same density of information as a 1-2mb image of higher resolution.

If you only wish to downscale the total file size of your images, simply increase the maxWidthOrHeight parameter.

const options = {
  maxSizeMB: 1,      
  maxWidthOrHeight: 4096
  useWebWorker: true
}
taltime commented 4 years ago

I tried the same 300x300 or other resolutions using MS point resize and look at the results:

MSPaint resize: https://ibb.co/72gQX3Z

Browser-image-compression: https://ibb.co/Pcd8cxy

These are the same sizes but look at the heavily pixelated in the browser. So its not just there aren't enough pixels as the size is the same. Any clue if its a bug? Or how to get better results?

Donaldcwl commented 4 years ago

The library will reduce the image quality iteratively to meet the maxSizeMB. The compression algorithm in the browser is different from MSPaint. In your situation, it is expected behavior.