How I Compress Images to an Exact File Size in the Browser

VektraTool — Thu, 22 Oct 2026 13:36:48 +0000

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 the photo never leaves the device. This post walks through the approach: what works, what doesn't, and the edge cases that broke my first version.

Why a quality slider alone isn't enough

canvas.toBlob() gives you one knob for JPEG: quality, from 0 to 1. The obvious idea is "lower the quality until the file is small enough." Two problems:

Size doesn't change linearly with quality. Dropping from 0.9 to 0.8 can save a lot; dropping from 0.4 to 0.3 can save almost nothing. Stepping down by fixed amounts wastes encodes or overshoots.
Some targets can't be reached by quality at all. A 4000 × 3000 photo will not fit into 20KB at any quality. At some point you have to reduce the pixel count.

So the algorithm has two loops: a binary search on quality, and an outer loop that shrinks the dimensions only when quality can't do the job.

Step 1: Decode and draw the image

async function loadBitmap(file: File): Promise<ImageBitmap> {
  // Respect EXIF orientation so phone photos don't come out sideways
  return createImageBitmap(file, { imageOrientation: 'from-image' });
}

function draw(bitmap: ImageBitmap, scale: number): HTMLCanvasElement {
  const canvas = document.createElement('canvas');
  canvas.width = Math.max(1, Math.round(bitmap.width * scale));
  canvas.height = Math.max(1, Math.round(bitmap.height * scale));

  const ctx = canvas.getContext('2d')!;
  // JPEG has no alpha channel. Without this, transparent PNGs turn black.
  ctx.fillStyle = '#ffffff';
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  ctx.imageSmoothingQuality = 'high';
  ctx.drawImage(bitmap, 0, 0, canvas.width, canvas.height);
  return canvas;
}

Two small lines here saved me a lot of bug reports. The first is imageOrientation: 'from-image', because many phone photos are stored sideways with an EXIF flag. The second is the white fill, because a transparent signature PNG converted to JPEG otherwise gets a solid black background.

Step 2: Binary-search the quality

function encode(canvas: HTMLCanvasElement, quality: number): Promise<Blob> {
  return new Promise((resolve, reject) =>
    canvas.toBlob(
      (blob) => (blob ? resolve(blob) : reject(new Error('Encoding failed'))),
      'image/jpeg',
      quality,
    ),
  );
}

const Q_MIN = 0.1;
const Q_MAX = 0.95;

async function fitQuality(
  canvas: HTMLCanvasElement,
  maxBytes: number,
  steps = 7,
): Promise<Blob | null> {
  // If even the lowest quality is too big, quality alone can't fix it
  const smallest = await encode(canvas, Q_MIN);
  if (smallest.size > maxBytes) return null;

  let lo = Q_MIN;
  let hi = Q_MAX;
  let best = smallest;

  for (let i = 0; i < steps; i++) {
    const q = (lo + hi) / 2;
    const blob = await encode(canvas, q);
    if (blob.size <= maxBytes) {
      best = blob; // fits: remember it and try higher quality
      lo = q;
    } else {
      hi = q; // too big: go lower
    }
  }
  return best;
}

The search keeps the largest file that still fits, not the first one that fits. The person reviewing that photo is a human. Every byte you're allowed to keep is detail in their face, and fewer "blurry photo" rejections.

Seven steps narrow quality down to well under 0.01, which is finer than you'll ever see in the output.

Step 3: Shrink the dimensions only when needed

If quality can't reach the target, I scale the image down and try again. The question is how much to scale.

JPEG file size grows roughly with the number of pixels, and the pixel count grows with the square of the scale factor. So if the smallest encode is 4× too big, scaling each side by √(1/4) = 0.5 is a good first guess:

async function compressToSize(file: File, targetKB: number): Promise<Blob> {
  // Forms rarely say whether 1KB is 1000 or 1024 bytes.
  // Using 1000 passes either way.
  const maxBytes = targetKB * 1000;

  const bitmap = await loadBitmap(file);
  let scale = 1;

  for (let round = 0; round < 6; round++) {
    const canvas = draw(bitmap, scale);
    const fitted = await fitQuality(canvas, maxBytes);
    if (fitted) return fitted;

    const smallest = await encode(canvas, Q_MIN);
    const ratio = Math.sqrt(maxBytes / smallest.size);
    // A small safety margin, and never shrink more than half in one round
    scale *= Math.max(0.5, ratio * 0.95);
  }

  throw new Error(`Could not reach ${targetKB}KB without destroying the image`);
}

In practice this usually lands within one or two rounds, because the square-root estimate is close to right.

Edge cases that broke my first version

The file is already small enough. If someone uploads a 15KB JPG and asks for 20KB, re-encoding only makes it worse. Return the original. Just check that the format is what the form wants, since a 15KB PNG still fails a "JPG only" form.
Huge photos on phones. A 48-megapixel image decodes into a big pixel buffer, and mobile browsers have canvas size limits. Downscale to a sane maximum (for example, 2000px on the long side) before the search starts.
Targets that are too small. At 5KB a full-body photo becomes mush. I'd rather show a clear message than return something unusable.
Different browsers, different sizes. Chrome and Safari use different JPEG encoders, so the same quality value gives different file sizes. Because the search runs on the user's own encoder, it adapts automatically. Don't hard-code a "magic quality" per target.
Run it off the main thread. Seven to fifteen encodes can freeze the UI on slow phones. OffscreenCanvas in a Web Worker keeps the page responsive where it's supported.

Testing without a browser

Inject the encoder instead of calling canvas.toBlob directly. In tests, use a fake encoder whose output size is a simple function of quality and scale. Then you can check things like "returns the largest file under the cap" and "throws when the target is unreachable" in plain unit tests, with no canvas and no flaky image fixtures.

Wrapping up

The whole thing is three ideas:

Binary-search quality, and keep the largest file that fits.
When quality isn't enough, scale by the square root of how far off you are.
Handle the boring edge cases: orientation, transparency, already-small files and huge inputs.

I'm building VektraTool, a set of free browser tools for images, calculators and developers. If you want to see this approach in action, try the compress image to 20KB tool. It runs entirely in your browser.

Have you run into strange upload rules on government or exam forms? I'd love to hear them in the comments.

DEV Community: VektraTool