Setting 'imageForceResize' and 'imageQuality' options greatly increases file size in a certain situation

[guag]

I'm using the following options to compress & resize images on the client side:

imageForceResize: true disableImageResize: false imageQuality: 0.5 imageMaxWidth: xxxx imageMaxHeight: xxxx

This works perfectly for images that are above either the max width or max height. But for images that are under the max width/height requirements, this actually seems to make the file size bigger. For example, one image I tried increased in size from 2.5MB to over 3.5MB. For other images that were actually scaled down, sizes went from 5MB -> 700KB, etc.

So my question is, am I doing something wrong? Or is image compression (without changing the image dimensions) not supported?

[guag]

Also, this is happening in Chrome. Admittedly, I haven't had a chance to try this on other browsers yet (on my phone right now). Could this be a browser issue?

[blueimp]

Yes, this might be a browser issue. The actual image scaling and conversion to the output format is all done by the browser engine.

[guag]

After further investigation, it's actually doing this for PNG images (regardless of whether the dimensions are greater than or less than the specified max, and for all browsers). Which makes sense, since PNG can't be compressed as far as I know. So I'll just convert them to JPEG upon add.

[blueimp]

PNG files also support compression. You can set the imageQuality option to configure the output compression factor. The value is passed as quality option to canvas.toBlob().

[guag]

Ah, so it probably is a browser issue after all. I am setting the "imageQuality" option, but it seems to be ignored for PNGs. When I set the "imageType" option to "image/jpeg", the compression works perfectly. Interestingly enough, "image/jpg" (without the 'e') does not seem to work.