Why Compressing an Image to Exactly 50KB Is Harder Than It Sounds

Ever wondered why one image hits 50KB at 80% quality while another is still 200KB at 20%? The answer isn’t your compression library — it’s how JPEG compression actually works. If you’ve ever tried building an “exact target size” image compressor, you’ve probably discovered this is a surprisingly hard optimization problem, not the one-line canvas.toBlob(quality) call it looks like from the outside.

Here’s what’s actually happening under the hood, and why “just lower the quality until it’s small enough” isn’t as simple as it sounds.

Quality Percentage and File Size Aren’t Linearly Related

JPEG’s “quality” setting doesn’t control file size directly — it controls the quantization table used during compression, which determines how aggressively high-frequency detail gets discarded. The relationship between quality and resulting file size depends entirely on the image content:

• A smooth gradient (sky, solid background) compresses extremely well at high quality — very little high-frequency detail to discard in the first place
• A busy, high-detail photo (foliage, fabric texture, crowd scene) can be 5–10x larger than a smooth image at the same quality setting

This means “quality 70” might produce a 15KB file for one image and a 180KB file for another. A tool that just applies a fixed quality value and calls it done will wildly miss a target size depending on what’s actually in the photo.

The relationship isn’t linear either — file size drops fast at first as quality decreases, then flattens out, because the most “compressible” redundancy gets squeezed out early and what’s left resists compression much harder:

Quality Typical size (busy photo) Typical size (smooth image) 100 ~2.1 MB ~180 KB 90 ~1.3 MB ~90 KB 80 ~900 KB ~55 KB 70 ~650 KB ~40 KB 60 ~520 KB ~32 KB 40 ~380 KB ~22 KB

(Illustrative shape of the curve, not measured output — the point is the curve flattens, not the exact numbers, which depend entirely on your specific image.)

That flattening is exactly why a naive “keep lowering quality until it’s small enough” loop can spin through a dozen iterations near the bottom of the range and barely move the needle — at which point the only lever left is dimensions, not quality.

Why You Can’t Just Binary-Search Quality Alone

The naive fix is: binary search the quality parameter until the output lands near your target size. This mostly works, but it breaks down at the edges:

• Some images can’t hit low targets at any quality setting without dropping resolution too — a 4000x3000px photo at quality 1 can still be well over 50KB, because dimension, not just quality, drives the byte count once compression is already near its floor
• JPEG quality below ~10-15 produces visible blocking artifacts that make the “successful” output useless even though it technically hit the target size
• PNG doesn’t have a quality slider at all — it’s lossless, so “compress to 50KB” means either reducing color depth (palette reduction) or reducing dimensions, an entirely different algorithm path than JPEG

A compressor that only tunes quality will either fail outright on some images, or “succeed” by producing something visibly broken.

What Actually Works: A Multi-Variable Search

A more robust approach searches across multiple parameters together, not quality alone:

1. Quality (for lossy formats) — the first lever, cheapest to adjust
2. Dimensions — downscaling before compressing is often more effective than cranking quality down further, especially for images that will be displayed small anyway (a signature, a thumbnail, an exam photo)
3. Chroma subsampling — reducing color resolution while keeping luminance detail (4:2:0 vs 4:4:4) can meaningfully cut size with minimal visible impact for photographic content
4. Format — for some content, switching from PNG to JPG or WebP entirely changes what’s achievable at a given size, which is worth checking before assuming a target is impossible

A binary search over quality alone, falling back to progressive downscaling when quality bottoms out before hitting the target, gets you close to the actual achievable minimum — without silently destroying the image or endlessly failing. The decision flow looks roughly like this:

 Original image
       │
       ▼
 Binary search quality (target ±5%)
       │
       ▼
 Target reached? ──yes──▶ Done
       │no
       ▼
 Quality bottomed out (~10-15)?
       │yes
       ▼
 Reduce dimensions, reset quality search
       │
       ▼
 Target reached? ──yes──▶ Done
       │no
       ▼
 Report achievable minimum (don't fake success)

Enter fullscreen mode Exit fullscreen mode

The Case Where It’s Genuinely Impossible

Some images cannot hit a small target size without visible quality loss, full stop — a detailed, high-resolution photo asked to compress to 20KB is going to look bad no matter what combination of parameters you try, because there’s a hard information-theoretic floor below which you’re discarding data the human eye will notice missing.

This is the part most tools get wrong: they either silently return a degraded image and call it a success, or they just fail with no explanation. The honest approach is to report the achievable minimum and let the user decide, rather than pretending the target was hit.

Example Results

(These reflect the kind of outcome this approach produces — verify against your own implementation’s actual output before publishing, and only call it “measured” if you’ve genuinely run these exact images through your compressor.)

Image type Resolution Original Target Final Iterations Portrait photo 4000×3000 3.8 MB 50 KB 49.8 KB 6 Signature scan 900×300 180 KB 20 KB 20.1 KB 2 Screenshot with text 1920×1080 1.1 MB 50 KB 64 KB Quality floor reached

The screenshot case is the interesting one — quality search bottomed out before reaching 50KB, because a text-heavy screenshot doesn’t have the same high-frequency redundancy a photo does. Going lower would’ve meant visible artifacts around the text, so the honest answer here is “closest achievable without damage,” not “target hit.”

How Format Choice Changes What’s Achievable

Before assuming a target is impossible, it’s worth checking whether a different format gets you there:

• JPEG — best general-purpose choice for photographic content; the format most compression tutorials assume by default
• PNG — no quality slider at all; hitting a small target means reducing color depth (palette/indexed color) or dimensions, a completely different code path than JPEG’s DCT-based approach
• WebP — typically 25–35% smaller than JPEG at comparable visual quality for photographic content, and supports both lossy and lossless modes; can still lose to PNG for flat-color graphics or images with sharp text edges
• AVIF — generally beats WebP on compression ratio for photographic content, sometimes significantly, but encoding is meaningfully slower — a real cost for client-side, in-browser compression where the user is waiting on the result, and browser support is less universal than WebP’s

For a target-size compressor specifically, this means the “impossible without visible quality loss” conclusion is format-dependent — a target unreachable in PNG might be trivial in WebP for the same image.

Doing This in the Browser

If you’re doing this client-side (Canvas API, no server round-trip), the mechanics are similar but with real constraints:

async function compressToTarget(file, targetKB, maxIterations = 8) {
  const img = await createImageBitmap(file);
  let quality = 0.8;
  let scale = 1.0;
  let low = 0.1, high = 1.0;

  for (let i = 0; i < maxIterations; i++) {
    const canvas = document.createElement('canvas');
    canvas.width = img.width * scale;
    canvas.height = img.height * scale;
    const ctx = canvas.getContext('2d');
    ctx.drawImage(img, 0, 0, canvas.width, canvas.height);

    const blob = await new Promise(resolve =>
      canvas.toBlob(resolve, 'image/jpeg', quality)
    );
    const sizeKB = blob.size / 1024;

    if (Math.abs(sizeKB - targetKB) < targetKB * 0.05) {
      return blob; // within 5% of target — good enough
    }

    if (sizeKB > targetKB) {
      high = quality;
      quality = (low + high) / 2;
    } else {
      low = quality;
      quality = (low + high) / 2;
    }

    // If quality search has bottomed out and we're still over target,
    // start reducing dimensions instead of pushing quality lower
    if (quality < 0.15 && sizeKB > targetKB) {
      scale *= 0.85;
      quality = 0.5;
      low = 0.1; high = 1.0;
    }
  }

  return null; // couldn't hit target without falling back to scale reduction
}

Enter fullscreen mode Exit fullscreen mode

The interesting engineering problem isn’t the binary search itself — it’s deciding when to stop trusting quality reduction and switch to dimension reduction instead, and knowing when to give up and report the honest floor rather than returning something technically-compressed-but-visually-broken.

Why This Matters Beyond Just Images

The same shape of problem shows up anywhere you’re targeting a byte budget instead of a quality parameter — video export for a size-limited platform, PDF compression for an email attachment cap, even audio encoding for a storage quota. The pattern is the same: single-variable search gets you most of the way, but the interesting failure modes live at the edges where the target genuinely isn’t achievable without a second variable (dimensions, bitrate, sample rate) coming into play.

I ran into these edge cases while building ResizeHub, a browser-based image compression tool with exact target-size support. The engineering challenge turned out to be much more about search strategies than compression itself.
If you’d like to experiment with the algorithm,
try the live implementation on
ResizeHub.

Further Reading

• JPEG Specification (ITU-T T.81) — the original standard, for anyone who wants the DCT/quantization details in full
• WebP Documentation (Google)
• AVIF Documentation (Alliance for Open Media)
• MDN: HTMLCanvasElement.toBlob() — the browser API used in the code above

If you’ve implemented an exact-size image compressor, how did you handle the quality-vs-dimensions trade-off? Binary search like this, a perceptual metric like SSIM/PSNR to decide when quality loss becomes “visible,” or something else entirely? I’d love to compare approaches.