优化浏览器侧图像大小

基于互联网上的代码，我正在浏览器端调整图像大小。我使用canvas，所以我从一些简单的调整大小中获得了一个新的png。

这就是我正在尝试的：

const MAX_SIZES = {
  thumbnail: {
    MAX_WIDTH: 200,
    MAX_HEIGHT: 160
  },
  small: {
    MAX_WIDTH: 400,
    MAX_HEIGHT: 300,
  },
  medium: {
    MAX_WIDTH: 800,
    MAX_HEIGHT: 600
  }
};
export const resize = (file, size) => {
return new Promise(function (resolve, reject) {
let _this = this;
const { MAX_WIDTH, MAX_HEIGHT } = MAX_SIZES[size];
let img = document.createElement("img");
let reader = new FileReader();
reader.onload = function(e) {
  img.src = e.target.result;
  let canvas = document.createElement("canvas");
  let ctx = canvas.getContext("2d");
  ctx.drawImage(img, 0, 0);
  let width = img.width;
  let height = img.height;
  if (width > height) {
    if (width > MAX_WIDTH) {
      height *= MAX_WIDTH / width;
      width = MAX_WIDTH;
    }
  } else {
    if (height > MAX_HEIGHT) {
      width *= MAX_HEIGHT / height;
      height = MAX_HEIGHT;
    }
  }
  canvas.width = width;
  canvas.height = height;
  ctx = canvas.getContext("2d");
  ctx.drawImage(img, 0, 0, width, height);
  resolve(dataURItoBlob(canvas.toDataURL("image/png")));
}
reader.readAsDataURL(file);

})；

}

所以我面临这些问题：

• 调整大小的过程非常缓慢
• 中型图像（800x600）的文件大小很大，有时甚至超过原始图像
• 一般来说，我会得到一张亮度/颜色增加的照片（这只是一种欣赏）

所以，我想知道我是否可以采取任何便宜的策略来改进我的调整大小的替代方案。我甚至会对任何PNG图像优化感兴趣，以避免大文件。