How I Compress Images to an Exact File Size in the Browser
Exam portals, job applications and government forms love strict upload limits: "Photo must be under 20KB." "Signature: max 50KB." A photo straight from a phone is usually 2–4MB, so people end up re-saving the same picture in an editor again and again until it finally passes. I wanted a tool where you type the target size and get a file that fits on the first try. It runs fully in the browser, so…
Exam portals, job applications, and government forms often impose strict upload limits. A photo taken directly from a phone is typically 2-4MB, so individuals frequently edit the same image repeatedly until it meets the desired file size. To provide a tool that allows users to input a target size and receive a fitting file, I developed a browser-based solution that compresses images to an exact file size without requiring additional software.
This article outlines the method used, its limitations, and the challenges encountered during development.
JPEG compression traditionally relies on a quality slider ranging from 0 to 1. Lowering the quality usually results in smaller file sizes; however, the relationship between quality and file size is not linear. Dropping quality from 0.9 to 0.8 may yield significant reductions, whereas decreasing from 0.4 to 0.3 produces minimal changes.
Stepping down quality by fixed increments is inefficient, as it either wastes encoding efforts or fails to reach the desired file size. Additionally, certain file sizes cannot be achieved through quality adjustments alone. For instance, a 4000 × 3000 image cannot be compressed below 20KB regardless of quality settings.
To address these issues, the algorithm employs two loops: a binary search on quality and an outer loop that reduces pixel dimensions when quality proves insufficient. The process begins by decoding and drawing the image asynchronously. The createImageBitmap function respects EXIF orientation, ensuring phone photos display correctly. A white background is applied to transparent PNG signatures, preventing them from appearing black in JPEG format.
Subsequently, a binary search on quality is performed to find the optimal compression level. Initial quality bounds are set between 0.1 and 0.95. The algorithm iteratively adjusts quality values, encoding the image and checking if the resulting file size meets the target requirements. If the smallest quality setting fails to produce a file below the maximum allowed size, the algorithm returns null, indicating that quality adjustments are insufficient.
Otherwise, it continues to refine both quality and resolution until the ideal balance between image quality and file size is achieved.
Written by urgent.news from Dev.to's reporting — not their text. Machine-written — may contain errors; check the original before relying on it.
