An upload form that accepts only a small image is asking for several things at once: a supported file format, acceptable dimensions, a maximum byte count, and a picture that is still readable. Optimizing only one of those can produce a file that looks successful in a preview but fails at the destination.
I maintain FitToKB, a browser image utility for this workflow. Here is the engineering model behind the problem, including the cases where an honest tool should report that it cannot meet the requested target.
Start with bytes, not the displayed KB label
Write the acceptance condition explicitly: output.size <= targetBytes. A rounded label such as “100 KB” is not sufficient to prove a file meets a limit. A destination might interpret KB as 1,000 bytes or use 1,024-byte units. When the destination documents an exact byte limit, use that limit. Otherwise leave a little headroom and inspect the exported file.
This is a maximum-size problem. Padding a file to make its size exactly match a label does not improve the image and may make it incompatible with a strict uploader.
Quality and dimensions are separate controls
For JPEG or WebP, a useful strategy is to encode at candidate quality values and inspect the resulting blob sizes. FitToKB's implementation uses a bounded quality search. If no suitable result fits, it can try smaller dimensions when resizing is allowed.
The encoder's quality number is not a percentage of the source file size. A quality setting of 0.5 does not mean that the output will be half the input size. Image detail, dimensions, format and encoder behavior all matter.
A search over encoder quality is a practical heuristic, not proof of a globally optimal result. Measure every candidate and retain an actual result that satisfies the bound; do not infer success from the requested quality alone.
Treat fixed dimensions as a real constraint
Suppose an application requires a 600 × 600 image below a specified byte limit. A smaller 300 × 300 export may satisfy the byte limit while still failing the application.
The UI should distinguish two intentions:
- Preserve the required dimensions and report when the target cannot be reached.
- Permit smaller dimensions to meet the file-size limit.
FitToKB exposes dimension locking in its compression options. The result also carries the actual width, height, byte count and whether the requested size target was met. Those values matter more than an optimistic success message.
PNG needs a different explanation
In this canvas-based implementation, PNG compression does not use the lossy quality search. Reducing dimensions is one available way to reduce its output size. Other PNG encoders can use additional optimization strategies, but changing a JPEG-style quality slider is not a general solution.
Switching to JPEG can reduce size for some images, but removes transparency. WebP may retain transparency, but the destination must accept it. Format conversion should be explicit, and the resulting format should be shown before download.
A useful test matrix
Use synthetic or licensed sample images and check the downloaded output, including cases that fail:
| Input or constraint | What to inspect |
|---|---|
| Detailed photograph | Actual byte size and visible artifacts |
| Transparent logo | Alpha preservation, or the chosen background |
| Small text or signature | Legibility after resizing and compression |
| Fixed width and height | Exported dimensions, not just preview size |
| Impossibly small target | Clear failure state rather than a false success |
| Large source image | Memory use and successful browser encoding |
The important product decision is what to do when constraints conflict. A useful image tool makes that conflict visible and lets the user choose which constraint can change.
If you build upload forms, show the accepted formats, required dimensions and byte limit together. It saves users repeated attempts and gives image utilities a precise target to work toward.
Disclosure: I maintain FitToKB. This article was prepared with AI assistance from a review of its compression implementation; it does not report a cross-browser benchmark.
Top comments (0)