Slow

[jacobg]

This library has a very nice specific purpose with a convenient function signature.

However, some feedback in comparing its speed to blueimp-load-image is that browser-image-compression is much slower, e.g., compressing a 6 MB png to 2 MB takes less than a second with blueimp-load-image, whereas it takes around 10 seconds with browser-image-compression.

For reference here is the code in blueimp-load-image to compress to a specific size:

  const image = await loadImage(file, { orientation: true })

  // We reduce by an extra 10%, because for some reason the theoretical compression factor
  // is still a little too high. Maybe there's overhead?
  const compressFactor = Math.sqrt(maxFileSize / file.size) * .9
  const canvas = await loadImage.scale(image.image, {
    maxWidth: image.originalWidth! * compressFactor,
    maxHeight: image.originalHeight! * compressFactor,
    canvas: true })

  return await new Promise<File>(resolve => {
    canvas.toBlob(
      blob => resolve(new File([blob!], file.name, { type: file.type })),
      file.type
    )
  })

[qkreltms]

I'm wondering have you tried useWebWorker: true ?

[uberubert]

I noticed a 2.6MB png took ca 5 seconds to load. I tried setting useWebWorker: false and useWebWorker: true. Both cases resulted in the same ~5 second timespan. The only real difference was how the browser was frozen with useWebWorker: false

Measured using console.time('loadImage') before running loadImage() and console.timeEnd('loadImage') after the result is ready.

[IndieHobDev]

It turns out that you need to use both options maxSizeMB and maxWidthOrHeight for the compression to work super fast. 11 MB images were taking close to 8-12 seconds for me, but since adding both options the compression per image takes less than 1 second.
Try it :-)