It was almost too easy to resize an image in the browser. I tested a few images and there were some issues with clarity and fidelity that I wanted to address that often occurred when drastically reducing the size of the source image. After a lengthy search, I came across a stack overflow post about high quality downscaling in the browser. Like any good dev, I snagged the code and adapted it for my use. I made a few modifications to handle the alpha channel for png and refactored it to be more intelligible.
Breaking down the algorithm:
-
Start with the original image dimensions and the target dimensions. Calculate the scale factor needed to reach the target size.
-
Scale Factor Calculation: The scale factor is calculated as the maximum of: a. The ratio of target width to current width b. The ratio of target height to current height c. The scale factor is generally 0.5 but I made it variable.
See derivv source for implementation details.
The downside of this solution is it is memory and compute intensive. I noticed that UI would freeze when processing images. After looking into various solutions I landed on using web workers, which I’ll go over in the next article.
Previous: Make it Fast using Web Workers
Next: Make it Tolerable using Web Workers