Cropped image size is larger than the original image size.

[xemedo]

Minimal Reproduction

I want to crop the attached image using the image cropper. The original image has a size of 5.5KB. However, the resulting base64 of the cropped and minified image (also attached) has a size of 8KB. How is it possible that the cropped image size (150x150) is larger than the original's image (900x600) size.

Ways to reproduce: I used https://stackblitz.com/angular/vbbxkpkndnq?file=app%2Fimage-cropper-example-01.component.ts for this test.

I changed

  myConfig: ImgCropperConfig = {
    // autoCrop: true,
    width: 150, // Default `250`
    height: 150, // Default `200`
    fill: '#ff2997', // Default transparent if type = png else #000
    type: 'image/png' // Or you can also use `image/jpeg`
  };

to

  myConfig: ImgCropperConfig = {
    // autoCrop: true,
    width: 150, // Default `250`
    height: 150, // Default `200`
    fill: '#ff2997', // Default transparent if type = png else #000
    type: 'image/jpeg' // Or you can also use `image/jpeg`
  };

I uploaded the attached originalImage.jpg, clicked on "crop" and copied the resulting base64 code of the cropped image into the txt file. I converted the base64 code via https://onlinejpgtools.com/convert-base64-to-jpg and downloaded the cropped jpeg.

Original image:

Cropped image:

Base64 code: croppedbase64.txt

[Enlcxx]

@xemedo With the given example it is expected that the size of the cropped image will be less, however, that did not happen xD.

So converting from Canvas to image does not optimize the result, but a little optimization can be done by setting the quality when cropping the image (not yet implemented).

But there are other options so that the resulting image is the most optimized. You can use sharp, use data from ImgCropperEvent to crop images on server side.