Hitting an exact file size when compressing images in the browser

Hitting the precise file size when compressing images in a browser is a challenge many websites face. Indian, South African, French, Canadian, and other portals each have their own maximum file size limits for uploaded photos, ranging from 50 KB to 10 MB. While these platforms don't compress files for users, they reject submissions that exceed the limit, requiring individuals to find a solution.

A typical smartphone photo ranges from 3 to 5 MB in size, so reducing it to, say, 50 KB requires significant compression. A naive approach would be to simply set a JPEG quality level, but this doesn't work well. JPEG quality is a quantization parameter and the output size depends on the image content like noise, texture, and detail, not the quality value itself. So, finding the right quality setting to achieve the target file size is not straightforward.

Binary search offers a solution. By encoding images repeatedly with different quality levels and checking if the output size matches the target, this method can efficiently narrow down the appropriate quality setting. A seven-round binary search narrows down the range of quality values to about 0.005, which is beyond human perception and takes less than a second on a phone.

The encoding process involves creating a canvas element, scaling it to fit the original image, drawing the image on the canvas, and then converting it to a blob (binary large object) with the desired quality. The initial canvas is filled with white to avoid black squares in the output JPEG due to the lack of an alpha channel in JPEG images. After encoding, dimensions of the canvas are set to zero to release the memory immediately.

If a single quality level isn't sufficient to reach the target file size, the algorithm then reduces the image resolution step by step while keeping the same quality level. This prioritizes quality over resolution, ensuring the image remains legible even at smaller sizes.