Client side resize bad aliasing depending on browser

[redemption]

Hello,

This is not so much a "bug" as trying to learn about something we observe and maybe understanding if there can be improvements.

We use client side resize in jquery upload to resize images to around 1200x825px height.

We've noticed that Firefox and Chrome have noticeably different image quality after resize, but both leave much more aliasing in angled lines than server side Imagick does with its default filters (Lanczos or Mitchell).

Is this something that can be improved somehow? Are some browsers better than others with client side resize, and what are they?

I took an image and uploaded with client side resize off, then with it "on" in Chrome and Firefox, and I cropped out a section from each sample to demonstrate the most obvious artifacts:

The angled line is the most obvious, but even if you look at the "psb speakers" logo you can clearly see the Imagic resize is cleaner than the other two, especially compared to Firefox which has the worst resize.

Is there any way to set the client side resize to use better or different resize algorithms?

[redemption]

I wanted to update this with more information that I gathered from more testing:

• It looks like the Javascript-Load-Image library uses imageSmoothingQuality at default value of "low". I did some testing of "medium" and "high" settings for imageSmoothingQuality and would like to propose that jQuery-File-Upload exposes imageSmoothingQuality in its configuration to give a bit more control over smoothing on resize. I've made a pull request with the example proposed change: https://github.com/blueimp/jQuery-File-Upload/pull/3722
• Firefox does not support imageSmoothingQuality, is there any chance that the Javascript-Load-Image library could be updated to use a JS based high quality downsampler for Firefox and Internet Explorer? eg https://stackoverflow.com/a/65448582/487899

[blueimp]

Thanks for your investigation @redemption and your pull request (which I have just merged). To answer your last question as well, I don't have plans to add a JS based downsampler for the JavaScript Load Image library at the moment, my aim is to rely on browser features as much as possible.